Javascript 함수 호이스팅(Hoisting)

호이스팅(Hosting)은 코드 구문이 실행하기 전에 변수 및 함수 선언이 해당 범위의 맨 위로 이동하는 Javascript 메커니즘입니다.

위 설명을 정확하게 이해하기 위해 예제를 만들어 테스트를 해봤습니다.

introduce('oyg0420'); // my name is oyg0420

function introduce(name) {
  console.log(`my name is ${name}`);
}

함수가 선언이 되기 전에 호출을 했는데, 결과는 에러 없이 정상적으로 작동합니다. 그렇다면 위와 같은 구문이 작동되는 이유에 대해 알아보겠습니다. 자바스크립트에서는 스코프 전체를 살펴보고 함수 선언을 맨 위로 끌어올리기 때문입니다.

그렇다면 어떤 방식으로 함수를 선언해야 호이스팅이 되는 걸까요?

sayHello('oyg0420');

const sayHello = function(name) {
  console.log(`hi, ${name}`);
}

위 예제는 함수 표현식으로 작성된 함수인데요, 함수가 선언되기 전에 호출을 해봤습니다. 결과는?
VM737:1 Uncaught ReferenceError: Cannot access 'sayHello' before initialization at <anonymous>:1:1
접근할 수 없다는 에러가 발생합니다.

결국 함수 호이스팅은 함수 선언식으로 작성된 경우에만 적용된다는 것을 알 수 있었습니다.

그렇다면, 함수내에서의 호이스팅은 어떻게 적용되는 것일까?

sum(2, 4); // VM853:1 Uncaught TypeError: sum is not a function
function f1() {
  sum(2, 4);

  function sum(a, b) {
    console.log(a + b);
  }
}

f1(); // 6

함수선언이 이루어진 함수 외부에서의 함수 호출로 에러가 발생했습니다. 함수선언과 같은 범위에 있는 함수 호출은 올바른 값이 반환되었습니다.

위 예제들로 전역 범위, 함수 범위에 따라서 다르게 동작한다는 것을 알 수 있었습니다.
전역 범위는 최상단에 끌려 올라가고, 함수 범위에서는 해당 함수의 최상단에 올려진다는 것을 알 수 있었습니다.

파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음