var, let, const 의 차이

1. let, const, var 모두 호이스팅이 발생한다.
2. 화살표 함수는 초기화 전에 사용될 수 없다.

자바스크립트의 변수 선언은 var, let, const로 세 가지이다. 기존에는 var만 있었지만 ES6에서 let, const가 추가되었다. 자바스크립트에서 변수 선언은 선언 단계, 초기화 단계로 수행된다. 선언 키워드가 없어도 초기화가 될 수 있다.

*변수 생성 단계 : 선언 > 초기화 > 할당

 

 

자바스크립트에서 호이스팅이란, 자바스크립트 엔진이 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. 호이스팅이 일어나는 이유도, 이렇게 설계된 이유도 개발자들을 괴롭히려는 목적이 아니라 자바스크립트가 더 효율적으로 동작하도록 만들기 위함이다.

호이스팅을 설명할 땐 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것으로 말하곤 한다.

let 변수는 초기화하기 전에는 읽거나 쓸 수 없다. 초기화 전에 접근을 시도하면 ReferenceError가 발생한다. 변수 스코프의 맨 위에서 변수의 초기화 완료 시점까지의 변수는 "시간상 사각지대"(Temporal Dead Zone, TDZ)에 들어간 변수라고 표현한다. - mozilla

let 과 const 는 호이스팅되지 않는다?  ❌

자바스크립트의 변수 선언 키워드는 모두 호이스팅 대상이다. 단, let과 const는 var와 다르게 호이스팅 시에 식별자를 undefined로 초기화 하지 않는다.

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

var 는 1로 초기화하기 전에 undefined로 초기화되어 있는 것을 확인해볼 수 있다.

console.log(x)	// Uncaught ReferenceError : Cannot access 'x' before initialization
let x = 1;

let 이나 const 의 경우 레퍼런스 에러가 발생하고, x 를 초기화 전에 접근할 수 없다고 출력된다.

 

console.log(x) // Uncaught ReferenceError: x is not defined
x = 1

이처럼 어떠한 선언 키워드도 사용하지 않은 식별자의 경우, x 가 정의되어 있지 않다고 출력된다. 따라서 let 과 const 는 호이스팅은 되지만 호이스팅시에 undefined로 초기화되지 않는다는 말이 옳다.

 

📌 var, let, const 차이점

var 의 특징

1. var 는 함수 레벨 스코프로서, 함수 코드 블럭만을 스코프로 인정한다.
2. var 는 중복 선언이 가능하다.
3. var 는 호이스팅되면 undefined 로 초기화된다.

 

let 의 특징

1. let 은 블록 레벨 스코프이다.
2. let 은 재선언이 불가능하다. (SyntaxError 발생)
3. let 은 호이스팅되어도 초기화되지 않는다. (시간상 사각지대: TDZ)

 

const 의 특징

1. const 는 블록 레벨 스코프이다.
2. const 는 재선언이 불가능하다.
3. const 는 선언과 함께 초기화되어야 한다.
4. const 는 호이스팅되어도 undefined 로 초기화하지 않는다.

 

let const 차이? 불변성 여부 

let은 변수에 재할당 가능

const는 변수 재선언, 재할당 모두 불가능

 

 

어떤걸 써야할까?

javascript의 컨벤션 문서를 보면 var 사용은 금지된다. 이는 너무 넓은 스코프를 가지고 있으며 식별자의 재선언이 가능하기 때문에 협업에 혼란을 줄 수 있기 때문이다. 또한 변경되지 않는 변수의 경우에는 let 보다는 const 사용을 지향한다.

 

 

 

 

참고

https://velog.io/@hty0525/var-let-const%EC%9D%98-%EC%B0%A8%EC%9D%B4-%EB%B3%80%EC%88%98-%EC%84%A0%EC%96%B8-%EB%B0%8F-%ED%95%A0%EB%8B%B9