[JavaScript] var, let, const의 비교(+ 블록레벨 스코프)

01. var 키워드는 어떤 문제가 있을까?

• var 키워드는 중복선언을 허용한다. (기존에 의도와 다르게 변수값이 다르게 할당되는 경우가 발생할 수 있다.)
• var 키워드는 함수 레벨 스코프만을 허용한다. (함수를 제외한 다른 문에서 선언된 함수는 모두 전역함수가 된다. 전역변수의 남발)
• var 키워드는 변수 호이스팅에 의해 undefined로 초기화 된다.

02. let 키워드

• let 키워드는 동일한 스코프범위내에서 중복선언을 금지한다. (문법에러(SyntaxError)가 발생한다.)
• function을 포함한 모든 문의 코드블록({}) 을 지역스코프로 인정한다.
• let은 선언단계와 초기화단계가 구분되어 진행됨으로 _선언단계 후 초기화단계전 까지는 변수를 참조할 수 없는 구간_이 생긴다.
• 이 구간을 일시적 사각지대 (TDZ:Temperal Dead Zone) 이라고 부른다.

03. const 키워드

• const 키워드는 항상 선언과 동시에 초기화를 해주어야 한다. (const foo = 1)
• 블록레벨 스코프를 지원한다.
• 재할당 이 금지된다. 즉 원시값이 할당된 경우 변경이 불가능하다. (상수)
• 불변 이라는 뜻은 아니다. const에 객체가 할당된 경우 객체의 프로퍼티에 대한 변경 은 가능하다.
• const person = { name: 'ahn' } person.name = 'kim'; // 가능하다. console.log(person) // {name: 'kim'}

04. 우리는 어떠한 키워드를 사용해야 할까?

• ES6에서는 var를 사용하지 않는다.
• 기본적으로 const를 사용한다.
• 재할당이 필요한 경우에는 let을 사용한다.

05. 그래서 블록 레벨 스코프가 뭡니까?

함수의 코드블록만을 지역스코프(유효범위)로 인정하는 것이 아니라 다른 문(for, if, while, ...)의 코드블록을
모두 지역스코프(유효범위)로 인정하여 해당 코드블록 내부에서 선언된 let, const 변수는 지역변수가 된다.

function test() {
  var i = 10;
  console.log(i) // 10
}

// let 키워드를 사용하여 i를 선언하였기 때문에 for문의 코드블록을 하나의 지연스코프로 인정할 수 있다.
for(let i = 0; i < 5; i++) { 
  console.log(i) // 0, 1, 2, 3, 4
}

// i 는 test 함수에서 선언한 전역변수 i이다.
console.log(i) // 10;