호이스팅 (Hoisting)

🍫 호이스팅(Hoisting)이란?

• 호이스팅은 모든 선언(var, let, const, function 등)을 가장 위로 끌어올린다.

호이스팅을 이해하는 가장 직관적인 설명이지만, 엄격하게는 그렇지 않다.

참고 포스팅
자바스크립트 엔진에서 스크립트를 가져오면, 가장 먼저 코드에서 데이터를 위한 메모리를 설정한다.
이 시점에는 코드가 실행되지는 않고 실행을 하기 위한 준비단계이다.

함수와 변수가 메모리에 저장되는 방식은 다르다.

• 함수는 전체 함수에 대한 참조와 함께 저장된다.
• 변수의 경우 let과 const는 초기화 되지 않은 채로 저장이 된다.
• var는 undefined로 저장이 된다.

1. 함수의 경우

console.log(sum(1,3)); // 4

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

console.log가 정의된 sum 함수보다 위에 적혔는데, 함수의 결괏값을 정상적으로 출력한다.
이는 함수는 전체 함수에 대한 참조와 함께 메모리에 저장되므로
함수를 만든 라인 이전에도 호출이 가능한 것이다.

2. let, const 의 경우

console.log(a); // ReferenceError
console.log(b); // ReferenceError

const a = 1;
let b = 2;

const와 let은 초기화되지 않은 상태로 메모리에 저장되기 때문에
초기화 전에 변수를 참조할 수 없다는 ReferenceError가 발생한다.

3. var 의 경우

console.log(c); // undefined

var c = 3;

var는 초기화 된 형태로 메모리에 저장되기 때문에 undefined 가 찍힌다.
초기화는 쉽게는 '선언'은 되었다는 의미이다.

'선언' 시점과는 다르게
코드가 한줄씩 차례대로 실행되면서 해당 변수가 선언된 라인을 통과하는 순간 비로소,
값이 '할당'된다.

🍫 호이스팅을 알아둬야 하는 이유

• 호이스팅에 의해서 발생하는 사이드이펙트(부작용)를 방지하기 위해서 최소한의 매커니즘을 이해하고 있어야 한다.
• 이런 사이드 이펙트를 미리 방지하기 위해서는 변수를 스코프 최상단에 선언하는게 적절할 듯 하다.