[Javascript] 호이스팅이란

Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다.

 

https://medium.com/better-programming/magic-of-hoisting-3fec34978fd8

 

 

Q. Explain "Hoisting"

 

 

A.

 

호이스팅을 간단하게 정의하자면, 자바스크립트가 코드를 컴파일하는 과정에서 코드 내의 선언문들을 찾아서 해당 선언문들이 속한 스코프의 최상단으로 스코프를 끌어올리는 것을 의미합니다. (값을 할당하는 것이 아닌 선언만 끌어올림.) 호이스팅이 제대로 동작하기 때문에 다음과 같은 코드가 오류를 발생시키지 않고 동작합니다.

 

console.log(hoist); // undefined
var hoist = 'hello';
console.log(hoist); // hello

 

 

위의 예제는 다음과 같이 컴파일되기 때문에 오류를 일으키지 않고 실행될 수 있습니다.

var hoist; // undefined
console.log(hoist);
hoist = 'hello'; // hello
console.log(hoist);

 

자바스크립트에서 호이스팅이 일어나는 자세한 원리는 실행 컨텍스트와 관련이 있습니다. 자바스크립트에서 코드가 실행되는 시점은 해당 스코프의 실행 컨텍스트가 생성된 이후이며, 실행될 때 변수 및 함수가 참조하는 여러 값들은 이 실행 컨텍스트에 정의된 스코프를 따릅니다.

 

 

전역 컨텍스트든, 함수 컨텍스트든 실행 컨텍스트가 생성이 될 때는 반드시 다음과 같은 순서로 생성됩니다. 

 

1. 스코프 체인의 생성과 초기화
2. Variable instantiation (변수 객체화)
3. this 결정

 

호이스팅은 바로 2번째 단계인 변수 객체화의 과정에서 일어납니다.

변수 객체화를 진행할 때, 해당 컨텍스트가 함수 컨텍스트인 경우 매개변수(parameter)가 Variable Object(이하 VO)의 프로퍼티로 인수(argument)가 값으로 설정됩니다. 

 

 

그 다음에 함수 선언식(함수 표현식은 제외됩니다.)을 대상으로 함수명이 VO의 프로퍼티로, 생성된 함수 객체가 값으로 설정됩니다. (함수 선언식으로 작성된 함수의 실행이 함수 선언식보다 위에 있어도 에러를 내뿜지 않는 이유가 여기에 있습니다.) 이 부분을 함수 호이스팅(function hoisting)이라 합니다.

 

 

그 다음에 변수 선언들을 대상으로 변수명이 VO의 프로퍼티로, undefined가 값으로 설정됩니다. 이를 변수 호이스팅이라 합니다.

 

 

정리하자면, 함수 호이스팅은 자바스크립트가 실행컨텍스트를 만드는 과정에서 변수 및 함수 선언을 해당 스코프의 최상단으로 끌어올리는 것을 의미하며, 이러한 성질 때문에 초기화 전에 해당 식을 호출하거나 변수 값을 사용해도 에러는 나지 않습니다. 하지만 의도한 동작이 일어나지 않을 수 있으므로 선언 이전에 어떤 값에 접근하려 할때는 명확한 기준 하에 접근해야 합니다.

 

 

 

Reference

developer.mozilla.org/ko/docs/Glossary/Hoisting

Hoisting