자바스크립트 호이스팅 javascript hoisting 의 개념. 이해하기

자바스크립트 호이스팅 javascript hoisting 의 개념. 이해하기

 

Hoisting 이란 자바스크립트의 기본동작 중에 하나 입니다.

자바스크립트의 변수는 사용된 후에 선언될 수 있습니다.

다른 말로 하면 변수가 선언되기 전에 사용 할 수도 있죠.

 

이유는 함수 내 여기저기서 변수가 사용될 순 있지만 실제로는 함수 상단에 선언한 것으로 간주하기 때문입니다.

 

말로는 이해가 잘 되지 않으니 코드를 보도록 하죠.

 

a = 10;

function getNum(){
    alert(a);
    var a = 100;
    alert(a);
}

getNum();

 

위의 코드를 보겠습니다.

간단한 코드이지만 확실히 이해해야 합니다.

 

함수 전에 전역변수 a에 10이 할당 되었습니다.

그러니 getNum() 함수의 첫번째 alert(a); 에서는 10 이 출력되고,

두번째 alert(a); 에서는 100이 출력된다고 대.부.분. 생각하실 겁니다.

 

하지만 결과는 다르죠.

 

undefined, 100 이 출력 됩니다.

그럼 왜 이렇게 출력이 되는 것일까요?

 

자바스크립트의 기본 동작인 hoisting (끌어올리기) 때문입니다.

함수가 실행되고 alert(a); 에서 a는 지역변수로 간주하게 됩니다.

 

function getNum(){
    (var a;)
    alert(a);
    a = 100;
    alert(a);
}

 

로 간주 하는 것이죠.

 

쉽게 말해 함수 내에서 선언된 변수는 모두 함수 상단에 선언된 것으로 인식하게 됩니다.

이것이 hoisting 의 개념이죠. 그 변수가 뒤에 변수선언문(var)으로 선언되었다 해도 말이죠.

 

var a; 로 선언은 되었지만 값이 할당 되지 않았기 때문에 처음 alert(a) 에서는 undefined 가 출력되는 것입니다.

 

 

 

 

 

/////////////////////////////// 2017.07.18 추가 ////////////////////////////////

 

함수내에서 함수선언문과 함수표현식으로 선언된 함수는 호이스팅에서 차이가 발생하게 됩니다.

 

ex) 함수선언문

function funcA(){
}

 

ex) 함수표현식

var a = function(){

};

 

그럼 함수선언문과 함수표현식을 함수 내에서 사용해 보도록 하겠습니다.

 

function getNum(){
     console.log(typeof funcA);
     console.log(typeof funcB);

     funcA();
     funcB();

     function funcA(){
          console.log('funcA');
     }
     var funcB = function(){
          console.log('funcB');
     }

     funcA();
     funcB();
}

getNum();

 

 

결과는 어떻게 될까요?

 

 

 

 

함수 선언문으로 선언된 funcA는 호이스팅 되어 정상동작 하지만

함수 표현식으로 선언된 함수는 funcB는 선언문만 실행되게 됩니다.

 

var funcB; 만 호이스팅 되므로 console.log(typeof funcB); 에서 undefined가 출력되고

funcB()실행 시 funcB is not a function. 에러가 발생하게 됩니다.

그럼 에러가 발생한 첫번째 funcB(); 를 주석처리 하고 실행해 보도록 하죠.

 

function getNum(){
     console.log(typeof funcA);      // function
     console.log(typeof funcB);      // undefined

     funcA();                             // funcA
     //funcB();

     function funcA(){
          console.log('funcA');
     }
     var funcB = function(){ 
          console.log('funcB');
     }

     funcA();                             // funcA
     funcB();                             // funcB
}

getNum();

 

 

함수 표현식 이후에는 정상 작동하게 됩니다.

 

/////////////////////////////// 2017.08.25 추가 ////////////////////////////////

 

마지막 복합적으로 호이스팅을 이해하기 위해 하나의 예제를 더 보도록 하죠.

 

function getNum(){

    funcA();
    funcB();

    function funcA(){
        console.log("funcA : "+value);
    }

    var funcB = function(){
        console.log("funcB : "+value);
    }

    var value = "Hoisting";
}

 

이 함수를 호이스팅 개념에서 작성하면 아래와 같습니다.

 

function getNum(){
    function funcA(){
        console.log("funcA : "+value);
    }

    var funcB;
    var value;

    funcA();  //funcA : undefined 가 출력될 것이고
    funcB();  //funcB는 함수가 아니니 에러가 발생하겠죠.

    funcB = function(){
        console.log("funcB : "+value);
    }
    value = "Hoisting";
}

 

 

호이스팅의 원리와 함수 선언문, 표현식의 차이를 유념하도록 합시당~