호이스팅(hoisting)
JS에서 호이스팅이란 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것입니다.
여기서 인터프리터(interpreter)란 변수와 함수를 번역(해석)하는 프로그램 입니다. (이 글에서는 호이스팅을 다루기 때문에 이 개념에 대해 길게 다루지는 않겠습니다.)
호이스팅 시
var로 선언한 변수의 경우에는 undefined로 변수를 초기화 해줍니다.
반면에 let과 const로 선언한 변수의 경우 변수를 초기화하지 않습니다.
선언과 초기화란?
그래서 호이스팅이란?
변수의 선언과 초기화를 분리한 후에 그 '선언'만 인터프리터가 미리 할당한 메모리 공간인 최상단으로 옮긴것 입니다.
따라서 사용하는 코드는 변수 코드보다 앞서 등장할 수 있습니다. 예를 들어 console.log(num)이 var num 보다 앞서 등장할 수 있습니다. 그리고 undefined가 뜨겠죠.
다만 선언과 초기화를 함께 수행하는 경우에는 이 선언 코드까지 실행되야 변수가 초기화된 상태가 됩니다. (아래에 설명이 있습니다.)
기술 예제
JS는 함수의 코드를 실행하기 전에 함수 선언에 대한 메모리부터 할당합니다. 덕분에 함수를 호출하는 코드를 함수 선언보다 앞서 배치할 수 있습니다. 즉 함수를 선언하기 전에 먼저 호출했을 때,
catName("클로이");
function catName(name) {
console.log("제 고양이의 이름은 " + name + "입니다");
}
/*
결과: "제 고양이의 이름은 클로이입니다"
*/함수 호출이 함수 자체보다 앞서 존재하지만, 그럼에도 불구하고 이 코드 역시 동작합니다. 이것이 JS에서 실행 맥락(execution context)이 동작하는 방식입니다.
선언만 호이스팅 대상
JS는 초기화를 제외한 선언만 호이스팅합니다. 변수를 먼저 사용하고 그 후에 선언 및 초기화가 나타나면, 사용하는 시점의 변수는 기본 초기화 상태(var 선언 시 undefined, 그 외에는 초기화하지 않음)입니다. 예를 들어,
console.log(num); // 호이스팅한 var 선언으로 인해 undefined 출력
var num; // 선언
num = 6; // 초기화
반면, 다음 예제는 선언 없이 초기화만 존재합니다. 따라서 호이스팅도 없고, 변수를 읽으려는 시도에서는 ReferenceError 예외가 발생합니다.
console.log(num); // ReferenceError
num = 6; // 초기화다음은 호이스팅을 보이는 예제 입니다.
// 예제 1
// y만 호이스팅 대상
x = 1; // x 초기화. x를 선언하지 않은 경우 선언. 그러나 명령문에 var가 없으므로 호이스팅이 발생하지 않음
console.log(x + " " + y); // '1 undefined'
// JavaScript는 선언만 호이스팅하므로, 윗줄의 y는 undefined
var y = 2; // y를 선언하고 초기화다음은 JS의 호이스팅에 대한 실행맥락 이해를 돕기 위한 예제입니다.
// 예제 2
// 호이스팅은 없지만, 변수 초기화는 (아직 하지 않은 경우) 변수 선언까지 병행하므로 변수를 사용할 수 있음
a = '크랜'; // a 초기화
b = '베리'; // b 초기화
console.log(a + "" + b); // '크랜베리'let과 const 호이스팅
let과 const로 선언한 변수도 호이스팅 대상이지만, var와 달리 호이스팅 시 undefined로 변수를 초기화하지는 않습니다. 따라서 변수의 초기화를 수행하기 전에 읽는 코드가 먼저 나타나면 예외가 발생합니다.
출처:
https://developer.mozilla.org/ko/docs/Glossary/Hoisting
https://hanamon.kr/javascript-%ed%98%b8%ec%9d%b4%ec%8a%a4%ed%8c%85%ec%9d%b4%eb%9e%80-hoisting/#respond
