Hoisting 호이스팅

‘ var와 함수식은 위로 끌려올려진다. ’

---

var의 경우

1. 내가 짠 코드

console.log(a);
var a = 2;

2. 실제 컴파일된 자바스크립트

var a 
console.log(a); //undefined
a = 2;

3. 실행결과

💡 undefined

내가 짠 코드의 소스를 보면 변수 a가 선언되기전에 a를 콘솔로 찍었다.

그렇지만 오류가 나지 않는다. (물론 값을 제대로 찾지는 않는다.)
이유는 var와 함수식이 최상단으로 끌어올려지기 때문이다. 이걸 바로 Hoisting이라고 한다.

컴파일러는 자바스크립트 엔진이 인터프리팅을 하기 전에 컴파일을 하는데, 이 때 var a = 2; 를 var a 와 a = 2 2개의 구문으로 본다.

var a 선언문을 컴파일을 할 때 처리하고, 실제 실행 구문은 실행될때까지 내버려둔다.
따라서 변수 a는 호이스팅 되고 콘솔에는 undefined 가 나온다.

 

---

함수식의 경우

1. 내가 짠 코드

a();

function a () {
    console.log('a');
}

2. 실제 컴파일된 자바스크립트

function a () {
    console.log('함수 호이스팅 확인');
}

a();

3. 실행결과

💡 함수 호이스팅 확인

내가 짠 코드의 소스를 보면 함수 a가 선언되기전에 a를 실행시켰다.
역시 오류가 나지 않고 콘솔이 잘 찍힌다. 함수식이 최상단으로 끌어올려지기 때문이다.
하지만 여기서 주의할 점은 함수표현식은 끌어올려지지 않는다는 점이다.

 

---

함수표현식의 경우

1. 내가 짠 코드

func();

var func = function () {
    console.log('함수표현식 테스트');
}

2. 실제 컴파일된 자바스크립트

var func; //호이스팅 되어서 끌어올려짐. 하지만 아직 선언만 된 상태

func(); //함수실행 > 함수가 아님 > *오류발생*

//이미 값이 없는 변수 func는 실행되어 오류 뱉어냄
func = function () {
    console.log('함수표현식 테스트');
}

3. 실행결과

💡 `Uncaught TypeError: func is not a function at :1:1`

위의 var와 function 을 잘 이해했다면 함수표현식은 함수식이 아니라 var 로 선언이 먼저 된 후, 함수를 실행시키고 그다음 func에 함수를 담으려고 하기 때문에 오류가 나는것을 알 수 있다.