[JS] Hoisting(호이스팅)

호이스팅이란

호이스팅이란 선언된 함수나 변수의 선언문을 유효 범위의 최상단으로 끌어올리는 행위를 말한다.

주의할 점은 실제로 코드가 끌어올려지는 것이 아닌, 자바스크립트의 parser가 내부적으로 끌어올려 처리하는 것이다.

 

//변수
console.log(redColor);

//변수에 함수를 할당
console.log(blueColor());

//function
console.log(greenColor());

// var 호이스팅 영향받음
var redColor="red";

//이름이 없는 함수 ( 호이스팅 영향 안 받음)
var blueColor=function(){
    return "blue";
}

//이름이 있는 함수 (호이스팅 영향 받음)
function greenColor(){
    return "green";
}

 

호이스팅이라는 단어로 표현해서 어려워보일 수 있으나, c언어로 코드를 한번 보자.

#include <stdio.h>

int main()
{
    basic();    // 컴파일 에러
    return 0;
}
void basic()
{
    printf("Hello world");
}

컴파일 에러가 나는 이유는 c언어 컴파일러는 위에서 아래로 소스코드를 해석하기 때문인데, main함수를 읽을 때에 basic 함수에 대한 정보가 없기 때문에 에러가 나는 것이다.

#include <stdio.h>

void basic();

int main()
{
    basic();    // 컴파일 에러
    return 0;
}
void basic()
{
    printf("Hello world");
}

이렇게 basic함수를 선언해주면 에러가 발생하지 않게 되고, 이렇게 선언한 함수는 함수 원형(프로토타입)이라고 한다.

 

호이스팅

다시 돌아와서 정리하자면, 컴파일 에러가 발생하지 않도록 내부적으로 코드 상단에 선언해주는 것이라고 볼 수 있다.

console.log(count);

var count = 1;

이런 선언이 동작을 하는 이유를 생각해보면

var count;

console.log(count);

count = 1;

결국 내부에서 이런식으로 처리를 해주기 때문이다.

js 내의 모든 선언은 전부 호이스팅된다고 생각하면 된다.