ES5까지 변수를 선언 할 수 있는 유일한 방법은 var 키워드였는데 조심하지않으면,
심각한 문제를 발생시켰다.
var x = 1;
var y = 1;
// 중복 선언이 된다. 이게 뭔 말도 안되는 소리야 🤢
var x = 2;
var y;
console.log(x); // 2
console.log(y); // 1
<aside> 💡 문제점 : 동일하 이름의 변수가 이미 선언되있는지 모르고, 변수를 중복 선언하면서 값까지 할당했으면, 의도치 않게 먼저 선언한 변수의 값이 바뀌어 버린다!
</aside>
var 변수는 오직 함수 블록 내에서만 지역변수로 존재 하므로,
조건문 (if), 반복문(for) 블록스코프 안에서는 전역 변수로서 선언된다.
var x = 1;
// 조건문 코드 블록에서 var로 변수를 선언하면, 전역변수로 쓸수 있게 된다.
if(true){
var x = 10;
}
console.log(x) // 10
var 변수는 코드상 어디에서 선언하든간에 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어올려진것 처럼 동작한다.
// 이미 이 시점에 변수 호이스팅에 의해 foo에는 undefined가 초기화 되어있다.
console.log(foo); // undefined
// 변수에 값 할당
foo = 123;
console.log(foo); // 123
// 변수 선언은 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 실행된다.
var foo;
<aside> 💡 문제점 : 변수 호이스팅에 의해 런타임 전에 undefined로 선언되어 변수 선언한 곳 위에서도 참조 할 수 있다. (에러가 발생 하지 않음)
</aside>
위의 var 변수의 문제점으로 보완하기 위한 let 키워드가 ES6에 출시했다.