[JS] var, let, const 차이점 + 호이스팅, TDZ

Javascript에서 변수 선언 방식인 var, let, const 의 차이점 구분하기

 

1. 변수 선언 방식

- var 는 변수 선언 방식에 있어 큰 단점 가짐

var name = "hayeon"
console.log(name) // hayeon

var name = "apple"
console.log(name) // apple

변수를 한 번 더 선언해도 에러가 나오지 않고 다른 값이 출력됨 (유연한 변수로, 코드량이 많아지면 어디서 사용했는지 파악하기 힘들고 값이 바뀔 우려가 존재)

 

따라서, ES6 이후 이를 보완하기 위해 추가 된 변수 선언 방식이 let, const 임

let name = "hayeon"
console.log(name) // hayeon

let name = "apple"
console.log(name) 
// Uncaught SyntaxError: Identifier 'name' has already been declared

let, const 는 name이 이미 선언 되었다는 에러 메세지가 나옴 (변수 재선언xx)

 

 

그렇다면 let 과 const 의 차이점은? 

: immutable(불변) 여부

 

· let 은 변수에 재할당 가능

let name = "hayeon"
console.log(name) // hayeon

let name = "apple"
console.log(name) 
// Uncaught SyntaxError: Identifier 'name' has already been declared

name = "orange"
console.log(name) // orange

· const 은 재선언 / 재할당 불가능

const name = "hayeon"
console.log(name) // hayeon

const name = "apple"
console.log(name) 
// Uncaught SyntaxError: Identifier 'name' has already been declared

name = "orange"
console.log(name) 
// Uncaught TypeError: Assignment to constant variable.

 

 

2. 호이스팅

:  호이스팅(Hoisting)이란, var 선언문이나 function 선언문 등 해당 스코프의 선두로 옮긴 것 처럼 동작하는 특성

   자바스크립트는 ES6에서 도입된 let, const 포함해 모든 선언(var, let, const, function, function*, class)을 호이스팅함

 

하지만 var로 선언된 변수와 달리 let 로 선언된 변수를 선언문 이전에 참조시 참조 에러(ReferenceError) 발생

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

console.log(bar); //Error: Uncaught ReferenceError: bar is not defined
let bar;

 

 let 은 왜 동작하지 않고 에러가 날까?

:  let 도 호이스팅은 되지만 ! TDZ 개념과 변수 선언 단계가 추가됨 (let, const 는 TDZ 에서 사용 불가능)

   즉, 초기화 (메모리 확보 및 undefined 로 값 할당) 하기 전 사용 불가!

 

 

변수는 생성시 [선언 → 초기화 → 할당] 3가지 단계 거침

변수 생성 3단계
1. 선언 단계 (Declaration phase) : 변수를 실행 컨텍스트의 변수 객체에 등록하는 단계 (변수객체 : 스코프가 참조하는 대상)
2. 초기화 단계 (Initialization phase) : 실행 컨텍스트에 존재하는 변수 객체에 선언 단계 변수 위한 메모리 만듬 ( 이 단계에서 할당된 메모리에는 undefined 로 초기화)
3. 할당 단계 (Assignment phase) : 사용자가 undefined 로 초기화된 메모리에 다른 값 할당하는 단계

 

1. var 는 선언, 초기화 단계 동시에 일어남 → scope에 해당 변수 등록, 메모리 확보 후 undefined 초기화까지 함

따라서, 선언하기 전에 접근해도 scope 에 존재하므로 undefined 값이 나옴

//스코프의 선두에서 선언 ~ 초기화 단계 실행
//따라서, 변수 선언문 이전에 변수 참조 가능

console.log(name);  //undefined

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

name = "hayeon";  //할당문에서 할당 단계 실행
console.log(name); //hayeon

 

2. let 은 선언 - 초기화 단계 분리 → 선언시 scope에 등록은 하지만 초기화X → 변수 접근해도 값이 없어 error 발생

즉, scope 시작 ~ 초기화 시작 지점까지 구간인 TDZ (temporal dead zone) 일시적 사각지대에 빠짐

//스코프의 선두에서 선언 단계 실행
//아직 변수가 초기화(메모리 공간 확보, undefined로 초기화)되지 않음
//따라서, 변수 선언문 이전에 변수 참조 불가능

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

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

name = "hayeon";  //할당문에서 할당 단계 실행
console.log(name); //hayeon

 

3. const 는 상수로 생성 후 값 변경 못함

따라서, 선언 - 초기화 - 할당 3가지 단계가 동시에 일어남

 

 

정리

1. var, let, const 는 모두 호이스팅이 일어남!

2. var 는 function scope 단위 - let, const 는 block scope 단위로 일어남

3. 변수 선언에는 기본적으로 const 사용, 재할당 필요할 때 한정해서 let 사용하자!

4. 객체를 재할당 하는 경우 흔하지 않음, const 는 의도치 않은 재할당 방지해 보다 안전함

- 재할당 필요할 때 경우 한정해 let 사용 이 때, 변수 스코프는 최대한 좁게!

- 재할당 필요없는 상수, 객체에는 const 사용

 

 

참조

https://gist.github.com/LeoHeo/7c2a2a6dbcf80becaaa1e61e90091e5d

javascript var, let, const 차이점

https://codiving.kr/90

[JavaScript] var, let, const 차이, hosting, TDZ

https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90

var, let, const 차이점