호이스팅 예제

문제

 

아래의 5번의 console.log(a) 에는 값이 몇일까요

 

답이 먼저 궁금하시면 여기 밑을 드래그 해보시면 답이 있습니다.

1, 3, undefind, 3, 3

 

var 를 쓰는 일은 극히 드뭅니다.

하지만 호이스팅 개념을 이해하고 변수와 함수의 선언부, 호출과 각 컨텍스트들을 이해하기에는 많은 도움이 된다고 생각합니다.

 

실행 순서

1) var a = 1 은 전역컨텍스트에서 변수 a 가 선언과 초기화, 할당까지 됩니다.

2) function outer() 은 전역 컨텍스트에서 함수 'outer' 가 선언됩니다.

 

3) outer 함수가 호출되고 outer 함수 내부로 진입하여 outer 함수에 대한 새로운 실행 컨텍스트가 생성됩니다.

3-1) 첫번째 console.log(a) 를 만나게 되고 outer 함수 스코프에서 a 를 찾으려고 하는데 a 를 찾을 수가 없습니다. 그러므로 스코프 체인에 의해서 상위 스코프로 이동하여 전역 컨텍스트에서 a 를 찾습니다. 따라서 전역 컨텍스트에 var a에 할당 된 1이 출력됩니다.

3-2) 다음으로 setTimeout 을 만납니다. 비동기 함수이기 때문에 이벤트 루프에 의해 컨텍스트에서 제외되고 Web API 로 이동하게 됩니다. 여기서 time을 설정하지 않다고해서 비동기 함수가 아니지 않습니다. (비동기 함수라는 뜻)

3-3) 다음 줄로 이동하여 a = 3 을 할당합니다. 현재 스코프에서 a 를 찾을 수 없으니 당연히 또 상위 스코프인 전역 컨텍스트에 있는 a 에 3을 재할당합니다.

3-4) console.log(a) 는 방금 전역 스코프에 할당 된 a 을 참조하여 3을 출력합니다.

 

4) inner 함수의 호출부를 만나고 이젠 inner 함수 내부로 이동합니다.

4-1) inner 함수 내부에 두번째 콘솔로그를 만나게 되고 a 의 값을 가져오려고 합니다. inner 함수 내부에 a 가 존재하지 않다면 상위 스코프를 outer -> 전역컨텍스트까지 찾아나가겠지만 inner 내부에 var a = 2 라고 a 가 다시 선언과 초기화 할당이 되어 있습니다. 하지만 console.log(a) 는 선언 전에 참조하려고 하고있습니다. 호이스팅에 의해 선언부 var a 는 최상위로 끌여올려지고 초기화 전 단계이기 때문에 a 에는 undefined 가 출력됩니다. var 2 를 할당하고나서 inner 함수는 더 이상 실행/참조할 코드가 없으므로 실행컨텍스트에서 제외됩니다.

 

5) 이벤트 루프에 의해 아까 3-2 에서의 setTimeout 의 내부 콜백함수가 콜백 큐로하고 다시 콜 스택으로 이동하게 됩니다. setTimeout 의 콜백함수인 console.log(a) 는 아까 전에 할당 되었던 3을 출력하고 outer 함수도 실행이 종료되고 실행 컨텍스트에서 제외됩니다.

 

6) 마지막으로 console.log(a) 도 전역 변수의 a를 참조하여 3을 출력합니다.

 

그러므로 console.log(a)의 순서는 1, 3, undefined, 3, 3 입니다.