ES5 .Intro(7) - 호이스팅(Hoisting)

먼저 코드를 보자.

 

- 예측을 할 수 있을 것 같은(?) 코드 -

예측할 수 있는 시나리오는 다음과 같다. 

 

- findUser 함수는 아이디가 0보다 크면 성공메시지를 출력, 아니면 실패 메세지를 출력 -> if-else 문을 빠져나온 후, 실패 메세지를 다시 한번 출력

 

하지만 findUser(1)로 함수를 호출하게 되면 어떻게 출력이 될까? 

 

다음 코드와 같이 오류가 발생하지 않고, undefined가 출력이 된다. 어떻게 이런 결과가 나오는 것일까? 

 

이런 상황을 만들어 내는 호이스팅(Hoisting)에 대해서 알아보자.

---

var의 Function Scope와 Variable Hoisting

호이스팅(Hoisting)이란?

- 해당 변수(var)가 속한 범위(scope) 최상단으로 올려버리는 현상   

- 범위(scope)는 다른 언어처럼 block레벨이 아닌 function레벨이라는 것

 

var로 선언된 변수는 for나 if같은 block 범위가 아닌, function 범위에서 Hoisting이 된다. 

 

따라서  위 코드는 다음과 같이 해석이 된다. 

 

successMsg 변수와 FailureMsg 변수가 findUser 함수의 최상단으로 호이스팅(hoisting)되기 때문에, 전역에서 접근이 가능하다.

 

다음은 IIFE(Immediately-invoked Function Expression)에 대한 기록이다. 

 

< 참고자료 >

[도서] You don't know JS - 카일심슨 지음-

[블로그] https://www.zerocho.com/

 

<ES5 series> chapter 7,  호이스팅(Hoisting) end

 

---