호이스팅이란

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.

변수 var와 let으로 비교를 해보자.

console.log(letKeyword)
let letKeyword = 'let is safe'

-> (Error) letKeyword is not defined
에러가 발생하면서 실행이 되지 않는다.

console.log(varKeyword)
var varKeyword = 'var is not safe'

-> undefined
에러가 아닌 undefined만 나오면서 실행이 된다. (원인 파악이 어려워 진다.)

let과 var 두 변수 모두 실행 후 선언 되었는데 결과가 다르게 나온다.

JS에서의 호이스팅

• JS는 실행하기전에 한 번 해석을 하는 과정을 거친다.
• 코드를 전달하기 전에 재배열을 하게 된다. (실제로 재배열을 하는게 아니다.)
• 여기서 변수 선언부만 위로 올려준다. (스코프에 등록 - 메모리 할당)

// 실제로 배치가 바뀌지는 않지만 JS에서는 아래처럼 코드를 해석한다.
var varKeyword;
console.log(varKeyword);
varKeyword = 'var is not safe'

위와 같은 호이스팅으로 var는 존재하지만 undefiend를 가지고 있다는 결과가 나온다. var라는 변수는 존재하며 'vas is not safe'라는 콘텐츠를 보유하고 있음에도 undefiend 값이 호출된다면, 개발자에게 많은 혼란을 줄 수 있다.

선언 순서가 잘 못 됬다면 let 처럼 변수가 정의되지 않았다는 에러가 문제 해결을 더욱 명확히 알려 줄 수 있다.

일시적 사각지대(Temporal Dead Zone / TDZ)

그렇다면 let 변수는 호이스팅이 일어나지 않는다는 것인가?

• 자바스크립트의 모든 선언에는 호이스팅이 일어난다.
• let, const, class를 이용한 선언문은 호이스팅이 일어나지 않은 것 처럼 동작한다.
• 이는 let, const, class로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대로 들어가기 때문이다.

• 즉, var, let, const, class 등 모든 변수는 호이스팅이 일어나고 코드의 위로 끌어올려진 것 처럼 실행 전에 메모리에 할당이 된다.
• 다만, var의 경우에는 메모리에 할당됨과 동시에 undefined 값으로 초기화가 된다. (우선은 undefined 값을 가지게 된다.)
• var, let, const, class는 메모리 할당됨과 동시에 TDZ로 들어간다. 이는 undefined로의 초기화를 막아준다.

변수의 생성 단계

1단계: 선언 단계(Declaration phase)

• 변수를 실행 컨텍스트의 변수 객체에 등록한다.
• 이 변수 객체는 스코프가 참조하는 대상이 된다.

일시적 사각지대 (Temporal Dead Zone)

2단계: 초기화 단계(Initialization phase)

• 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보한다.
• 이 단계에서 변수는 undefined로 초기화 된다.

3단계: 할당 단계(Assignment phase)

• undefined로 초기화된 변수에 실제 값을 할당한다.

함수에서의 호이스팅

// 변수 선언 없이 실행시 실행 함수가 먼저와도 작동한다.
fn1()

function fn1() {
	console.log("Hello")
}
// Hello

변수 var와 같이 함수 메모리 할당 후 초기화로 함수가 작동된다.

// 변수 const로 함수 선언 시 에러가 발생한다.
fn2()

const fn2 =  function() {
    console.log("hello")
}
// fn2 is not defined

변수 const와 같이 함수 메모리 할 당 후 TDZ에 들어가므로 정의되지 않은 함수라는 에러가 호출된다.

참조 : 하나몬블로그

참조 : 훈훈한 Javascript