함수선언식 VS 함수표현식의 호이스팅(Hoisting)

Posted 2 years Updated 2 years

By 베짱이가 되고싶은 개미。

호이스팅(Hoisting)은 JavaScript에서 변수와 함수 선언이 최상단으로 끌어올려지는 현상을 말합니다. 하지만 함수 선언식과 함수 표현식은 다르게 동작하므로 주의가 필요합니다.

함수 선언식은 전체가 호이스팅되기 때문에 함수를 선언하기 전에 호출해도 정상적으로 동작합니다.

console.log(zero); // undefined
sayWow(); // 'wow'

function sayWow() {
  console.log('wow');
}

var zero = 'zero';

함수 선언식인 sayWow는 전체가 끌어올려져서 호출 전에도 함수가 정의되어 있습니다. 아래 sayWow함수가 상단으로 끌여 올려진것과 같은 의미가 됩니다.

function sayWow() {
  console.log('wow');
}

var zero;
console.log(zero);
sayWow();
zero = 'zero';

함수 표현식은 변수만 끌어올려지고 함수의 할당은 그대로 유지되기 때문에 호출하기 전에 변수에 함수를 할당해야 합니다.


sayWow(); // 에러
sayYeah(); // 에러

var sayYeah = function() {
  console.log('yeah');
}

function sayWow() {
  console.log('wow');
}

함수 표현식인 sayYeah는 변수 선언만 호이스팅되어 sayYeah()를 호출하기 전에 함수를 할당해주지 않으면 에러가 발생합니다. 아래는 sayYeah가 호이스팅되어 상단으로 올려졌으나 값이 할당되지 않아 호출하면 에러를 발생시킵니다.

var sayYeah;
sayYeah(); // 에러

sayYeah = function() {
  console.log('yeah');
}

function sayWow() {
  console.log('wow');
}

함수 표현식은 변수에 함수를 할당하는 형태이므로 변수 호이스팅은 발생하지만 함수의 할당은 유지되지 않아 함수를 먼저 호출할 수 없습니다.

참고하면 좋은 링크
https://www.zerocho.com/category/JavaScript/post/5741d96d094da4986bc950a0