15.1 var 키워드로 선언한 변수의 문제점
15.1.1 변수 중복 선언 허용
var로 선언한 변수는 중복으로 선언이 가능하다. 이때 초기화가 있으면 재 선언되고, 초기화문이 없는 경우 무시된다.
15.1.2 함수 레벨 스코프
var 키워드로 선언한 변수는 함수의 코드블록만을 지역스코프로 인정해 if나 for문 등 속에서 선언한 변수도 전역변수가 되어 코드가 복잡해진다.
15.1.3 변수 호이스팅
var 키워드로 선언한 변수는 맨위로 끌어올려져 할당문 이전에 참조시 undefined를 반환한다. 이는 가독성을 떨어뜨리고, 오류 확률을 높인다.
let 키워드
15.2.1 변수 중복 선언 금지
var에선 문제 없었지만, let은 문법 에러가 발생합니다.
15.2.1 블록 레벨 스코프
var 키워드로 선언한 변수는 오직 함수 블록만을 지역 스코프로 처리하지만, let 키워드는 모든 코드 블록을 지역스코프로 인정하는 블록 레벨 스코프입니다.
let i = 10;
funtionc foo() { // 함수 레벨 스코프
let i = 100;
for(let i = 1; i < 3; i++){
console.log(i); // 1, 2
}
console.log(i); // 100
}
foo();
console.log(i); // 10
JavaScript
복사
15.2.3 변수 호이스팅
let은 변수호이스팅이 발생하지 않는 것 처럼 동작합니다.
console.log(foo); // ReferenceError: foo is not defined
let foo;
JavaScript
복사
이처럼 선언 이전에 참조시 참조 에러가 발생합니다. var 키워드의 경우 런타임 이전에 JS 엔진에 의해 ‘선언’과 ‘초기화’가 동시에 일어납니다.
let의 경우에는 이와 달리 ‘선언’과 ‘초기화’가 분리되어서 진행됩니다.
만약 선언만되고 초기화가 되지 않는다면 참조 에러가 발생하게되는데, 이처럼 스코프의 시작지점부터 초기화 지점까지 변수를 사용할 수 없는 구간을 TDZ(Temporal Dead Zone)이라 부릅니다.
단 호이스팅을 발생하기 때문에 아래와 같은 상황이 발생합니다.
let foo = 1;
{
console.log(foo); // ReferenceError
let foo = 2;
}
JavaScript
복사
15.2.4 전역 객체와 let
var 키워드로 선언한 전역변수와 전역함수의 경우 window의 프로퍼티가 되며, 참조 시 window를 생략 가능합니다. 하지만 elt 키워드로 선언한 변수는 전역 객체의 프로퍼티가 아니여서 window를 통해서 접근할 수 없습니다.
let x = 1;
console.log(window.x); // undefined
console.log(x); // 1
JavaScript
복사
15.3 const 키워드
15.3.1 선언과 초기화
const 키워드는 선언한 변수는 반드시 선언과 동시에 초기화해야 합니다.
const foo; // SyntaxError: Missing initializer in const declaration
JavaScript
복사
const는 let과 마찬가지로 블록 레벨 스코프이며, 변수 호이스팅이 발생하지 않는 것 처럼 동작합니다.
15.3.2 재할당 금지
let과 var는 재할당이 자유로우나 const는 금지되어 있다.
15.3.3 상수
변수의 상대개념인 상수는 재할당이 금지된 변수로, 원시 값 할당 시 변경할 수 없는 값입니다.
15.3.4 const 키워드와 객체
선언 시 원시 값이 아닌 객체일 때 프로퍼티의 수정은 가능하다.
15.4 var vs let vs const
var는 사용하지 마라. 그리고 기본적으로 const를 사용하되 필요한 경우에만 let으로 바꿔준다.