var 키워드의 문제점
- 중복선언을 허용하기 때문에 의도하지 않은 변수값의 변경이 일어날 가능성이 높다.
- 함수 레벨 스코프만을 허용함으로, 함수를 제외한 다른 문에서 선언된 함수는 모두 전역함수가 된다. 이는 전역변수의 남발할 가능성을 높인다.
- 변수 호이스팅에 의해 undefined로 초기화 됨으로, 변수를 선언하기 이전에 참조가 가능하다.
❓ 호이스팅이란?
java script 에서 호이스팅이란 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.
주로 호이스팅은 선언부를 함수 번위의 최상단으로 끌어올리는 현상이라 말한다.
✔ 변수의 생성 3단계
1. 선언 단계
변수를 실행 컨텍스트의 변수 객체에 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다.
초기화 단계
변수 객체에 등록된 변수를 위한 공간을 메모리에 확보한다. 이 단계에서 변수는 undefined로 초기화된다.할당 단계
undefined로 초기화된 변수에 실제 값을 할당한다.
위와 같이 var 키워드의 단점을 보완하기 위해 ES6에서는 새로운 변수 선언 키워드인 let과 const를 도입했다.
let 키워드
- let 키워드는 동일한 스코프범위내에서 중복선언을 하면 문법 에러가 발생한다.
- let 키워드는 값을 재할당 할수 있다.
- var 키워드와 달리 let, const로 선언한 변수는 블록 레벨 스코프를 따르게 된다.
블록 레벨 스코프는 function을 포함한 모든 문의 코드블록을 지역스코프로 인정한다.
const 키워드
- let 키워드와 동일하지만 다른점이 있다면, const는 상수를 선언하기 위해 사용하기 때문에 값을 재할당 할수 없다.
- 하지만 const 키워드에 객체를 할당할 경우 값을 변경할 수 있다.(원시값은 재할당없이 변경할수있는 방법이 없지만 변경 가능한 값인 객체는 재할당 없이도 직접 변경이 가능하기 때문)
- 즉, const 키워드는 재할당을 금지할 뿐 "불변"을 의미하지는 않는다.
- const 키워드는 항상 선언과 동시에 초기화를 해주어야 한다. (const foo = 1)
let과 const의 호이스팅
위에서 설명했듯, var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다.
// var 키워드로 선언한 변수는 런타임 이전에 선언 단계와 초기화 단계가 실행된다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 있다.
console.log(foo); // undefined
var foo;
console.log(foo); // undefined
foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1
let과 const 키워드로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.
// 런타임 이전에 선언단계가 실행된다. 아직 변수가 초기화 되지 않았다.
// 초기화 이전의 일시적 사각지대에서는 변수를 참조할 수 없다.
console.log(ex); // ReferenceError: foo is not defined
let ex; // 변수 선언문에서 초기화 단계가 실행된다.
console.log(ex); // undefined
ex = 1; // 할당문에서 할당 단계가 실행된다.
console.log(ex); // 1
- let과 const는 호이스팅을 발생시키지 않는것 처럼 보인다.
- 이는 var키워드와 달리 호이스팅 됨과 동시에 undefined로 초기화되지않고 할당문을 만나기 전까지 초기화되지않기 때문이다. 이때 선언문이 할당문을 만나 초기화 되기 전까지 참조할 수 없는 구간을 일시적 사각지대(TDZ:Temperal Dead Zone) 라고 부른다.
- 일시적 사각지대에 있는 let,const키워드로 선언한 변수를 참조하려하면 ReferenceError가 발생한다.
