Hoisting

hoisting이란 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.

var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.

-> JS는 코드의 순서와 관계없이 함수 선언식과 변수를 위한 메모리 공간을 먼저 확보하게 된다.

-> hoisting이 된다하더라도 실제 메모리에 올라가는 것이 아닌 선언부분을 위로 끌어올리기만 하는 것이다.

물론 JS도 모든 변수 선언이 hoisting으로 변수 초기화가 되는 것이 아니다.

javascript
1console.log(a) // reference error
2let a = "a"

var 이라면

javascript
1console.log(a) // undifined
2
3var a = "a"
4console.log(a) // a

스코프란 그 변수나 함수에 접근할 수 있는 위치를 말한다.

global

javascript
1let a = "a"
2
3const cl = () =>{
4  console.log(a) // a
5}

local

javascript
1const cl = () => {
2  	let a = "a"
3	console.log(a) // a
4}
5
6console.log(a) // error

TDZ (Temporal Dead Zone) 일시적 사각지대

위에서 let과 const는 호이스팅이 되지 않은다는 듯이 써놨지만 사실 호이스팅이 안되는 것은 아니다.

javascript
1// 선언 후 접근
2const zero = 0
3zero // 0
4
5// 선언 전 접근
6zero // reference error
7const zero = 0

위와 같은 경우가 존재할 때 둘 다 'const zero = 0' 전 까지 변수 'zero'는 TDZ에 있다.

let과 const 는 var과 다른 생명 주기를 가지고 있다.

변수 선언의 생명주기는 일반적으로 선언 - 초기화 - 할당 단계를 가지고 있다.

1. 선언

변수를 객체에 등록하는 단계 scope가 참조하는 대상

2. 초기화

변수를 위한 메모리를 만드는 단계 undifiend로 초기화된다.

3. 할당

undifiend로 초기화된 메모리에 값을 넣어주는 단계

var 변수는 변수 선언전에 선언과 초기화를 동시에 한다. 따라서 변수가 선언되자마자 undifiend로 초기화된다.

일반적인 생명주기를 따른다.

선언과 초기화 중간 단계에 TDZ가 존재한다.

let과 const 또한 선언전 변수 객체에 등록되어 호이스팅이 되지만 TDZ구간에 의해 메모리가 할당되지 않아 reference error가 발생한다.

ES6에서 변수를 선언하는 새로운 방법으로 나왔기 때문이다.

참고 :