JS 호이스팅 / JavaScript Hoisting 자바스크립트 호이스팅

 

 

호이스팅(Hoisting)이란?

자바스크립트(JavaScript)에서 변수와 함수 선언이 스코프 내에서 코드의 맨 위로 끌어올려지는 동작

 

 

*아래 예시들은 위에서 부터 순서대로 코드가 작성 되었다고 가정.

 

 

Temporal Dead Zone (TDZ) : ECMAScript 6(ES6)에 도입된 개념으로
let 또는 const 키워드를 사용하여 호이스팅 시 선언 이후 초기화 되기전 머무르는 일시적인 죽음의 지대(?)로
초기화 이전에 접근하려고 하면 참조 에러를 발생 시킴

 

 

// 변수

console.log(examVar); // undefined 가 출력
/* var 는 변수 선언이 호이스팅되고 변수 초기화 전에 우선 undefined 로 초기화 되어 undefined 출력시킴 */
var examVar = 10;

console.log(examLet); // Uncaught ReferenceError: Cannot access 'examLet' before initialization
/* let 은 변수 선언이 호이스팅되고 변수 초기화는 실제 선언 위치에서 이루어 지며, 초기화 이전에 변수에 접근하면
"Temporal Dead Zone (TDZ)"에 들어가서 ReferenceError (참조 에러)를 발생시킴 */
let examLet = 10;

console.log(examConst); // Uncaught ReferenceError: Cannot access 'examConst' before initialization
/* const 는 변수 선언이 호이스팅되고 변수 초기화는 실제 선언 위치에서 이루어 지며, 초기화 이전에 변수에 접근하면
"Temporal Dead Zone (TDZ)"에 들어가서 ReferenceError (참조 에러)를 발생시킴 */
const examConst = 10;

 

 

// 함수

sayHello(); // "Hello, guys!" 출력
/* 함수 선언식으로 명시할 경우 함수 선언 및 초기화가 호이스팅되어 "Hello, guys!" 출력시킴 */
function sayHello() {
  console.log("Hello, guys!");
}


sayHelloVar(); // Uncaught TypeError: sayHelloVar is not a function
/* var 에 할당, 함수 표현식으로 명시할 경우, 함수 선언이 호이스팅되고 undefined 로 초기화 하고 
함수의 초기화는 함수 표현식 작성 위치에서 초기화 되기에 위 같은 에러를 발생시킴 */
var sayHelloVar = function() {
  console.log("Hello, guys!");
}


sayHelloLet(); // Uncaught ReferenceError: Cannot access 'sayHelloLet' before initialization
/* let 에 할당 함수 표현식 작성, 함수 선언이 호이스팅되고 함수 초기화는 
함수 표현식 작성 위치에서 이루어 지며 초기화 이전에 함수를 호출하려고 하면
"Temporal Dead Zone (TDZ)"에 들어가서 ReferenceError (참조 에러)를 발생시킴 */
let sayHelloLet = function() {
  console.log("Hello, guys!");
}


sayHelloConst(); // Uncaught ReferenceError: Cannot access 'sayHelloConst' before initialization
/* const 에 할당 함수 표현식 작성, 함수 선언이 호이스팅되고 함수 초기화는 
함수 표현식 작성 위치에서 이루어 지며 초기화 이전에 함수를 호출하려고 하면
"Temporal Dead Zone (TDZ)"에 들어가서 ReferenceError (참조 에러)를 발생시킴 */
const sayHelloConst = function() {
  console.log("Hello, guys!");
}