var 키워드로 선언된 변수는 다른 언어와 구별되는 독특한 특징으로, 주의를 기울이지 않으면 심각한 문제를 발생시킬 수 있다.
var 키워드로 선언한 변수를 중복 선언하면 초기화문(변수 선언과 동시에 초기값을 할당하는 문) 유무에 따라 다르게 동작한다.
var x = 1;
var y = 1;
// var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다.
// 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다.
var x = 2;
// 초기화문이 없는 변수 선언문은 무시된다.
var y;
console.log(x); // 2
console.log(y); // 1
동일한 이름의 변수가 이미 선언되어 있는 것을 모르고 변수를 중복 선언하면서 값까지 할당하면 의도치 않게 먼저 선언된 변수 값이 변경되는 부작용이 발생한다.
var i = 10;
for(var i = 0; i < 5; i++) {
console.log(i)
}
console.log(i) // 5
var 키워드로 선언한 변수는 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 선언 단계와 초기화 단계가 한번에 진행된다.
var 키워드의 단점을 보완하기 위해 ES6에서는 새로운 변수 선언 키워드인 let과 const를 도입했다.
let 키워드로 중복 선언하면 문법 에러(SyntaxError)가 발생한다.
var foo = 123;
var foo = 456;
let bar = 123;
let bar = 456; // SyntaxError: Indentifier 'bar' has already been declared
let 키워드로 선언한 변수는 모든 코드 블록(함수, if문, for문, try/catch문 등)을 지역 스코프로 인정하는 블록 레벨 스코프르 따른다.