호이스팅

이번에는 호이스팅에 대해서 알아보도록 하겠습니다!

 

호이스팅(Hoisting)이란?

흔히들 호이스팅은 코드를 실행하기 전 변수와 함수의 선언을 최상단으로 올린다고 정의하지만

이런 간단한 정의보다는 좀 더 정확하게 이해할 필요가 있습니다.

=> 코드를 실행하기 전에 자바스크립트 엔진은 먼저 코드에서 실행 컨텍스트를 위해 메모리를 미리 설정하는 행위가 더 정확한 정의라고 생각합니다.

※실행 컨텍스트란 실행할 코드에 제공할 환경 정보를 담은 객체

 

크게 변수 선언과 함수 선언으로 나누어 볼 수 있습니다.

변수 선언

• var, let, const 모두 호이스팅이 발생한다.
• 하지만 var / let, const는 내부 동작이 다릅니다.
  - var : 변수 선언과 초기화가 함께 진행됩니다. 여기서 초기화는 undefined로 초기화됩니다.
  - let, const : 변수 선언은 이루어지지만 초기화가 이루어지지 않습니다.

console.log(a);
console.log(b);
console.log(c);

var a = "a"; // undefined
let b = "b"; // ReferenceError: Cannot access 'b' before initialization
const c = "c";

a는 var 선언으로 인해 선언 + 초기화(undefined)가 되어서 undefined가 출력되지만,

b는 let 선언으로 인해 선언만 진행되어서 초기화되지 않은 상태로 메모리에 저장이 되어 참조 에러가 발생합니다(ReferenceError)

 

다른 예제도 확인해 보겠습니다.

console.log(name); // undefined
name = "Duchi";
var name;
console.log(name); // Duchi

첫 번째 줄에서는 3번째 줄의 코드로 인해 naem 변수가 호이스팅 되어 선언 + 초기화된 상태라서 undefined가 출력되었고,

네 번째 줄에서는 2번째 줄에서 'Duchi'라는 값이 할당되었기 때문에 Duchi 가 출력되었습니다.

 

 

함수 선언

함수는 전체 함수에 대한 참조와 함께 저장됩니다.

자바스크립트에서 함수를 선언하는 방법은 함수 선언식 / 함수 표현식이 있습니다.

 

함수 선언식은 호이스팅의 영향을 받지만, 함수 표현식은 호이스팅의 영향을 받지 않습니다.

console.log(sum(2, 3));// 5

function sum(x, y) {
  return x + y;
}

console.log(minus(5, 1)); //ReferenceError: Cannot access 'minus' before initialization

const minus = function (x, y) {
  return x - y;
};

함수 선언식으로 생성된 sum 함수는 실행이 정상적으로 되지만, 함수 표현식으로 생성된 minus 함수는 참조 에러가 발생합니다.