함수 호이스팅

개요

변수에 대한 호이스팅은 포스팅 한거 같은데 함수에 대한 호이스팅은 포스팅 하지 않은 것 같다. 생각보다 간단해서 간단간단하게 포스팅 할 예정이다.

 

호이스팅이란?

JavaScript 호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 import의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻한다.

 

함수 선언식(Function declarations)

간단하게 함수 선언을 function으로 시작 한다. 함수 선언식은 호이스팅 된다. 아래 예제를 확인하자.

fn1() // Output : "Function declarations"

function fn1 () {
    console.log("Function declarations")
}

 

 

함수 표현식(Function expresstions)

변수를 선언 하는 것과 같이 let, const를 사용하여 함수를 정의 한다. 함수 표현식은 호이스팅 되지 않는다. 아래 예제를 확인하자.

fn2() // Output : ReferenceError: Cannot access 'fn2' before initialization

const fn2 = function() {
    console.log("Function expressions")
}

or

const fn2 = () => {
    console.log("Function expressions")
}

 

 

마무리

나는 함수 선언식 보다는 함수 표현식인 화살표 함수를 많이 사용한다. 함수 선언식 처럼 어디에 함수를 선언 했던지 어디에서나 사용할 수 있다면 편하겠지만 코드가 길어질수록 많이 혼란 스러울 것 같다. 가끔 공식문서나 블로그에서 보면 함수를 호출할 때 함수를 선언 했던곳 보다 먼저 호출을 해서 헷갈릴 때가 많았는데, 드디어 블로그를 작성하면서 정리가 되는 것 같다.