[javascript] 👪 함수 호이스팅 / 함수 선언문과 함수 표현식

함수 호이스팅은 함수 선언이 해당 스코프의 최상단으로 옮겨지는 동작을 가리킨다.

변수에서의 호이스팅과는 다르다.

함수 호이스팅은 컴파일 단계에서 수행되며, 함수 선언은 해당 스코프의 최상단으로 이동됨.

이로 인해 함수를 선언하기 이전에도 해당 함수를 참조할 수 있는 현상이 발생함!!!!!!

 

 

즉, 함수 선언문의 위치와 상관없이 함수를 호출할 수 있음.

foo(); // "Hello, World!"

// 함수 선언문
function foo() {
  console.log("Hello, World!");
}

but, 함수 호이스팅은 함수 선언문(function declaration)에만 적용된다!!!!!!

 

 

함수 표현식(function expression)은 호이스팅되지 않으며, 변수에 할당된 함수는 변수 호이스팅과 동일하게 동작한다.

bar(); // TypeError: bar is not a function


// 함수 표현식
var bar = function() {
  console.log("Hello, World!");
};

함수 표현식은 호이스팅되지 않으므로 함수를 선언하기 이전에 변수를 참조하면 TypeError가 발생함.

 

 

ex) 최악의 상황예시 : 300줄 넘는 코드사이에 함수 선언문으로 함수를 작성해놓고 퇴사했다..  시간이 지나 500줄이 넘는 코드가 되었다.. 신입개발자가 왔다.. 전 개발자와 마음이 통했는지 같은 함수명으로 함수를 또 짰다.. 500줄 넘는 코드가 난리가 났다..  

 

 

** 협업을 많이 하고, 복잡한 코드일 수록. 전역 공간에서 이루어지는 코드 협업일 수록 `함수표현식` 을 활용하자!!!!