모던 자바스크립트 Deep Dive 도서의 4장 변수와 5장 표현식과 문을 정리하였습니다.

4장 변수

4.1 변수란 무엇인가? 왜 필요한가?

메모리는 데이터를 저장할 수 있는 메모리 셀의 집합이다. 메모리 셀 하나의 크기는 1바이트이며 컴퓨터는 메모리 셀의 크기, 즉 1바이트 다위로 데이터를 저장하거나 읽어들인다.

메모리 주소를 통해 값에 직접 접근하는 것은 치명적 오류를 발생시킬 가능성이 매우 높다. 따라서 자바스크립트는 개발자의 직접적인 메모리 제어를 허용하지 않는다.

변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. 즉, 값을 위치를 가리키는 상징적인 이름이다.

따라서 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없고 변수를 통해 안전하게 값에 접근할 수 있다. 메모리 공간에 저장된 갓을 다시 읽어 재사용할 수 있도록 값이 저장된 메모리 공간에 상징적인 이름을 붙인 것이다.

4.2 식별자

변수 이름을 식별자라고도 한다. 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다. 또한 값이 아니라 메모리 주소를 기억하고 있다. 즉, 식별자는 메모리 주소에 붙인 이름이라고 할 수 있다.

4.3 변수 선언

변수 선언이란 변수를 생성하는 것을 말한다. 변수를 사용하려면 반드시 선언이 필요하다. var, let, const 키워드를 사용한다.

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

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

변수 생성 과정

• 선언 : 스코프에 변수를 선언한다.
• 초기화 : 변수의 값을 undefined로 초기화하며, 실제로 변수에 접근 가능한 단계이다.
• 할당 : 할당문을 만나면 변수에 실제 값을 할당한다.
  

var과 let, const에서의 변수 생성 과정

var

• 선언과 초기화 단계를 한 번에 실행하기 때문에 선언 전에 변수가 접근하여도 이미 초기화가 되어 접근이 가능하다.
  

let과 const

• 선언 단계는 스코프의 최상단으로 끌어올려져 실행되지만, 초기화 단계는 선언문을 만나면 실행된다.
• 초기화 이전에 변수에 접근하려고 하면 ReferenceError가 발생한다.
• 선언 단계가 실행되는 스코프의 최상단부터 오기화 단계를 실행하는 선언문이 나오기 전까지는 변수에 접근할 수 없다. 이 구간을 Temporal Dead Zone(TDZ)라 부른다.
  

4.5 값의 할당

변수 선언은 소스 코드가 순차적으로 실행되는 시점인 런타임 이전에 실행되지만 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다.

4.6 값의 재할당

값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없다면 변수가 아니라 상수라 한다. ES6에서 도입된 const를 사용해 선언한 변수는 재할당이 금지된다.

변수에 값을 재할당 하면 이전에 저장되어있던 메모리에 저장하는 것이 아니라 새로운 메모리 공간을 확보하고 그 메모리 공간에 저장한다.

또한 아무도 사용하고 있지 않은 메모리의 값들은 가비지 콜렉터에 의헤 메모리에서 자동 해제된다. 단, 메모리에서 언제 해제될지는 예측할 수 없다.

4.7 식별자 네이밍 규칙

식별자의 네이밍 규칙

• 식별자는 특수문자를 제외한 문자, 숫자, _, $ 를 포함할 수 있다.
• 단, 식별자는 특수문자를 제외한 문자, _, $ 로 시작해야한다. 숫자로 시작할 수 없다.
• 예약어는 식별자로 사용할 수 없다.
• 자바스크립트는 대소문자를 구분한다.

5장 표현식과 문

5.1 값

값은 식이 평가되어 생성된 결과를 말한다. 변수에 할당되는 것은 값이다.

5.2 리터럴

리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 말한다.

즉 리터럴은 값을 생성하기 위해 미리 약속한 표기법이라고 할 수 있다.

ex)
정수 리터럴 : 100
8진수 리터럴 0x41
배열 리터럴 : [1, 2, 3]

5.3 표현식

표현식은 값으로 평가될 수 있는 문이다. 즉, 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다.

var score = 100; // 표현식

score; // 100 -> 식별자 참조는 값을 생성하지는 않지만 값으로 평가되므로 표현식이다.

즉, 값으로 평가될 수 있는 모든 문은 모두 표현식이다.

5.4 문

문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위이다.

var x; // 변수 선언문

x = 5; // 할당문 

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

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

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

세미콜론은 문의 종료를 나타낸다. 문의 끝에 붙이는 세미콜론은 생략 가능하다.
자바스크립트 엔진이 소스코드를 해석 할 때 문의 끝이라고 예측되는 지점에 세미콜론을 자동으로 붙여준는 세미콜론 자동 삽입 기능이 암묵적으로 수행된다.

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

표현식인 문과 표현식이 아닌 문을 구별하는 가장 간단하고 명료한 방법은 변수에 할당해 보는 것이다.

표현식인 문은 값으로 평가되므로 변수에 할당할 수 있다.

var foo = x = 100;
console.log(foo); // 100

Ref

• 이웅모 저, ⌜모던 자바스크립트 Deep Dive⌟, 위키북스