호이스팅(hoisting)이란 무엇인가??

 

 

자바스크립트에서 문법(?)이라고 할 수 있는 것 중 하나로 호이스팅이 있다. 호이스팅이란 

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.

이라고 설명해준다. 다른 곳도 마찬가지로 이렇게 설명해놓았는데, 번역하자면 '변수나 함수를 선언한 것을 위로 끌어올려 실행한다'는 뜻이다.

 

예를 들어 우리가 생각하기에 자연스러운 순서는 다음과 같다.

function hoist(){
    console.log('hello');
}

hoist(); // 'hello'

그렇지만, chrome에서 console 창을 열어 다음과 같이 실행시켜도 실행된다.

hist(); // 'hello'

function hoist(){
    console.log('hello');
}

생각하기에 함수를 선언하고 난 뒤, 실행을 시키는 것이 당연하다고 생각했지만, 위와 같이 실행을 시키고서 선언을 해도 올바르게 작동이 된다. 이렇게 실행되는 이유는 코드상의 위치가 컴파일 하였을 때 움직이는 것이 아니다. 이에 대해서 MDN은 확실하게 명시해 주고 있다.

 

'예를 들어, 호이스팅을 변수 및 함수 선언이 물리적으로 작성한 코드의 상단으로 옮겨지는 것으로 가르치지만, 실제로는 그렇지 않습니다. 변수 및 함수 선언은 컴파일 단계에서 메모리에 저장되지만, 코드에서 입력한 위치와 정확히 일치한 곳에 있습니다.' - MDN

 

더 자세히 살펴보자면 이는 Javascript에서의 context execution 작동하는 방식으로 인해 가능한 것이다.

자바스크립트의 실행은 크게 global context execution , function context execution , eval context execution으로 3개가 있는데, 이 중 mdn에서 eval은 권장하지 않는다 하니 배제한다.

 

자바스크립트의 실행 구조는 Stack인데, Stack의 특징은 LIFO(Last in First out)으로 가장 먼저 들어간 것이 마지막에 실행되고, 가장 늦게 들어간 것이 먼저 실행되는 방식이다. 그렇기에, global context execution이 실행되면서 전역에 있는 것들을 입력하고, 그 후 에 function context execution을 실행해 함수가 선언 된 것들을 메모리에 입력하기에 위와 같은 코드들이 실행 할 수 있는 것이다.