[JS] let, const 와 var 의 차이

1. 적용되는 스코프가 다르다.

• var 는 "함수 스코프"로 작동한다.
• let, const 는 "블록 스코피"로 작동한다.

var의 경우, 함수가 아닌 if, for, while, try/catch 문 안에서 선언된 변수를 중괄호 { } 밖에서도 사용 가능하다.

if (true) {
  var a = 1;
}
console.log(a);  //1이 정상적으로 출력된다.

 

그러나 let, const 의 경우 블록 스코프로 작동하기 때문에 함수 뿐만아니라 if, for, while, try/catch 문 내부에서 다른 스코프를 갖는다 (switch는 블록 스코프가 아님!)

if (true) {
  let a = 1;
}

console.log(a); // a is not defined 오류 발생

 

2. var는 함수를 재 선언할 수 있고, let은 함수를 재 선언할 경우 오류가 난다.

var a = 1;
var a = 2;
console.log(a); // 2가 정상적으로 출력된다.

let a = 1;
let a = 2;
console.log(a); // 에러가 발생한다.

즉, var는 최대한 안쓰는게 좋다. 코드가 길어질 경우 이미 선언한 함수를 덮어버릴 위험이 있다. 

let 으로 사용하면 모르고 다시 선언해버려서 이전에 선언된 값을 덮어 씌울 걱정은 안해도 된다.

 

3. Temporal Dead Zone (TDZ) 의 생성 여부

• var, let, const 는 모두 스코프 내에서 호이스팅이 일어난다. ( 호이스팅이 무엇인지는 검색해서 꼭 알아보자! )
• var 는 호이스팅으로 인하여 선언이 먼저 일어나면 값을 할당하기 전에 사용하더라도 오류가 나지 않는다. 그냥 undefined 로 값이 초기화 된다.
• let 은 호이스팅이 되더라도 값이 할당되지 않았을 때, 호출되면 에러를 발생한다. 즉, let이 호이스팅된 스코프에서 할당이 이루어지기 전까지의 영역을 TDZ 라고 정의한다. ( 이 영역에서는 해당 변수를 호출하면 에러 발생 )
• const 는 선언과 동시에 할당이 이루어지지 않으면 바로 에러발생

말이 어려우니 예시를 보자

console.log(a);
var a = 1;

위 예시는 undefined 라는 결과가 나온다. 즉, var로 선언된 변수는 해당 스코프에서 가장 상위 부분에 'var a' 로 선언이 먼저 되는 것! ( 호이스팅 )

 

console.log(a);
let a = 1;

 위 예시는 에러가 난다. let은 호이스팅이 되긴 하지만, 할당이 되기 전까지는 TDZ를 만들어 할당 되기 전에 호출될 경우 에러를 발생시킨다. const도 당연히 마찬가지!

 

let a = 1;

function test() {
  console.log(a);
  let a = 2;
}

test();

위 예시는 let이 스코프 내에서 호이스팅을 한다는 증거이다. 글로벌 객체에 a가 선언되었음에도 test 함수 내에서는 에러가 발생한다. 이유는 함수 내 스코프에서 a가 선언됐는데, 호이스팅이 일어나서 함수 스코프의 가장 상위 부분에 선언이 되고 (보이지는 않지만) 값이 할당되기 전까지는 TDZ로 작동하기 때문이다. 

 

const a;
a = 1;

위 상황도 에러발생 const는 무조건 선언과 할당이 동시에 이루어져야 한다.

 

참고자료

코딩앙마 유투브

https://youtu.be/ocGc-AmWSnQ