모던 자바스크립트 Deep Dive 정리
var 키워드로 선언한 변수의 문제점
1. 변수 중복 선언 허용
▶ let, const에서는 에러가 발생하지만, var에서는 허용된다
var x = 1;
var y = 1;
// var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다.
// 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다.
var x = 100;
// 초기화문이 없는 변수 선언문은 무시된다. (에러를 발생시키지도 않음)
var y;
console.log(x); // 100
console.log(y); // 1
2. 함수 레벨 스코프
▶ let, const는 블록 레벨 스코프이지만, var는 함수 레벨 스코프
▷ var는 함수 블록 이외의 코드 블럭은 별개의 스코프로 인정하지 않음
3. 변수 호이스팅
▶ var 키워드도 값을 할당하기 전에는 undefined를 출력할 뿐이다
▶ var 키워드로 선언한 변수는 런타임 이전에 선언 단계와 초기화 단계가 한번에 일어난다
// 이 시점에는 변수 호이스팅에 의해 이미 foo 변수가 선언되었다(1. 선언 단계)
// 변수 foo는 undefined로 초기화된다. (2. 초기화 단계)
console.log(foo); // undefined
// 변수에 값을 할당(3. 할당 단계)
foo = 123;
console.log(foo); // 123
// 변수 선언은 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 실행된다.
var foo;
let 키워드
1. 변수 중복 선언 금지
2. 블록 레벨 스코프
3. 변수 호이스팅 - 사실상 불가
▶ let 키워드는 할당 전에 참조하면 레퍼런스 에러를 발생시킨다
console.log(foo); // ReferenceError: foo is not defined
let foo;
▶ 이는 let 키워드로 선언한 변수는 선언 단계와 초기화 단계가 분리되어 진행되기 때문이다
▷ 선언 단계는 런타임 이전에 암묵적으로 실행되지만
▷ 초기화 단계를 변수 선언문에 도달했을때 실행된다
TDZ (Temporal Dead Zone)
▶ 일시적 사각지대
▷ 스코프 시작지점부터 초기화 직전까지 변수를 참조할 수 없는 구간
// 런타임 이전에 선언 단계가 실행된다. 아직 변수가 초기화되지 않았다.
// 초기화 이전의 일시적 사각 지대에서는 변수를 참조할 수 없다.
console.log(foo); // ReferenceError: foo is not defined
let foo; // 변수 선언문에서 초기화 단계가 실행된다.
console.log(foo); // undefined
foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1
▶ let 키워드로 선언한 변수도 여전히 호이스팅이 발생하긴 한다
▷ 아래 코드에서 전역변수 foo가 있음에도 출력하지 않고 코드블럭 내의 foo가 호이스팅된다
▷ 출력은 되지 않으나 변수가 선언된 것은 인식한다
let foo = 1; // 전역 변수
{
console.log(foo); // ReferenceError: Cannot access 'foo' before initialization
let foo = 2; // 지역 변수
}
▶ ES6의 모든 선언( var, let, const, function, class 등 )은 변수 호이스팅이 가능하다
▷ let, const, class 는 변수 호이스팅이 발생하지 않는것처럼 동작한다
const 키워드
1. 선언과 초기화
▶ const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야한다
const foo = 1;
const bar; // SyntaxError: Missing initializer in const declaration2. 재할당 금지
3. 상수
▶ 상수는 대문자로 표기하는 것이 원칙이다
▷ 언더스코어를 활용해 스네이크 케이스로 표기한다