프론트엔드 개발자 면접 단골 질문 8 | 자바스크립트 호이스팅

원하시는 기업에 꼭 합격하시길 기원하겠습니다 :)
면접 연습에 스크립트가 필요하신 분들은 아래를 참고해주세요.

00:00 호이스팅이란 무엇인지 설명해주세요

호이스팅이란, 변수와 함수의 선언문이 해당 스코프의 최상단으로 끌어올려지는 현상을 의미합니다. 이러한 현상으로 변수와 함수가 초기화되기 전에 접근할 수 있는 현상이 발생합니다. 단, ES6에서 등장한 방식인 let과 const로 선언한 변수들은 호이스팅은 되지만, 초기화 전에 접근할 수는 없습니다.

00:28 변수와 함수 모두 호이스팅이 동일하게 동작하나요?

아닙니다. 변수는 선언만 호이스팅 되지만, 함수는 선언과 초기화 모두 호이스팅됩니다. 이러한 특성으로 인해, 변수는 초기화 전에 참조할 경우, undefined가 나오지만, 함수는 초기화 전에 호출해도 정상적으로 호출이 가능합니다.

00:48 왜 변수와 달리, 함수만 초기화 과정까지 호이스팅 되나요?

function 키워드로 선언한 함수는 선언과 초기화, 할당 단계가 내부적으로 동시에 진행되기 때문입니다. 반면, 변수는 선언과 초기화를 한 구문으로 코딩했어도, 내부적으로는 두 단계에 걸쳐서 실행됩니다.

01:09 왜 let과 const으로 선언한 변수는 초기화 전에 접근할 수 없도록 막아 놓았나요?

호이스팅 현상으로 인해, 초기화되지 않은 변수를 개발자가 참조할 수 없도록 하기 위해서입니다. 즉, 코드의 예측 가능성을 높이기 위해 Temporal Dead Zone (TDZ) 이라는 개념을 도입한 것입니다. 또한, 자바스크립트의 창시자인 브랜든 아이크에 따르면, 호이스팅 현상은 자바스크립트 개발 과정에서 실수로 생긴, 일종의 버그이기 때문에, 이를 ES6 버전에서 해결한 것으로 보입니다.

01:40 자바스크립트는 인터프리터 언어인데, 어떻게 호이스팅 현상이 일어날 수 있는건가요?

일반적으로 알고 있는 인터프리터의 개념과는 달리, 자바스크립트 엔진은 코드 실행을 위해 파싱과 실행이라는 두 단계를 거치게 됩니다. 호이스팅이 처리되는 파싱 단계에서는 호이스팅 뿐만 아니라, 구문 트리와 실행 컨텍스트를 생성하는 작업도 함께 수행됩니다.