[모던 자바스크립트 Deep Dive] 4~5. 변수, 표현식과 문

모던 자바스크립트 Deep Dive

04~05장 내용 정리

 

회사에서 사용하는 javascript를 좀 더 깊게 공부하기 위해 기초부터 한번 훝으려고 한다.

 

 

---

 

4장. 변수

변수

컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억함

메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체

메모리 셀 하나당 1바이트(8비트)이며, 컴퓨터는 메모리 셀의 크기, 즉 1바이트 단위로 데이터를 저장하거나 읽어들임

 

• 변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름(값의 위치를 가리키는 상징적인 이름)
• 변수에 값을 저장하는 것을 할당(대입, 저장) 이라 하고, 변수에 저장된 값을 읽어 들이는 것을 참조 라고 함

 

 

식별자

• 변수 이름을 식별자라 하며 어떤 값을 구별해서 식별할 수 있는 고유한 이름
• 식별자는 값이 저장되어 있는 메모리 주소와 매핑 관계를 맺고 있고, 메모리 주소를 기억하고 있음(값x)
• 변수, 함수, 클래스 등의 이름은 모두 식별자이며 선언에 의해 자바스크립트 엔진에 식별자의 존재를 알림

 

변수 선언

• 값을 저장하기 위한 메모리 공간을 확보하고, 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것
• 변수사용시 선언이 반드시 필요하며 var(함수레벨 스코프), let, const같은 키워드를 사용해서 선언
• 변수 선언시 default로 undefined 값이 암묵적으로 할당되어 초기화 됨

 

[변수 선언의 2단계 과정]

• 선언 단계: 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알림
• 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화 (초기화 하지 않으면 쓰레기 값이 남아 있을 수 있어서 이러한 위험을 방지하기 위해 암묵적으로 초기화를 수행)

※ 실행 컨텍스트: 변수의 이름을 비롯한 모든 식별자가 등록되며 자바스크립트 엔진이 소스 코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역
이부분을 통해 식별자와 스코프를 관리함

 

 

변수 선언의 실행 시점과 변수 호이스팅

console.log(score); // undefined

var score; // 변수 선언문

 

이 경우 참조에러가 발생하지 않고 undefined가 출력됨

-> 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문임

자바스크립트 엔진은 소스코드 실행을 위한 준비 단계인 소스코드의 평가 과정에서 변수 선언을 포함한 모든 선언문(변수 선언문, 함수 선언문 등)을 소스코드에서 찾아내 먼저 실행함
그리고 소스코드의 평가 과정이 끝나면 비로소 변수 선언을 포함한 모든 선언문을 제외하고 소스코드를 한 줄씩 순차적으로 실행함 

 

이렇게 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라고 함.

 

 

값의 할당

var score = 80; // 변수 선언과 값의 할당

/* 한줄로 변수 선언과 값의 할당을 하여도 실제로 둘의 실행시점이 다름

   변수 선언 : 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행
   값의 할당 : 소스코드가 순차적으로 실행되는 시점인 런타임에 실행 */

 

값의 할당

 

※ 변수에 값을 할당할 때는 이전 값(undefined)이 저장되어 있던 메모리 공간을 지우고 그 메모리 공간에 할당값(80)을 새롭게 저장하는 것이 아니라 새로운 메모리 공간을 확보하고 그곳에 할당 값 80을 저장함

 

어느 식별자와도 연결되지 않은 불필요한 값들은 가비지 콜렉터에 의해 메모리에서 자동 해제됨

 

 

상수(Const) : 값을 재할당 할 수 없어서 변수에 저장된 값을 변경할 수 없는 변수(한번만 할당 가능)

※ ES6에서 도입된 const 키워드를 사용해 선언한 변수는 재할당이 금지됨

 

 

식별자 네이밍 규칙

• 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어, 달러 기호를 포함할 수 있음
• 식별자는 특수문자를 제외한 문자, 언더스코어, 달러 기호로 시작해야함
• 예약어는 식별자로 사용할 수 없음

그외에로도 변수 이름은 변수의 존재 목적을 쉽게 알게 하기 위해 의미를 명확히 표현해야하며 이름을 선언할 시 의미를 생각하면서 심사숙고하여 정하는 것이 좋음

 

 

네이밍 컨벤션

• 카멜케이스(firstName) : 변수, 함수 이름
• 스네이크케이스(first_name) : 생성자 함수, 클래스 이름
• 파스칼 케이스(FirstName)

---

 

var, let, Const 변수선언자에 대해서 차이점이 궁금해서 따로 찾아본 내용

	var	let	const
선언범위	전역 범위 or 함수 범위	블록 범위	블록 범위
업데이트 및 재선언	범위 내 둘다o	업데이트o, 재선언x	업데이트x, 재선언o
호이스팅	최상위 호이스팅, undefined로 초기화	최상위 호이스팅, 초기화x	최상위 호이스팅, 초기화x
선언	초기화하지 않은 상태에서 선언o	선언 중에 초기화	선언중에 초기화

// 참고 사이트 : https://www.freecodecamp.org/korean/news/var-let-constyi-caijeomeun/

---

5장. 표현식과 문

값(value) : 식(표현식)이 평가되어 생성된 결과(변수에 할당되는 것)

10 + 20; // 30

// 10 + 20은 평가되어 숫자 값 30을 생성함

 

 

리터럴(literal) : 사람이 이해할 수 있는 문자 or 약속된 기호를 사용해 값을 생성하는 표기법(notation)

3              // 숫자 리터럴(정수)
'hello'        // 문자열 리터럴
function() {}  // 함수리터럴

 

 

표현식(expression) : 값으로 평가될 수 있는 문(statement)

• 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조함

// 리터럴 표현식
10
'Hello'

// 식별자 표현식(선언이 이미 존재한다고 가정)
sum
person.name
arr[1]

// 연산자 표현식
10 + 20
sum = 10
sum !== 10

// 함수/메서드 호출 표현식(선언이 이미 존재한다고 가정)
square()
person.getName()

 

표현식은 값으로 평가되는데 표현식과 표현식이 평가된 값은 동등한 관계, 동치(equivalent)임

표현식을 값처럼 사용할 수 있으므로 문법적으로 값이 위치할 수 있는 자리에는 표현식도 위치할 수 있음

 

 

문(statement) : 프로그램을 구성하는 기본 단위이자 최소 실행 단위(여러 토큰으로 구성)

• 문의 집합으로 이뤄진 것 : 프로그램
• 문을 작성하고 순서에 맞게 나열하는 것 : 프로그래밍

토큰(token) : 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미

• ex) 키워드, 연산자, 식별자, 리터럴, 세미콜론, 마침표

// 문의 종류 : 변수 선언문
var x;

// 할당문
x = 5;

// 함수 선언문
function foo() {}

// 조건문
if(x>1) { console.log(x); }

// 반복문
for(var i = 0; i < 2; i++) { console.log(i); }

 

 

 

세미콜론과 세미콜론 자동 삽입 기능

• 세미콜론(;) : 문의 종료를 나타내는 기능
• 자바스크립트에서는 세미콜론 자동 삽입 기능(ASI)이 암묵적으로 수행됨
• 하지만 ASI의 동작과 개발자의 예측이 일치하지 않는 경우가 있으므로 세미콜론 사용을 권장

 

 

표현식인 문과 표현식이 아닌 문

표현식인  문	표현식이 아닌 문
값으로 평가될 수 있는 문	값으로 평가될 수 없는 문
변수에 할당 가능	변수에 할당시 에러 발생

 

var x;               // 변수 선언문은 값으로 평가될 수 없음 (표현식이 아닌문)
x = 1 + 2;           // 표현식이면서 완전한 문 (표현식인 문)

var foo = var x;     // SyntaxError
var foo = x = 100;   // 표현식인 문은 값처럼 사용 가능