157일차 - let, var, const의 차이 심화

let과 const

ES6에서 도입된 let과 const의 차이는 간결하다.
let과 const는 대부분이 비슷하나 재할당에서 차이가 난다.
let은 재할당이 자유로우나 const는 재할당이 금지된다.

let num = 1; // 1
num = 2; // 2

const num = 1; // 1
num = 2; // TypeError;

주의할 점은 객체의 프로퍼티는 보호되지 않는다. 재할당은 불가능 하지만, 객체의 내용은 변경할 수 있다는 뜻이다.

const age = {'Kim': 27};
age.Jung = 26;

console.log(age) // {Kim: 27, Jung: 26}

let과 var

let과 var의 가장 큰 특징은 var는 선언하기 전에 사용할 수 있다는 것이다.

console.log(num); // undefined
var num = 1;

그 이유는 var로 선언된 모든 변수는 호이스팅되어 다음과 같이 동작하기 때문이다.

var num;
console.log(num); // undefined
num = 1;

그러면 var는 호이스팅되고 let과 const는 호이스팅이 되지 않는 것일까? 정답은 '아니다' 이다.
var 키워드로 선언된 변수와 달리 let키워드로 선언된 변수를 선언문 이전에 참조하면 참조 에러가 발생하는 이유는 let 키워드로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone;TDZ) 에 빠지기 때문이다.

이에 대해 자세히 알려면 변수 생성의 3단계에 대해서 알아야 한다.
1. 선언 단계 - 특정 변수를 스코프가 참조하는 대상으로 만든다.
2. 초기화 단계 - undefined로 초기화
3. 할당 단계 - undefined로 초기화된 변수에 실제 값을 할당

var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다.
스코프에 변수를 선언하고 메모리에 변수의 공간을 확보한후 undefined로 초기화 하는 것이다.
그래서 변수 선언문 이전에 변수에 접근해도 스코프에 변수가 존재하기 때문에 에러가 발생하지 않는 것이다.

console.log(num); // undefined

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

num = 1; // 변수에 할당
console.log(num); // 1

let 키워드로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.
스코프에 변수를 선언 하지만 초기화 단계는 변수 선언문에 도달했을때 이루어 지는 것이다.
초기화 이전에 변수에 접근하려고 하면 참조 에러(ReferenceError)가 발생한다.
이런 현상이 발생하는 이유는 변수가 아직 초기화되지 않아서 이다.
따라서 스코프의 시작 지점부터 초기화 시작 지점까지는 변수를 참조할 수 없다.

console.log(num); // ReferenceError: num is not defined

let num; // 변수 선언문에서 초기화 단계가 실행된다.
console.log(num); // undefined

num = 1; // 할당문에서 할단 단계가 실행된다.
console.log(num); // 1

const 키워드는 반드시 선언과 초기화 할당이 동시에 이루어져야 한다.
그래서 재할당이 금지되는 것이고, 재할당을 시도하면 타입 에러가 발생하는 것이다.

추가

오늘 부터 Job Searching을 시작했다.
Job Searching이라는게 원래부터 걸어야 할 이어진 길이지만, 처음부터 시작하는 새로운 기분도 든다.
마치 정해진 길을 가는 고등학교를 졸업하고 사회에 나온 것 같은 기분이다.
이제 길은 내 길은 내가 스스로 이룩해야한다.

참고자료

PoiemaWeb
MDN - 호이스팅