JavaScript 함수의 호이스팅

Function Hositing. 함수 호이스팅입니다.

함수 호이스팅이란, JavaScript에서 JS엔진이 코드를 실행시키면, 돌아가기 전에 코드의 함수 선언에 대한 부분을 끌어 올립니다. 즉, JS엔진이 실행전에 코드 전체를 한 번 훑어보고 선언된 부분부터 먼저 읽는다~ 라고 생각하시면 편할 것 같습니다.

---

함수 호이스팅에 대해 알기 전에, JS에서는 함수를 정의하는 방법이 2가지가 있죠?

1. 함수 선언식

2. 함수 표현식

차례대로 설명드리겠습니다.

 

1. 함수 선언식

함수 선언식은 호이스팅이 적용됩니다. 그러면 함수 표현식은요?? 뒤에 말씀드릴게요.
JavaScript 코드를 실행시에 선언에 대한 코드는 맨 위로 끌어 올려 처리가 됩니다. 즉 선언식에서는 함수가 선언되기 전에 호출이 가능합니다.

console.log(myFunction()); // "Hello, World!"가 출력됩니다.

function myFunction() {
  return "Hello, World!";
}

위에서 myFunction()이라는 함수가 호출되기 전에 먼저 정의되었죠?

하지만 JavaScript엔진은 myFunction() 함수를 호이스팅으로 먼저 처리하여 Hello, World!라는 문자열이 출력됩니다.

 

2. 함수 표현식

함수 표현식은 호이스팅이 적용되지 않습니다!
함수 표현식은 변수에 함수를 할당하는 방식으로 작성됩니다. 위에서 선언은 끌어올릴 수 있다라고 말씀드렸죠? 맞습니다. 함수 표현식에서도 함수를 선언했다면 끌어올릴 수는 있지요. 하지만 할당되는 과정까지 끌어올리지는 못합니다. 맨 처음에 var, let 또는 const로 생성을 하게 되면 undefined의 상태를 가지게 됩니다. 이때 함수의 역할을 하기 위해서는 할당받아야만 가능한데, 이런 과정은 호이스팅(위로 끌어올림)되지 않으므로 오류가 발생하게 됩니다.

console.log(myFunction()); // TypeError 아직 정의되지 않았기 때문에

var myFunction = function() {
  return "Hello, World!";
};

코드에서 myFunction()이 undefined로 초기화된 후에 함수가 할당됩니다. 따라서 할당되지 않은 상태에서는 호출을 해도 의미가 없기 때문에 TypeError가 발생하게 됩니다.

---

JavaScript는 컴파일 단계에서 함수 선언을 메모리에 끌어올려서 처리합니다. 이 단계에서 함수 선언은 코드의 맨 위로 이동하고, 이후 코드 실행 시에 호출이 가능합니다!

하지만 함수 표현식은 실행 단계에서 변수에 할당되기 때문에, 변수 할당 전에는 호출을 할 수가 없습니다.