var 🆚 let, const (+ 변수가 생성되는 과정, TDZ)

javascript에서 ECMA2015(ES6) 문법이 표준화 되면서, 변수를 선언할 때 ES6 이전에 쓰던 var은 지양하고 ES6의 새로운 문법인 let과 const를 사용하는 것을 지향하게 되었다.
실제로 var을 개선하기 위해 나온 문법이 let, const이기 때문이기도 하다. 그렇다면, var의 특징은 무엇이고 왜 let, const를 사용해야하는 것인지 공부해봤다.

var, let, const의 특징을 살펴보기 전에, 변수가 생성되는 과정과 TDZ에 대해서 정리해 볼 것이다.

변수가 생성되는 과정(선언-초기화-할당)

---

javascript에서 변수는 3단계에 걸쳐서 생성된다.

• 선언 단계(declaration phase)
  변수를 실행 컨텍스트의 변수 객체에 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다.
• 초기화 단계(initialization phase)
  변수 객체에 등록된 변수를 위한 공간을 메모리에 확보한다. 이 단계에서 변수는 undefined로 초기화된다.
• 할당 단계(assignment phase)
  undefined로 초기화된 변수에 실제 값을 할당한다.

var 키워드로 선언된 변수는, 선언 + 초기화가 한번에 이루어진다.
따라서, 변수 선언문 이전에 변수에 접근해도 에러가 발생하지 않고 undefined를 반환한다. 이후 변수 할당문에서 값이 할당된다.

const, let 키워드로 선언된 변수는 선언과 초기화가 분리되어 진행된다. 즉, 스코프에 변수를 선언 하지만, 초기화 단계는 변수 선언문에 도달했을 때 이뤄진다. 초기화 이전에 변수에 접근하려고 하면 변수를 위한 메모리 공간이 아직 확보되지 않았기 때문에 참조 에러(ReferenceError)가 발생한다.

따라서, 스코프 시작 부터 초기화 시작 시점까지 구간을 TDZ라고 부르고, let과 const는 이 TDZ의 영향을 받는다.

TDZ

---

TDZ(Temporal Dead Zone), 즉 일시적 사각지대는 선언 단계와 초기화 단계 사이에서 변수에 접근(참조)하는 것을 의미한다.
var은 이러한 TDZ 영역에 들어와도 에러가 출력되지 않는다. 즉, TDZ의 영향을 받지 않는다. 실질적으로 위에서 설명한 것 처럼 var은 선언 + 초기화가 동시에 이루어지기 때문에, 선언 전에 변수에 접근한다고 하여 TDZ에 들어갈 일이 없다.
하지만, let과 const는 초기화 단계가 실제 변수 선언문에서 실행되기 때문에 선언문 전에 변수에 접근하게 되면 TDZ 영역에 들어오게 된다. 따라서, 초기화 이전에 변수에 접근하면 변수를 위한 메모리 공간이 할당되지 않은 상태이기 때문에 ReferenceError(참조 에러)를 출력한다.

var

---

1. var 키워드 생략을 허용한다.

함수를 선언할 때, var 키워드를 생략해도 인정해준다.
따라서, 암묵적 전역 변수가 생길 가능성이 크다.

2. var은 함수 레벨 스코프를 가진다.

함수 레벨 스코프란 무엇일까?

function sayHi() {
  if (true) {
    var phrase = "Hello";
  }

  alert(phrase); // 제대로 출력됩니다.
}

sayHi();
alert(phrase); // Error: phrase is not defined

위 예제는 함수 레벨 스코프를 보여주는 예이다. var은 함수 레벨 스코프이기 때문에, 함수 안에 들어있는 phrase 변수는 함수 내에서만 접근이 가능한 지역 변수가 되었다. 따라서, 함수 내에서 alert(phrase)를 호출 했을 때는 잘 출력이 되지만, 함수 외부에서 alert(phrase)를 호출했을 때는 undefined 에러가 뜬다.

if (true) {
  var test = true; // 'let' 대신 'var'를 사용했습니다.
}

alert(test); // true (if 문이 끝났어도 변수에 여전히 접근할 수 있음)

여기서 if는 함수가 아닌, '코드 블록'이다. var은 블록 스코프가 아닌, '함수 스코프'이기 때문에, var은 함수가 아닌 코드 블록을 무시한다. 따라서, 전역에서 test 변수에 접근이 가능하게 된다.
따라서, 함수가 아닌 곳에서 선언한 var은 모두 전역 변수가 되는 것이다. 이는 전역 변수를 남발할 가능성을 높혀서, 나중 큰 문제를 일으킬 가능성이 있다.

3. 재할당, 재선언(중복선언)이 가능하다. (에러 발생하지 않는다)

var name = '이름1';
var name = '이름2';
var name = '이름3';

console.log(name); //이름3

위와 같이, 같은 이름으로 재선언 및 재할당 했으나, 에러가 발생하지 않고 가장 마지막에 선언 및 할당된 '이름3'이 출력된다.
중복 선언해도 에러가 발생하지 않는 것은, 의도치 않는 변수값의 변경이 일어날 수 있기 때문에 매우 위험하다.

4. var 선언은 스크립트 시작되는 시점에 호이스팅되기 때문에, 실제 선언 전에 변수에 접근이 가능하다.

//var name; 호이스팅 된다. 

console.log(name); //undefined

var name = '이름';

선언은 호이스팅(끌올)되지만, 할당은 호이스팅 되지 않는다. 따라서 console.log(name)을 호출하면 할당한 값은 호이스팅 되지 않았기 때문에 undefined가 출력창에 뜬다. undefined는 변수 선언은 되었으나, 어떠한 값도 할당되지 않은 상태를 뜻한다.
아무튼, undefined가 뜰 뿐 에러가 뜨는 것이 아니기 때문에, var은 선언되기도 전부터 사용이 가능하다. 이는 var은 TDZ의 영향을 받지 않는다는 의미가 된다.

let, const

---

1. let, const는 블록 레벨 스코프를 가진다.

블록 레벨 스코프란, 모든 코드 블록(함수, if, for, while, try/catch ...) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없음을 뜻한다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.
이는 함수 레벨 스코프여서 전역 변수를 남발 할 가능성이 높았던 var의 한계를 개선한 부분이다.

2. let, const는 재선언이 불가능하다.

var은 재선언이 가능했기 때문에, 의도치 않은 변수의 변경이 일어날 수도 있는 위험이 있었다. 이를 개선한 let, const는 재선언이 불가능하다.

3. 선언 전에 변수에 접근할 수 없다.

만약 선언문 이전에 참조하면 참조 에러가 발생한다. (ReferenceError)
이는 const, let으로 선언된 변수는 스코프의 시작에서 변수의 선언까지 TDZ에 빠지기 때문이다. (TDZ는 위 설명 참고)

console.log(foo); // undefined
var foo;

console.log(bar); // Error: Uncaught ReferenceError: bar is not defined
let bar;

하지만, 주의할 것은 const, let이 선언 전에 변수에 접근할 수 없다고 해서 호이스팅이 안되는 것은 아니다.
호이스팅이란, 스코프안에있는 선언들을 모두 스코프의 최상위로 끌어올리는 것을 의미한다. var 뿐만 아니라, let, const 역시 호이스팅이 된다.

그런데 let, const는 선언 전에 호출하면 ReferenceError가 떴는데...?

만약, let, const가 호이스팅이 안된다고 가정해보자.

name = 'hello' // ReferenceError: Cannot access 'name' before initialization
let name = 'hi'

만약, 호이스팅이 되지 않는다면, 두번째 let 선언에서 already declared 에러가 났어야 한다. 하지만, 에러 내용은 ReferenceError, 즉 초기화 하기 전에 액세스 할 수 없다는 내용이다.

결론

---

변수는 블록 스코프를 가지는 것이 좋기 때문에, var은 지양해야한다.
ES6에서는 var은 사용하지 말자.
재할당이 필요한 경우에 한해 let을 사용한다. 이때 블록을 최대한 좁게 만들자.
변경이 발생하지 않는 값에는 const를 사용하자. const는 재할당을 금지하므로 var, let보다 안전하다! (의도치 않은 재할당을 방지해 주기 때문에 보다 안전하다)
일단 const 사용하고, 나중 재할당 필요하면 let으로 변경하자.

---

📚 참고 자료

• https://ko.javascript.info/var
• https://poiemaweb.com/es6-block-scope
• TDZ
  https://ui.toast.com/weekly-pick/ko_20191014
  https://merrily-code.tistory.com/87