호이스팅

뜬금없이 코드로 시작해 보자

    console.log(tHoist);

결과값은?

tHoist는 정의되지 않았다

tHoist라는 변수를 초기화하지도, 선언하지도 않았기 때문에 에러가 난다

    console.log(tHoist);

    var tHoist;

의 결과값은 어떨까?
자바를 먼저 공부한 사람이라면 'tHoist라는 변수가 먼저 정의되지 않았기 때문에 제일 첫 코드와 같이 에러가 난다'라고 말 할 것이다

선언은 되었지만 값이 비어있다.

하지만 자바스크립트에서는 에러가 나지않고 선언은 했지만 초기화하지않은 tHoist의 값인 undefined라는 값이 콘솔창에 출력된다

어째서 일까?

바로 자바스크립트의 호이스팅(hoisting) 때문인데
자바스크립트 실행시에 변수와 함수의 선언 부분만 코드의 최상단에 끌어올려(hoist) 위치시키기 때문에 에러가 나지 않고 실행이 되는 것

예를 더 살펴보자

    console.log(tHoist);
    console.log(fHoisting1());
    console.log(fHoisting2());

    var tHoist = 10;

    function fHoisting1() {
        return 'hoist';
    }

    var fHoisting2 = function () {
        return 'hoist2';
    }

이 코드가 호이스팅된 후 내부의 코드를 보면 이럴 것이다

    var tHoist;

    function fHoisting1() {
        return 'hoist';
    }

    var fHoisting2;

    console.log(tHoist);
    console.log(fHoisting1());
    console.log(fHoisting2()); 

    tHoist = 10;

    fHoisting2 = function () {
        return 'hoist2';
    }

결과값은

순서대로 tHoist, fHoisting1, fHoisting2의 결과값

선언과 할당이 동시에 이루어지는 함수 선언식인 fHoisting1은 통째로 호이스팅 되어 코드 최상단으로 올라가 에러가 없이 hoist라는 문자열이 출력되었지만

함수 표현식인 fHoisting2은 선언 부분만 호이스팅되었고 할당은 제자리에 남아있게 되어 에러를 뱉었다

변수인 tHoist도 마찬가지로 선언 부분만 호이스팅되고 할당은 제자리에 위치해 'undefined'를 출력했다

---

이러한 호이스팅의 특징은 사용하기 전에 반드시 선언해야한다는 규칙을 무시해버린다

때문에 코드 구조를 엉성하게 만들 수 있는데 그렇기 때문에 전문가들은

fHoisting1와 같이 함수 선언식은 사용을 피하고 fHoisting2와 같이 함수 표현식의 사용을 권장하고 있다