let, const, var
var 로 선언한 변수의 경우, 호이스팅 시 undefined 로 변수를 초기화합니다. 반면, let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.
그리고 let과 const는 호이스팅 대상체는 맞지만, TDZ라는 특수한 영역을 사용하여 참조를 방어합니다.
Var
1️⃣ 변수의 중복 선언이 가능하다
같은 이름의 변수로 중복 선언이 된다면, 어떤 변수의 기능인지, 어디서 사용했는지 등, 파악하기가 어려워져 다양한 문제들이 발생될 수가 있습니다. 그렇기 때문에 코드 작성할 때, 가급적 사용하지 않는 것이 좋습니다.
2️⃣ 호이스팅을 당한다
호이스팅이 발생하면 코드를 읽는 순서와 코드가 실행되는 순서가 달라지는데, 이 부분에서 헷갈리는 경우가 많습니다. 이 현상이 발생하는 이유는 Javascript interpreter가 코드를 해석할 때 변수 및 함수의 선언 처리, 실제 코드 실행의 두 단계로 나눠서 처리하기 때문입니다.
3️⃣ 함수 레벨 스코프
var로 선언된 변수는 함수 레벨 스코프 내에서만 인정됩니다. 함수 스코프만 인정되기 때문에 for 문 내부에서 선언한 변수 i 도 외부에서 참조 가능합니다.
4️⃣ var 키워드 생략 가능
변수를 선언할 때 var 키워드를 붙여도 되고 안 붙여도 됩니다. 다만, 코드가 복잡해진 상황에서 오타가 발생했을 경우, 문제를 찾기가 쉽지 않을 수 있습니다. 이러한 문제를 해결하기 위해서는 가급적 let과 const를 사용하는 것이 좋습니다.
let과 const의 등장 및 특징
let 은 var와 마찬가지로 변수를 선언할 때 사용하는 키워드이고, const 는 상수를 선언할 때 사용하는 키워드입니다. (const 는 리터럴 값의 재할당이 불가능하다는 특징이 있습니다.)
1️⃣ 변수의 중복 선언이 불가능하다
2️⃣ 호이스팅을 당한다 ( TDZ )
let과const는 호이스팅 대상체는 맞지만, TDZ라는 특수한 영역을 사용하여 참조를 방어합니다. V8이 변수 객체를 생성할 때는 전부 동일하게 처리하지만, 변수를 위해 메모리에 공간을 확보하는 초기화 단계에서 차이가 생기는 것이죠. let이나 const로 생성한 변수 객체는 TDZ(Temporal Dead Zone) 라는 구간에 들어가는데, 이때 해당 변수에 접근을 시도하면 Cannot access '%' before initialization 에러 메시지를 만나게 됩니다.
TDZ 구간에 있는 변수 객체는 선언은 되어있지만 아직 초기화가 되지 않아 변수에 담길 값을 위한 공간이 메모리에 할당되지 않은 상태 라고 할 수 있습니다.
3️⃣ 블록 레벨 스코프를 사용한다
블록 내부에서 선언한 변수는 지역 변수로 취급되기 때문에 외부 스코프에서 내부 스코프의 변수에 접근할 수 없습니다. ( let과 const는 호이스팅도 블록 단위로 발생합니다. )
4️⃣ let, const 키워드는 생략이 불가능하다
Const
1️⃣ 상수를 선언할 때 사용한다
const 키워드를 사용하여 값을 할당하면 두 번 다시 변경할 수 없습니다. 그러나 객체 내부의 프로퍼티들은 const의 영향을 받지 않습니다.
2️⃣ 반드시 선언과 동시에 초기화해줘야 한다
const를 사용하는 경우 반드시 선언과 동시에 값을 할당해줘야 한다는 특징이 있습니다.
hoisting(호이스팅)이란, interpreter(인터프리터)가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.interpreter(인터프리터)란, 프로그래밍 언어의 소스 코드를 바로 실행하는 컴퓨터 프로그램 또는 환경을 말합니다. (코드를 한 줄씩 읽어 내려가며 실행하는 프로그램)상수어떠한 불변 값을 의미
🗒 출처
- https://developer.mozilla.org/ko/docs/Glossary/Hoisting - MDN | 호이스팅
- https://overcome-the-limits.tistory.com/195 - var, let, const의 차이를 알아보자 (feat. TDZ)
