var, let, const 차이점과 TDZ(작성중)

변수 선언 방식

var로 변수를 선언하는 방식에서는 큰 단점을 가지고 있다.

  var tg1 = '나는 var로 선언된 변수'
    console.log(tg1) // 나는 var로 선언된 변수

  var tg1 = '나는 var로 선언된 변수가 아니다.'
    console.log(tg1) // 나는 var로 선언된 변수가 아니다.

 

위의 예제처럼 같은 변수명으로 한번 더 선언을 했음에도 불구하고, 값이 재할당이 되어 출력되는 것을 볼 수 있다. 코드량이 많아지게 된다면 해당 변수가 중복되어 값이 바뀔 우려가 있으며, 어디에 어떻게 쓰이는지 알기 어렵게 된다.

 

이러한 문제를 보완하기 위해 ES6에서 let과 const를 새로 추가되었다.

 

이 두 변수 선언방식의 공통점으로는 재선언이 되지 않는 다는 점이다.

  let or const tg1 = '나는 var로 선언된 변수'
    console.log(tg1) // 나는 var로 선언된 변수

  let or const tg1 = '나는 var로 선언된 변수가 아니다.'
    console.log(tg1) // Uncaught SyntaxError: Identifier 'tg1' has already been declared

차이점은 immutable의 여부이다. let은 변수에 재할당이 가능하지만 const는 재선언 재할당 모두 불가능하다.

 

  let or const tg1 = '나는 var로 선언된 변수'
    console.log(tg1) // 나는 var로 선언된 변수

   tg1 = '나는 var로 선언된 변수가 아니다.'
                     //'나는 var로 선언된 변수가 아니다.'
    console.log(tg1) //Uncaught TypeError: Assignment to constant variable.

 

호이스팅

호이스팅은 말 그대로 끌어올려진다라는 의미를 가진다. 기존 var 변수는 호이스팅이라는 개념이 존재했는데 let/const에서도 호이스팅 여부를 알아보기위해선 Temporal Dead Zone(TDZ)의 개념이 필요하다.

 

Temporal Dead Zone

TDZ는 결론부터 말하자면 변수가 선언되기 전에 미리 접근을 시도하려는 행위를 차단하기 위해 알려주는 기능이다.

 

foo = 'bar';
var foo;
// 위는 아래와 같은 의미를 가진다.
var foo;
foo = 'bar';

JS엔진은 코드를 구문 분석하고 실행할 때 두 단계를 수행하게된다.

1. 코드를 실행 가능한 바이트 코드로 구문 분석

2. 런타임 실행

 

1단계는 JS엔진에 의해 호이스팅이 발생하며, 위의 예제와 동일하다.