js 호이스팅이란? 호이스팅의 원리 ! 아주 간단하게! 함수 코드 실행 과정 설명!

호이스팅이란?

 

함수 앞에서 함수를 호출하는 것을 뜻합니다.

 

(네?)

 

"건설 현장의 이런 엘리베이터 보신 적 있으신가요?

건설 현장에서는 호이스트라고 합니다.

저는 공사장에서 호이스트를 타고 매일

일해본적이 있기에 이 사진을 보자마자

기억을 오래 할 수 있었습니다."

(TMI)

 

호이스팅을 검색하면

아래와 같은 내용들을 찾아볼 수 있습니다.

 

 

- 코드가 실행하기 전 변수선언/함수선언이 맨 위로 끌어올려진 것 같은 현상
- 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미
- 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언
등등..

여기서의 공통적인 핵심은 '미리' 또는 '맨 위'입니다.

 

호이스팅을 단순히 실행하면 맨 위로 올라간다?

미리 할당된다?

라고 생각하고 넘기기엔 조금 찝찝하기에

여기서 쬐~ 끔만 더

엔진의 동작을 알아보려고 합니다.

 

함수 코드 실행의 예를 통해 한 번 호이스팅이 뭔지 알아보겠습니다.

 

일단,

함수 코드의 해석 순서는 아래와 같습니다.

 

1. 함수 선언문 해석

2. 변수 초기화

3. 변수 실행

 

이 3가지 단계를 거칩니다.

 

function hoisting() {
    console.log('name=', name);
    console.log('getName=', getName());

    var name = '이름';
    function getName() {
        return "이름";
    };
}
hoisting();

 

위와 같은 코드에서 console.log 이 부분이 핵심입니다.

이 코드를 실행한다면,

각각 name과 getName결과는 어떻게 될까요!?

당장 f12 콘솔 창에 입력해보시면 아래와 같을 것입니다.

 

name= undefined
getName= 이름

 

에러가 나길 기대했나요?

아니면 호이스팅에 대해 살짝 알고 계셨다면

모두 undefined ??

아니면 둘 다 이름..?

 

위에서 거론한 해석 순서를 다시 한번 보면

 

1. 함수 선언문 해석

2. 변수 초기화

3. 변수 실행

 

이 과정을 한번 그림으로 표현해봐야겠습니다.

 

 

일반적으로 코드가 실행되는 순서는

위에서 아래 방향으로 순차적으로

실행이 된다고 알고 있기 때문에

에러가 날 것이다라고 예상하게 되는데,

 

위와 같은 순서로

이미 메모리에 할당이 되어있기 때문에

더 위에서 호출을 할 수 있습니다.

 

이를 호이스팅이라고 합니다.

 

 

그렇다면

아래와 같은 총 4가지의 경우에

어떻게 실행되는지 예상해보세요.

 

// case 1 함수 선언문 + 함수 선언문
function case1() {
    function book() {
        function getBook() {
            return "책1";
        };
        console.log(getBook());
        function getBook() {
            return "책2";
        }
    }
    book();
}
case1();

// case2 함수 표현식 + 함수 표현식
function case2() {
    function book() {
        var getBook = function() {
            return "책1";
        }
        console.log(getBook());
        var getBook = function() {
            return "책2";
        }
    }
    book();
}
case2();

// case3 함수 선언문 + 함수 표현식
function case3() {
    function book() {
        function getBook() {
            return "책2";
        }
        console.log(getBook());
        var getBook = function() {
            return "책1";
        }
    }
    book();
}
case3();

// case4 함수 표현식 + 함수 선언문
function case4() {
    function book() {
        var getBook = function() {
            return "책2";
        }
        console.log(getBook());
        function getBook() {
            return "책1";
        }
    }
    book();
}
case4();

 

 

* 보너스 *

 

function hoisting() {
    var name = getName();

    console.log('name=', name);

    function getName () {
        return "이름";
    };

    name = function () {
        return "없엉";
    };
}
hoisting();

 

이런 경우는 실행했을 때 결과가 무엇이 나올까요~?

 

정답은! 'name=이름' 이 출력됩니다.

 

가장 아래에 name = 이곳이 초기화 단계에서

undefined로 덮어버릴 것 같지만

실제로 초기화 단계에서는

값이 존재할 경우는 초기화하지 않습니다!

 

이렇게 호이스팅의 개념을 알아보다

엔진의 실행 원리(?) 순서를 조금이나마

알아보았습니다.