호이스팅(Hoisting)

호이스팅이란 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.

*인터프리터(interpreter, 문화어: 해석기)는 프로그래밍 언어의 소스 코드를 바로 실행하는 컴퓨터 프로그램 또는 환경을 말한다. <위키백과>

호이스팅은 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것이다.

그렇다고 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리 하는 것이다.

컴퓨팅에서 parse는 인터프리터나 컴파일러 구성 요소 가운데 하나로 입력
토큰에 내재된 자료 구조를 빌드하고 문법을 검사한다.
parser는 수작업으로 프로그래밍되며 도구에 의해(반)자동적을 만들어질 수 있다.

함수의 호이스팅

함수선언문은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.

function anyFunction() { // 함수선언문 
    var name = anyFunction2(); // "선언 및 할당"
    console.log(typeof antFunction2); // > "function"
    console.log("name is " + name); // > "name is anyFunction2 value"

    function anyFuction2() { // 함수선언문 
        return "anyFuction2 value";
    }
}

anyFunction(); // 함수 호출 

해당 예제에서는 함수선언문이 아래에 있어도 anyFuction 함수 내에서 anyFuction2를 함수로 인식을 하기 때문에 오류가 발생하지 않는다.

함수표현식 또는 화살표 함수는 선언문과 달리 호출 순서에 따라 정상적으로 함수가 실해되지 않을 수 있다.

function anyFunction() { // 함수선언문 
    var name = anyFunction2(); // "선언 및 할당"
    console.log(typeof antFunction2); // > ERROR!!!
    console.log("name is " + name); // > "name is anyFunction2 value"

   	const anyFuction = () => { // 화살표함수 
        return "anyFuction2 value";
    }
}

anyFunction(); // 함수 호출 

그 이유는 함수표현식 또는 화살표 함수는 const를 사용하기 때문에 tdz 영역에 들어가게 된다.

TDZ(Temporal Dead Zone)이란 변수 선언 이전에 변수를 참조하는 영역 해당 영역에서 선언 이전에 참조한 변수는 참조 에러가 발생한다.

변수 호이스팅

변수 호이스팅 또한 함수 호이스팅과 같은 부분이 많다.

console.log(num); // 호이스팅한 var 선언으로 인해 undefined 출력
var num; // 선언
num = 6;  // 초기화

var 같은 경우에는 위치 상관없이 선언하여도 undefined가 출력 되지만,
let 과 const로 선언한 변수는 위에서 말했듯이 tdz 영역에 들어가게 되어 변수 선언 전에 먼저 사용하게 되면 오류가 발생하게 된다.

var와 함수선언문을 사용하여 코드를 짜면 흔히들 지뢰밭이라고 한다고 한다.
const, let과 화살표함수를 사용하기를 권장한다.