[JS] var, let, const 의 차이점 ( Feat. 호이스팅 )

정리

var, let, const 는 모두 변수 선언자로 let, const 는 ES6에서 추가 되었다.

차이점은 변수 재선언과 재할당, 스코프 가 있다

	var	let	const
스코프	Function Scope	Block Scope	Block Scope
재할당 / 재선언	재할당, 재선언 가능	재할당 가능	불가능

각 선언자의 특징

var

  console.log(a); // undefined
  var a = 1;
  console.log(a); // 1
  var a = 2;
  console.log(a); // 2
  if (true) {
    var a = 3;
  }
  console.log(a); // 3​

1.  변수의 중복 선언이 가능하다. 그래서 변수 a 는 2로 그리고 3으로 재할당된다.
2. 함수 스코프를 가진다. 그래서 함수를 벗어나지 않는 if 문의 블록 스코프를 벗어나도 변수 a 는 존재한다.
3. 선언과 초기화가 동시에 이루어진다. 호이스팅이 발생한다.

let, const

// 1
console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a = 1;
console.log(a); // 1
let a = 2;
console.log(a); // SyntaxError: Identifier 'a' has already been declared

// 2
if (true) {
  let a = 1;
}
console.log(a); // ReferenceError: a is not defined

1. 변수의 중복선언이 불가능 하다. 그래서 재사용하면 선언자 a 는 이미 존재한다는 에러가 발생한다.
2. 블록 스코프를 가진다. 그래서 if 문의 블록 스코프를 벗어나면 변수 a는 존재하지 않는다.
3. 선언과 초기화가 분리되어 있다. 호이스팅이 발생하지 않는 것 처럼 보인다.

 

호이스팅

처음에 가장 헷갈렸던 부분으로, let 과 const 는 Hoisting 이 일어나지 않는다고 배웠었는데 사실은 모든 코드는 호이스팅이 발생한다.
호이스팅이란, 자바스크립트가 코드를 실행하기전 모든 선언을 위로 끌어 올려진 것처럼 보이는 현상으로 자바스크립트 엔진이 실행 가능한 코드를 구분하는 과정을 거치는데 이 과정에서 모든 선언을 스코프에 등록하는 과정에서 일어나는 일을 호이스팅이라고 한다.

그런데 왜 let,const 는 호이스팅이 일어나지 않는 것 처럼 보이는걸까?
그 이유는, 호이스팅이 발생하는 과정에서 TDZ ( Temporal Dead Zone ) 이라는 공간에 들어가서 초기화 완료전에 사용하면 에러가 일어나기 때문이다.

변수는 선언단계, 초기화 단계, 할당 단계 로 이루어지는데 var 의 경우 선언과 초기화가 동시에 이루어지기때문에 var 값에 undefinded 로 초기화되어서 호이스팅되었을때 undefinded 가 보여지는 것이다.

 

오늘의 참고글

https://velog.io/@zeebeck/TDZTemporal-Dead-Zone%EB%A5%BC-%ED%86%B5%ED%95%B4-%EB%B0%9D%ED%98%80%EC%A7%84-let%EA%B3%BC-const%EC%9D%98-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85hoisting

TDZ(Temporal Dead Zone)를 통해 밝혀진 let과 const의 호이스팅(hoisting)

https://ui.toast.com/weekly-pick/ko_20191014