[JS] 호이스팅 이해하기 - 기본편

건설 현장 주변을 지나다 보면 이런 괴상한 엘리베이터를 쉽게 볼 수 있다.

건설 현장에선 이 엘리베이터를 호이스트라고 부르는데 자바스크립트에서의 호이스팅 개념은 이와 유사하다.

호이스팅은 자바스크립트에서 발생하는 기이한(?) 현상 중 하나이다.

처음 호이스팅을 공부했을 때, 변수와 함수 선언이 물리적으로 코드의 상단으로 이동하여 작동한다고 이해했었다.

하지만 이는 잘못된 개념이었다.

MDN 공식문서에는 다음과 같이 호이스팅을 설명하고 있다.

변수 및 함수 선언은 컴파일 단계에서 메모리에 저장되지만, 코드에서 입력한 위치와 정확히 일치한 곳에 있습니다.

• 함수 호이스팅

// 1
function catName(name) {
  console.log("My cat's name is " + name);
}

catName("Tigger");
/*
위 코드의 결과는: "My cat's name is Tigger"
*/

// 2
catName("Chloe");

function catName(name) {
  console.log("My cat's name is " + name);
}
/*
위 코드의 결과는: "My cat's name is Chloe"
*/

2번의 예제에서 함수의 호이스팅이 발생한 경우이다.

함수를 선언하기 전에 함수를 먼저 실행시켜 오류가 발생할 것 같지만

함수 실행 코드를 실행하기 전에 함수 선언을 메모리에 저장하기 때문에 오류가 발생하지 않는다.

• 변수 호이스팅

num = 6;
num + 7;
var num;
/* num이 선언되지 않더라도 에러를 내지 않습니다 */

var x = 1; // x 초기화
console.log(x + " " + y); // '1 undefined'
var y = 2;


// 아래 코드는 이전 코드와 같은 방식으로 동작합니다.
var x = 1; // Initialize x
var y; // Declare y
console.log(x + " " + y); // '1 undefined'
y = 2; // Initialize y

변수에서의 호이스팅에서는

변수를 선언하기 전에 초기화해서 사용할 수 있고 초기화 없이는 사용할 수 없다.

변수에서 호이스팅은 초기화를 하냐 안하냐가 중요한듯 하다.

명확하게 초기화라는게 이해가 잘 되지는 않지만, 예제를 참고해보면 변수를 사용하는 실행 지점(컨텍스트)과 연관이 있다고 생각된다.