let & const

🤔 ES6?

ES6는 ECMA2015 버전으로, 2009년에 나온 ES5에서 Arrow function, map, filter 등이 추가되며 큰 폭의 변화가 생긴 자바스크립트 버전이다.
ES6로는 더 쉽고 간결한 방법으로 코드를 짤 수 있으며 위에서 잠시 언급했다시피 Class, Module, Arrow function, let & const, 비구조화 할당, Promise 등 추가된 다양한 기능을 활용할 수 있다.

🕰 ES6 이전의 변수들

let과 const가 생기기 이전에 var라는 예약어가 있었다. var는 한 번 선언하면 함수, 블록에 관계없이 전역에서 사용할 수 있는 범위를 가져 언제 어디에서 어떻게 값이 변경되었는지 알기 힘들다. 이렇게 변수의 scope가 전역이고 hoisiting이 일어난다면 큰 어플리케이션을 구축하거나 다른 개발자와 협업할 때 문제가 발생할 가능성이 크다. 물론 전역에서 재정의하거나 값을 덮어쓸 때는 유용하게 사용될 수 있겠지만 이런 로직은 구현하지 않는 것이 코드의 품질에 좋다.
이런 var의 문제를 해결하고 궁극적으로 개발자의 실수를 줄여주는 let과 const가 등장하였다.

---

let

#block-level scope | #temporal dead zone | #hoisting

block-level scope

let은 block-level scope를 가진다. 여기에서 block-level scope란 {}로 이루어진 블록 - if, else, for, try-catch, while 등 - 안에서만 유효하게 사용할 수 있는 scope를 가진다는 뜻이다.
블록을 감싸고 있는 블록이나 전역에 선언된 let은 내부 블록에서 호출할 수 있지만 다른 블록에 있거나 블록 내부에 있는 let은 블록 외부에서 호출할 수 없다. 이런 특징으로 변수가 알 수 없는 곳에서 바뀌고 사용되는 것을 방지할 수 있다.

위 그림으로 설명하자면 A는 전역, 블록 A, 블록 B에서 사용할 수 있고 B는 블록 A, 블록 B에서, C는 블록 B에서만 사용할 수 있죠. 만약 C를 블록 B가 아닌 전역이나 블록 A에서 호출한다면 C is not defined 콘솔 오류가 발생합니다.

temporal dead zone

temporal dead zone은 변수가 선언되기 전 (let) 혹은 선언 및 초기화 되기 전 (const)까지의 공간을 의미한다. 이 공간은 C나 C++에서처럼 변수의 주소나 메모리 공간이 아닌, scope에 진입하는 시점부터 선언 또는 선언 및 초기화되기 전의 변수를 호출하는 곳까지의 period를 의미한다.

let a = 'out A';
function blockA() {
 console.log(a);
 let a = 'in A';
}

위와 같은 코드가 있다고 할 때, blockA()를 호출하면 out A가 출력될 것 같지만 ReferenceError가 출력된다. 블록 중 하나인 function 안에서 a를 출력하는 문장이 블록 내의 a를 선언하는 문장보다 위에 있기 때문이다. 이때, temporal dead zone(TDZ)은 블록 내부에서 a를 선언하는 문장에서 끝나게 된다.

hoisting

var를 사용하면 hoisting이 일어나 변수의 선언부가 프로그램의 위로 끌어올려진다.

console.log(captain);
var captain = 'Kirk';

위의 코드를 실행하면 변수의 선언부인 var captain이 가장 위로 끌어올려져

var captain;
console.log(captain); // undefined
captain = 'Kirk';

와 같은 형태가 되므로 console.log에서 undefined가 출력된다. 선언은 했으나 초기화가 되지 않은 상태이기 때문이다. 이런 코드가 들어있다면 예기치 못한 오류를 발생시킬 위험이 높아진다.
let에서는 이렇게 선언부를 위로 끌어올리는 hoisting이 일어나지 않아

console.log(captain);
let captain = 'Kirk';

위의 코드를 실행했을 때 captain is not defined 오류가 콘솔에 나타난다.

const

#block-level scope | #hoisting | #상수

const는 let과 유사한 점이 많다. block-level scope를 가지고 hoisting이 되지 않아 변수 선언 전에 변수를 호출하면 Cannot access 'xxx' before initialization 오류를 출력하며 실행되지 않는다. const의 가장 크고 중요한 차이점은 변하지 않는 상수라는 점이다.

const captain = 'Kirk';
captain = 'Sulu';

const로 captain을 정의하고 값을 초기화했다. captain이 'Sulu'로 바뀔까? var나 let이라면 바뀌었겠지만 위 코드를 실행하면 'captain' is read-only라는 오류가 뜬다. 즉, const로 초기화된 값을 변경할 수 없다는 뜻이다.

❓그럼 혹시 초기화 없이 선언만 하면 undefined 자체로 상수화되나요?
❗️자바스크립트는 생각보다 똑똑합니다! const로 선언하고 초기화하지 않으면 Missing initializer in const declaration 라는 에러를 보여주며 const에 초기화가 되지 않았다고 알려줍니다.

하지만 const로 Object나 Array를 선언했을 때는 달라진다.

const starships = {
    first: 'Enterprise',
    second: 'Discovery',
    third: 'Franklin'
};

starships.first = 'Star Destroyer';

이렇게 starships Object를 선언한 후 포함되어 있는 데이터 first를 바꿔보자. const는 상수이니 바뀌면 안 되지만... 😱 이럴 수가 first가 Star destroyer로 바뀌어버린다! 오류나 경고도 없이!
이유는 생각보다 간단하다. JavaScript의 Object나 Array는 참조값을 저장하기 때문이다. 즉, const starships가 갖고 있는 값은 객체 자체가 아닌 객체가 저장된 공간의 주소를 저장하고 있는 셈이다. (C나 C++의 포인터를 알고 있다면 이해가 쉬울 것이다.)
따라서 Object나 Array 변수가 갖고 있는 참조값을 바꾸지 않는 내부 값은 . 연산자나 [n]으로 변경할 수 있으나,

const newStarships = { first: 'Star destroyer' };
starships = newStarships;
starships = { first: 'Star destroyer' };

이렇게 변수가 참조하는 객체 자체를 바꿀 수는 없다. 만약 변경하려고 한다면 Assignment to constant variable 오류를 만나게 된다.

---

원글
astrogrammer.log - ES6 - let & const

참고
velog - [ES6] Hoisting & Temporal Dead Zone(TDZ)
Toast UI - TDZ을 모른 채 자바스크립트 변수를 사용하지 말라