🚦 본론
제가 스코프 엄청 중요하다고 8장에서 거의 노래를 불렀었죠? 😉
네. 사실 스코프만 제대로 알아도 변수와 관련된 개념은 정말 일사천리로 이해된답니다!
우리의 면접 단골 질문인 var vs let vs const도 사실 굉장히 쉬워요. 바로 어떤 스코프를 기반으로 등록이 되는가에 초점을 맞추면 된답니다!
스코프
함수 레벨 스코프
var은 함수 레벨 스코프를 기반으로 변수를 등록해요.
이 말이 무슨 말이냐면, 조건문, 반복문 등에서도 변수를 선언하죠?
그런데 var은 오직 함수 스코프에서만을 기준으로 삼아요.
var a = 1;
for (var a = 0; a < 10; a ++) {}
console.log(a) // 10
if (a) {
var a = 10000;
}
console.log(a) // 10000블록 레벨 스코프
반면 let과 const는 블록 레벨 스코프를 기반으로 해요.
즉, 반복문과 같은 제어문들의 블록 스코프를 자신이 있어야 할 환경으로 인식한다는 것이죠!
var a = 1;
for (let a = 0; a < 10; a ++) {}
console.log(a) // 1
if (a) {
const a = 10000
}
console.log(a) // 1이게 왜 가능한 거죠? 😮
기존의 평가 단계가 어떻게 됐죠? 선언과 초기화였죠!
그런데 let과 const는 선언 단계와 초기화 단계가 분리되어 실행되어요.
초기화가 되어야 비로소 undefined라는 값을 가지게 되는데, 아직 메모리 주소에 할당되지 않았는데 변수로 메모리 주소에 담긴 값을 접근하려고 하니 참조 오류가 발생하는 것이죠!
원리를 따지자면, 내부에서 let과 const가 선언되는 순간, 기존 var이 위치한 스코프와 다른 별개의 환경을 생성하고, 그곳에 잠시 등록합니다. 그래서 기존 로직과 다르게 동작하기 때문에 애당초 접근이 불가능한 거에요.
그렇게 스코프가 시작한 지점부터, 변수가 비로소 초기화되는 곳까지 변수는 다른 환경에 존재하기 때문에 접근이 불가능한 것이죠. 극 구간을 TDZ라고 합니다. (이 TDZ를 맨날 단어로만 설명하지, 실제로 디버깅을 한 글을 본 적이 없었는데, 이 글을 보니 속이 뻥 뚫렸어요! TDZ가 실제로 코드에서 어떻게 일어났는지 궁금하시다면 참고하세요! 😆)
변수 중복 선언 금지
var은 변수 중복이 선언되지만, const와 let은 변수 중복 선언이 금지됩니다! 간단한 내용이니, 설명은 생략하죠 😉
// 문법적으로 가능
var a = 1;
var a;
// 문법적으로 오류
let b = 2;
let b; // SyntaxError: Identifier 'b' has already been declared전역 객체 여부
var은 전역으로 등록하면 전역 객체인 window의 프로퍼티가 됩니다. 다만, let과 const는 전역 객체의 프로퍼티가 되지 않아요. 엄밀히 var과 다른 환경에서 살고 있는 친구들이기 때문이죠!
이러한 환경의 이름은 선언적 환경 레코드라고 하는데, 이는 나중에 실행 컨텍스트를 다룰 때 살펴보죠!
let과 const 차이
⚠️ 단 let과 달리 const는 조건이 두개 더 붙어요.
1. 선언과 동시에 초기화해야 합니다!
const a; // Uncaught SyntaxError: Missing initializer in const declaration2. 재할당이 금지됩니다!
const는 constant라는, 상수의 의미를 담고 있어요.
상수란 무엇인가요? 변하지 않는 값이죠! 따라서 const는 선언되고 할당되는 값 외에는 참조하고 있는 메모리 주소와, 그 값이 변하지 않도록 합니다 🥰
const a = 2;
a = 3; // Uncaught TypeError: Assignment to constant variable.
a = 2; // 2라는 원시 값이 새롭게 메모리 주소에 할당되면서 참조하는 주소 값이 변하기에 오류 발생!🎉 마치며
정말 간단한 내용이긴 한데, TDZ에 대해서 개념적으로 알기는 한데 세부적으로 어떻게 동작하는지를 몰라서 찾느라 고생했네요.
그렇지만 덕분에 let과 const는 별도로 블록을 생성하는 것을 눈으로 봐서 좋았어요. 보자마자 별도의 환경을 조성한다는, 기존의 지식과 융합되는 감정은 짜릿했구요!
좀 더 자바스크립트 명세를 이해하게 된 것 같아 기분이 좋아요. 이상! 🌈
📑 참고자료
https://stackoverflow.com/questions/33198849/what-is-the-temporal-dead-zone
https://www.geeksforgeeks.org/what-is-the-temporal-dead-zone-in-es6/
.jpg)