[ES6] Hoisting & Temporal Dead Zone(TDZ)

var, let, const를 알아보면서 가장 많이 언급되고 이해가 잘안되는 부분인 Hoisting과 Temporal Dead Zone(TDZ)는 도대체 무엇인지 공부하쟈

Hoisting?

• 사전적의미: 끌어올리다, 들어올리다
• javascript에서 변수가 선언되기 전에 사용 될 수 있다는 것을 의미합니다.
• javascript에서 ECMAScript® 2015 언어 명세 및 그 이전 표준 명세에서 사용된 적이 없는 용어입니다.

var hoisting Example

callMyName(name) // print: 'My name is '
console.log(name) // print: undefined

function callMyName(name) {
	console.log(`My name is ${name}`)
}

var name = '샘'

/* 아래와 같이 작동 */
var name;
function callMyName(name) {
	console.log(`My name is ${name}`)
}
callMyName(name); // print: 'My name is '
console.log(name); // print: undefined
name = '샘';

Hosting이 된다는 말은 선언 변수가 최상단에 위치하는 것을 의미한다고 할 수 있습니다. 하지만 선언 변수 및 함수가 실제로 최상단으로 이동하는 것은 아니며 코드에서 입력한 위치와 정확히 일치한 곳에 있습니다.

• let/const Hoisting

  console.log(name) // print: ReferenceError
  let name = '샘'

  let에서는 ReferenceError가 발생합니다. 이는 let/const는 Temporal Dead Zone에 영향을 받기 때문에 var와 다르게 작동하는 것을 볼 수 있습니다. 변수가 undefined로 시작되는 var와는 다르게 let 변수는 선언이 실행되기 전까지 초기화가 되지 않습니다. 따라서 변수가 초기화 되기 전에 접근하는 것은 ReferenceError를 뱉어내고 있는 것입니다.

Temporal Dead Zone(TDZ)??

• 위의 예제와 같이 초기화되지 않은 변수가 있는 곳을 Temporal Dead Zone이라고 합니다.
• 변수가 초기화되는 순간 TDZ에서 나오게 되며 사용할 수 있게 되는 것입니다.
• 위의 예제만 보면 let은 hositing 자체가 되지 않는다라고 생각할 수 있지만 let/const변수도 hoisted 됩니다!

let letValue = 'out Scope';
function hoistedLet() {
  // letValue가 TDZ에 영향을 받는 순간
  console.log('letValue', letValue); // ReferenceError
  let letValue = 'inner scope'; // letValue가 초기화 됨으로써, TDZ가 끝나게 됩니다.
};
hoistedLet()

여기서 let 변수가 hoisting 되지 않았다면, ReferenceError가 아닌 outScope가 찍히게 될 거라는 것이죠! TDZ는 개발자에게 좋은 경험을 주게 됩니다. 초기화가 되지 않은 바인딩에 접근할 때, 미리 초기화하라고 에러를 알려주기 때문이죠.

마치며

• Hoisting은 선언 끌올!
• let, const 는 초기화 되기 전까지 TDZ에서 대기!
• let/const는 스윽보면 hoisting이 안되는 것 같지만 오래보면 hoisting 되는 것