[Interview] Hoisting에 대해서 설명해주세요

Hoisting : 끌어올리다

● Javascript 엔진이 코드 실행 전에 변수와 함수의 선언을 해당 스코프의 최상단으로
   끌어올리는 내부 동작입니다.

  - 코드 내에서 실제 선언 위치와 관계없이, 변수와 함수 선언은 코드 실행 전에 이미 메모리에

    등록되어 있기 때문에, 선언 이후나 이전에 참조가 가능해 보이는 효과를 줍니다.

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

  - 위의 순서로 변수 x를 선언한다면, 호이스팅되지만, x에 할당한 5는 호이스팅되지 않기 때문에
    첫 번째 console.log에서는 undefined로 출력됩니다.

 

● 함수선언문 Hoisiting의 경우

var num;            // 변수 선언이 최상단으로 호이스팅됨
console.log(num);   // 아직 초기화되지 않아 undefined 출력
num = 10;           // 변수에 값 할당
console.log(num);   // 이제 10 출력

  - 일반적으로는 변수만 선언하고 값을 안 넣는다면 undefined로 출력됩니다.

 

sayHi(); // "안녕하세요!" 출력

function sayHi() {
  console.log("안녕하세요!");
}

 - 함수선언문은 'Hoisiting' 함수 선언이 코드의 최상단에 위치한 것처럼 동작하기 때문에

   실제 선언이 코드 중간에 있더라도 호출 전에 사용할 수 있습니다.

 

● 함수 표현식 Hoisiting의 경우

greet(); // 오류 발생: greet is not a function

var greet = function() {
  console.log("Hi there!");
};

  - 위의 코드처럼 함수 표현식을 함수선언문과 동일하게 사용할 경우 위와 같은 에러가 발생합니다.

  - 즉, 함수 표현식 Hoisiting은 변수 호이스팅과 유사하게 동작합니다.

 

● let, const Hoisitng의 경우

  - let, const도 초기화되지 않은 상태는 마찬가지이지만, '일시적 사각지대(Temporal Dead Zone)'이

   있어서 선언 전에 접근하려고 하면 ReferenceError가 발생합니다.

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

 

● 코드를 작성할 때 유의해야할 것들은...

   - Hoisiting 개념을 완전히 이해하지 않고 코드를 작성한다면, 변수나 함수의 선언 위치와 실제 동작에서
     혼란이 생길 수 있습니다.

   - 그렇기 때문에 변수 선언은 항상 스코프의 최상단 또는 코드 시작 부분에 배치해야합니다.

   - 변수와 함수의 선언은 Hoisiting 되지만, 그에 할당된 값이나 함수 표현식은
     원래 정의된 위치에 남아 있기에 유의해야합니다.

 

Hoisiting 정리

A :
 Hoisiting은 Javascript에서 코드를 실행하기 전에 변수와 함수 선언을 스코프 최상단으로 끌어 올리는
내부 동작으로, 코드 작성 시 선언 순서와 무관하게 작동합니다. 변수 초기화나 함수 표현식은
Hoisiting 되지 않기 때문에 변수가 어디서 실행되고 어디에 적절하게 배치해야할지 염두해두어야 합니다.