[면접] 호이스팅(Hoistin)에 대해 설명해보세요.

0. 개요

---

호이스팅에서 대해서 가끔씩 들어봤는데 정확한 설명을 할 수 없어서 이렇게 블로그 글로 작성하게 되었습니다.

 

1. 호이스팅(hoisting)이란

---

hoisting이라는 단어의 뜻을 보면 "끌어올리기, 들어 올려 나르기."라는 뜻을 가지고 있습니다. 

 

그렇다면 자바스크립트에서 무엇을 끌어올리냐면 변수와 함수 선언을 끌어올립니다. 변수와 함수 선언을 물리적으로 코드의 상단으로 이동시키는 것이 아니라, 컴파일 단계에서 메모리에 저장하는 JavaScript의 기본적인 동작 방식을 의미합니다. 이로 인해, 코드 상에서 하단에 위치한 변수나 함수를 상단에서 참조할 수 있게 됩니다.

 

2. 호이스팅의 작동 방식

---

자바스크립트는 코드 실행 전에 컴파일 단계를 거치는데, 이 때 변수와 함수 선언을 먼저 처리합니다. 이는 코드의 실행 단계에서 선언문이 실제로 작성된 위치와 상관없이, 변수와 함수를 사용할 수 있게 만듭니다.

컴파일 단계
고급 프로그래밍 언어로 작성된 소스 코드를 컴퓨터가 이해할 수 있는 기계어나 중간 코드로 변환하는 과정을 말합니다.

 

3. 변수와 함수 호이스팅

---

1) 변수 호이스팅

var 키워드로 선언된 변수는 호이스팅 되어 초기화 단계에서 undefined로 설정됩니다. 반면, let과 const로 선언된 변수는 호이스팅은 되지만, 초기화되지 않아 접근 시 오류가 발생할 수 있습니다. 이를 "일시적 사각지대(Temporal Dead Zone, TDZ)"라고 합니다.

 

var 변수 호이스팅 예시

console.log(x); // undefined
var x = 5;
console.log(x); // 5

 

위의 코드에서 첫 번째 console.log(x)는 undefined를 출력합니다.

이는 var로 선언된 변수 x가 호이스팅되어 코드의 상단에 선언되지만, 초기화 단계에서 undefined로 설정됩니다. 따라서, 선언 전에 접근하면 undefined 값을 얻게 됩니다.

 

let과 const의 호이스팅 예시

console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 3;

let으로 선언된 변수 y에 접근하려고 하면, 호이스팅은 되지만 TDZ에 의해 초기화 전에는 접근할 수 없어 ReferenceError가 발생합니다. const도 같은 방식으로 동작합니다.

 

2) 함수 호이스팅

함수 선언식은 호이스팅 되어 코드의 어느 위치에서든지 호출이 가능하지만, 함수 표현식은 변수 호이스팅의 규칙을 따릅니다.

 

함수 선언식

hoistedFunction(); // 'This function has been hoisted.'

function hoistedFunction() {
  console.log('This function has been hoisted.');
}

함수 선언식으로 정의된 hoistedFunction은 코드의 어느 곳에서든 호출할 수 있습니다. 이는 함수 선언이 호이스팅되어 코드의 최상단으로 끌어올려지기 때문입니다. 따라서, 실제로 함수가 정의된 위치보다 먼저 호출해도 문제없이 작동합니다.

 

var 함수 표현식

console.log(typeof myFunction); // "undefined"

myFunction(); // TypeError: myFunction is not a function

var myFunction = function() {
  console.log("Hello, World!");
};

위의 예시에서 myFunction 호출 시점에서는 아직 함수로 초기화되지 않았기 때문에, TypeError가 발생합니다. typeof myFunction은 undefined를 반환합니다, 왜냐하면 myFunction은 호이스팅되어 있지만, 아직 함수로 할당되기 전이기 때문입니다.

 

let const 함수 표현식

let 또는 const로 선언된 함수 표현식은 호이스팅 되지만,var와 달리 "임시적 사각지대(Temporal Dead Zone, TDZ)"에 빠지게 됩니다. 이는 선언 전에 접근하려고 하면 ReferenceError를 발생시킵니다.

console.log(typeof myFunction); // ReferenceError: Cannot access 'myFunction' before initialization

let myFunction = function() {
  console.log("Hello, World!");
};

이 경우, myFunction을 선언하기 전에 접근하려고 하면, JavaScript 엔진이 변수의 존재를 알고 있음에도 불구하고, TDZ 때문에 ReferenceError를 발생시킵니다. 이는 let과 const가 var보다 엄격하게 스코프를 관리하며, 초기화 전에 변수에 접근하는 것을 방지하기 위함입니다.

 

4. 면접 답변

자바스크립트에서 호이스팅은 변수와 함수를 컴파일과정에서 최상단으로 끌어올려서 먼저 처리합니다. var를 사용하면 초기화단계에서 undefined로 처리하고 let, const를 사용하면 초기화되지 않아 TDZ로 에러를 일으킵니다. 함수는 선언식은 호이스팅되지 않고 표현식은 변수와 같이 호이스팅이 됩니다.