[자바스크립트] 끌어올림(hoisting), 호이스팅이란

자바스크립트

호이스팅, 끌어올림, hoisting, scope

자바스크립트 이용할때 신경써야 할 부분이 있다.

바로, 블록 유효범위(block scope), 스코프에 대해 신경을 써야한다.

자바스크립트는 다른 개발 언어와 다르게 블록 유효범위의 개념이 없다. 

js는 함수 유효범위(function scope), 즉 함수안에 선언된 모든 변수는 그 함수 전체에 유효하다는 의미이다.

자바스크립트를 사용한 사람은 한번쯤 들어 본적이 있을 것이다 끌어올림.

즉 함수내 모든 변수를 맨 꼭대기로 끌어올린것 처럼 사용된다는 점이다.

    function testHoist(){
        var outerHoist = "hello";
        if(hois1){
            console.log(outerHoist); - hello
            var innerHoist = "good";
        }
        console.log(innerHoist); - good
    }
 
    console.log(innerHoist); - 선언되지 않은 변수로 에러가 난다.
 

함수 유효범위 (testHoist)로 if문 안에 선언된 변수라도 함수 전체에서 유효하기 때문에 

if문 밖에서도 해당 변수 값을 읽어 올 수 있다. 

    var scope = "global";
 
    function f(){
        console.log(scope);   - undefined (global이 아니다)
        var scope = "local";
        console.log(scope);  - local
    }

왜이럴까?

첫번째 콘솔에 global이 찍일 것이라고 생각했다. 또는

끌어올림으로 local이 찍힐 수도 있었겠다. 

하지만 결과는 undefined이다. 

이유는 지역변수를 선언하는 var문이 아직 실행되지 않았기 때문이다. 

지역변수가 함수 전체에 정의되었더라도 var문이 실행되고 나서야 실제로 초기화 된다.

-참고

[자바스크립트 완벽가이드] - 데이비드 플래건지음, O'REILLY