[JavaScript] (자동)코드 재배치 : hoisting

🔻호이스팅, hoisting🔻

호이스팅에는 변수 호이스팅과 함수 호이스팅이 있는데 호이스팅이라고하면 보통 함수 호이스팅을 의미한다.

 

함수 호이스팅

자바스크립트를 실행하기 전에, 변수/함수 선언문을 해당 스코프의 최상단으로 끌어올린다.(코드 재배치)

    <script>
        function m1() {
            alert('m1');
        }
    
        m1();

        m2();       //함수 생성하기 전에 호출

        function m2() {
            alert('m2');
        }
    </script>

함수 m2를 정의하기 전에 호출을 먼저하지만 에러나지않고 'm1', 'm2'가 제대로 실행된다.

이런것을 함수 호이스팅이 발생했다고 한다.

 

 

변수 호이스팅

변수 선언을 현재 스코프의 최상단으로 끌어올리는 현상이다. 러나 변수의 초기화는 호이스팅되지 않는다.

 

원래라면 'not defined variable a' 라고 에러가 발생

    <script>
        function m3() {
            alert(a);
            var a = 10;     //not defined variable a
        }

        m3();
    </script>

a를 선언하기 전에 alert으로 a를 호출했다.

 

 

 

    <script>
        function m3() {
            var a
            alert(a);
            a = 10;
        }
        m3();
    </script>

 

    <script>
        function m4() {
            alert(b);   
            let b = 20;     //Cannot access 'b' before initialization
        }

        m4();
    </script>

호이스팅은 발생하지만 내부적으로 에러를 내자로 합의를 했다.