1. var 키워드로 선언한 변수의 문제점

ES5까지 변수를 선언 할 수 있는 유일한 방법은 var 키워드였는데 조심하지않으면,

심각한 문제를 발생시켰다.

1-1 🤮 변수 중복 선언 허용

var x = 1;
var y = 1;

// 중복 선언이 된다. 이게 뭔 말도 안되는 소리야 🤢

var x = 2;
var y;

console.log(x); // 2
console.log(y); // 1

<aside> 💡 문제점 : 동일하 이름의 변수가 이미 선언되있는지 모르고, 변수를 중복 선언하면서 값까지 할당했으면, 의도치 않게 먼저 선언한 변수의 값이 바뀌어 버린다!

</aside>

1-2 🤮 함수 레벨 스코프

var 변수는 오직 함수 블록 내에서만 지역변수로 존재 하므로,

조건문 (if), 반복문(for) 블록스코프 안에서는 전역 변수로서 선언된다.

var x = 1;

// 조건문 코드 블록에서 var로 변수를 선언하면, 전역변수로 쓸수 있게 된다.
if(true){
	var x = 10;
}

console.log(x) // 10

1-3 🤮 변수 호이스팅

var 변수는 코드상 어디에서 선언하든간에 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어올려진것 처럼 동작한다.

// 이미 이 시점에 변수 호이스팅에 의해 foo에는 undefined가 초기화 되어있다.

console.log(foo); // undefined

// 변수에 값 할당
foo = 123;

console.log(foo); // 123

// 변수 선언은 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 실행된다.
var foo;

<aside> 💡 문제점 : 변수 호이스팅에 의해 런타임 전에 undefined로 선언되어 변수 선언한 곳 위에서도 참조 할 수 있다. (에러가 발생 하지 않음)

</aside>

2. let 키워드

위의 var 변수의 문제점으로 보완하기 위한 let 키워드가 ES6에 출시했다.