JavaScript : 함수(Function) 호이스팅(Hoisting)이란?

✅ 함수 호이스팅

호이스팅이란? var선언문이나 function 선언문 등 모든 선언문이 해당 Scope의 선두로 옮겨진 것처럼 동작하는 특성을 말한다.

 

함수 선언문에는 3가지 가 있는데 이 3가지는 함수 정의 방식은 동작 방식에 약간 차이가 있다.

 

1. 함수선언문 을 사용했을때

let Number = add(5);

// 함수 선언문
function add(num) {
return num + num
}

console.log(Number);	// 10

위 코드는 함수 선언문으로 함수가 정의되기 이전에 함수 호출이 가능하다. 함수 선언문 경우 함수 선언의 위치와는 상관없이 코드

내 어느 곳에소든지 호출이 가능한데 이것을 함수 호이스팅(Function Hoisting)이라 한다.

 

자바스크립트 ES6의 let, const를 포함하여 모든 선언(var, let, const, function, class)을 호이스팅(Hoisting)한다.

 

함수 선언문으로 정의된 함수는 자바스크립트 엔진이 스크립트가 로딩되는 시점에 바로 초기화 하고 이를 VO(variable object)에 저장한다. 즉, 함수 선언, 초기화, 할당이 한번에 이루어진다. 그렇기 때문에 함수 선언의 위치와는 상관없이 소스 내 어느 곳에서든지 호출이 가능하다.

 

 

2. 함수 표현식을 사용했을때.

var result = add(5); // TypeError: square is not a function

var add = function(num) {
  return num * num;
}


let result = add(5);    // ReferenceError: Cannot access 'add' before initialization

let add = function(num) {
  return num * num;
}


const result = add(5);    // ReferenceError: Cannot access 'add' before initialization

const add = function(num) {
  return num * num;
}

함수 선언문의 경우와는 달리 TypeError 또는 ReferenceError가 발생한다. 

함수 표현식의 경우 함수 호이스팅이 아니라✅ 변수 호이스팅이 발생한다.

변수 호이스팅은 변수 생성 및 초기화와 할당이 분리되어 진행된다.
호이스팅된 변수는 undefined로 초기화 되고 실제값의 할당은 할당문에서 이루어 진다.

함수 표현식은 함수 선언문과는 다르게 스크립트 로딩 시점에 변수 객체(VO)에 함수를 할당하지 않고 runtime에 해석되고 실행되므로

이두가지를 구분하는 것은 중요하다.

 

자바스크립트의 권위자인 더글러스 크락포드(Douglas Crockford)는 이와 같은 문제 때문에 함수 표현식만을 사용할 것을 권고하고 있다.

함수 호이스팅이 함수 호출 전 반드시 함수를 선언하여야 한다는 규칙을 무시하므로 코드의 구조를 엉성하게 만들수 있다고 지적한다.

 

또한 함수 선언문으로 함수를 정의하면 사용하기에 쉽지만 대규모 애플리케이션을 개발하는 경우 인터프리터가 너무 많은 코드를 변수 객체에 저장하므로 애플리케이션의 응답속도는 현저히 떨어질 수 있으므로 주의해야 할 필요가 있다.