호이스팅의 이해

호이스팅이란?

호이스팅은 JavaScript 엔진이 코드를 해석하는 과정에서 발생한다.
코드 실행 이전에 JavaScript 엔진은 변수 및 함수 선언을 메모리에 끌어올려 해당 변수나
함수가 선언된 위치에 상관없이 사용할 수 있도록 한다.

함수 선언식과 호이스팅

함수 선언식은 코드 내에서 함수를 선언하는 방식이다.
함수 선언식을 사용하면 해당 함수가 선언된 위치보다 먼저 호출할 수 있다.
이는 JavaScript 엔진이 함수 선언식을 코드의 최상단으로 끌어올리기 ( 호이스팅 ) 때문에 가능하다.

sum(5, 10);

function sum(a, b){
    return a + b;
}

위의 코드에서는 sum함수를 호출한 다음에 해당 함수가 정의되어있다.
그런데도 실행되는 이유는 함수 선언식을 호이스팅하기 때문에 문제 없이 잘 작동하게 된다.

함수 표현식과 호이스팅

함수 표현식은 변수에 함수를 할당하는 것으로, 변수 선언만 호이스팅된다.
따라서 함수 자체는 호이스팅이 되지 않는다.

sum(5, 10); // 에러 발생

const sum = function(a, b){
    return a + b;
}

위의 코드에서는 sum함수를 호출한 다음에 해당 함수가 정의되어있다.
하지만 에러가 발생하는 모습을 확인 할 수 있다.

왜냐하면 sum이라는 변수는 호이스팅되지만,
해당 변수에 할당된 함수는 호이스팅이 되지 않기 때문이다.

문제해결

이 문제점을 해결하려면 아래 코드와 같이 함수 표현식아래에서 함수를 호출해야된다.
왜냐하면 함수 표현식은 함수 부분이 호이스팅이 이루어지지 않기 때문에 선언 이후에 호출해야 동작한다.

const sum = function(a, b){
    return a + b;
}

sum(5, 10);

결론

함수 선언식과 함수 표현식은 호이스팅이 다르게 동작한다.
함수 선언식은 전체가 호이스팅 되지만, 함수 표현식은 변수만 호이스팅된다.

이 차이점을 활용하여 큰 프로젝트에서는 함수의 중복으로 인한 문제를 방지하면서
원활한 작업을 할 수 있을 것으로 예상된다.