함수 표현식 호이스팅

Muru·2025년 2월 3일
post-thumbnail

함수 표현식의 호이스팅을 설명할때 함수 표현식은 호이스팅이 발생하지 않다는 설명을 합니다.

설명을 조금 덧붙이고자 합니다.


아래 코드를 실행하면 실행 결과가 어떻게 될까요?

bar();

let fun = () => {
    console.log("안녕");
}

당연하게도 없는 함수를 호출하려고 했으므로 정의되지 않았다는 에러가 나옵니다.

ReferenceError: bar is not defined

아래 코드의 실행 결과는 어떻게 될까요?
fun();

let fun = () => {
    console.log("안녕");
}

not defined이 아닌 다른 에러가 나오게 됩니다.

ReferenceError: Cannot access 'fun' before initialization

왜 이런 결과가 발생했을까요? 호이스팅이 발생하지 않는다고 하면 not defiend이 나와야 정상입니다.
이유는 함수 표현식은 변수 호이스팅으로 작동하게 됩니다.
따라서 fun 변수를 초기화 되기 전인 TDZ에서 읽으려고 했으므로 위 에러가 나오게 됩니다.

이렇게 함수 표현식은 호이스팅 자체는 이루어지게 되지만, 보통 사용하는 함수 선언식과 다르게 함수 표현식 할당문전에는 해당 함수를 사용할 수 없게 되니 설명을 간략화하여 함수 표현식은 호이스팅이 이루어지지 않는다 라고 간략화하여 설명 하는것 같습니다.

그러니까 함수 표현식은 함수 선언식처럼 함수 전체가 끌어올려지는 호이스팅을 기대하여 사용하지 않도록 하는것이 핵심인 것 같습니다.

  • 함수 선언식 : 호이스팅되어 함수 전체가 스코프의 최상단으로 끌어올려진다
  • 함수 표현식 : 변수자체는 호이스팅되지만, 함수가 할당되지 않았기 때문에 함수 표현식의 할당문에 도달하기 전에는 함수 자체를 호출할 수는 없다
profile
Developer

0개의 댓글