호이스팅이란 선언된 함수나 변수의 선언문을 유효 범위의 최상단으로 끌어올리는 행위를 말한다.
주의할 점은 실제로 코드가 끌어올려지는 것이 아닌, 자바스크립트의 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 내의 모든 선언은 전부 호이스팅된다고 생각하면 된다.