[javascript] hoisting(호이스팅)

 

hoisting(호이스팅)은 변수 및 함수 선언이 코드의 물리적인 위치가 최상위로 이동되는 것 처럼 보이는 현상을 말합니다. 

 

1. 변수 호이스팅

• 변수 선언문이 코드의 최상위로 이동되는 것처럼 동작. 
  
  
• 단, 할당문은 이동하지 않는다. 
  
  
• 이로 인해서 변수를 선언하기 전에 참조할 수 있지만, 값은 undefined임. 

예를 들어, 

console.log(x); // undefined
var x = 5;

위의 코드는 다음과 같이 해석이 된다. 

var x; // 선언만 최상위로 이동
console.log(x); // undefined
x = 5;

 

변수를 var가 아닌, let 으로 선언한 경우에도 호이스팅이 발생합니다. 단 var 키워드를 사용할 때와는 다른 방식으로 동작을 하게 됩니다. 

 

console.log(y); // ReferenceError
let y = 10;

위의 코드를 실행시키면 에러가 나옵니다. 이 에러는  let 키워드로 선언된 변수를 초기화 하기 전에 참조하려고 했기 때문입니다. 

let이나 const로 선언된 변수는 선언 단계와 초기화 단계를 거치게 되는데, 선언 단계에서는 변수가 메모리 공간을 확보하고 초기화 단계에서는 값이 할당됩니다. 이 두 단계 사이의 구간을 "일시적 사각지대(Temporal Dead Zone, TDZ)"  입니다. (let이나 const로 선언된 변수에 의도치 않은 접근을 막기 위해서 존재함.)

초기화 되지 않은 상태의 변수는 이 TDZ에 있게 되는데, 이 상태의 변수를 참조하려고 하면 ReferenceError가 발생하게 됩니다. 

 

2. 함수 호이스팅

• 함수 선언문 전체가 코드의 최상위로 이동. 
  
  
• 함수 표현식은 변수 호이스팅과 같이 동작. 

console.log(add(2, 3)); // 5

function add(x, y) {
  return x + y;
}

console.log(mult(2, 3)); // TypeError: mult is not a function
var mult = function(x, y) {
  return x * y;
}

위의 코드는 아래와 같이 해석이 된다. 

function add(x, y) {
  return x + y;
}

var mult; // 함수 표현식은 변수 호이스팅과 동일

console.log(add(2, 3)); // 5
console.log(mult(2, 3)); // TypeError: mult is not a function
mult = function(x, y) {
  return x * y;
}

 

여기서 함수 선언문으로 정의된  add 함수는 함수 선언문 전체가 호이스팅이 됩니다. 즉, 함수 정의 코드 전체가 최상단으로 이동하는 것과 같은 효과가 나오기 때문에 오류 없이 정상적인 결과값인 5가 출력됩니다. 

하지만, mult 함수의 경우에는 함수 표현식으로 정의가 되어 있는데 변수 선언문만 호이스팅이 되고 할당문은 호이스팅이 되지 않아서 "TypeError : mult is not a function"이라는 오류 메세지가 나오게 됩니다.