JavaScript 호이스팅이란?

호이스팅이란?

자바스크립트에서 호이스팅이란 코드 실행 전 함수 선언부와 변수 선언부를 최상단의 스코프에 끌어올려지는 것을 의미한다. 이렇게 하면 변수와 함수가 선언된 위치에 상관없이 사용 할 수 있다는 장점이 있다.

예를 들어,

console.log(x)
var x = 10

// undefined

이 코드의 결과값은 undefined이다. 그 이유는 자바스크립트의 호이스팅에 의하여

var x // 호이스팅 되어서 맨 위로 이동함.
console.log(x)
x = 10

이렇게 해석하기 때문이다.

즉, var x의 변수가 호이스팅 되어 선언되어지지만 값이 할당 되어지지 않았기 때문에 undefinded의 결과 값이 나오는 것이다.

함수 선언도 마찬가지로,

foo()

function foo(){
	console.log("hello")
}

// "hello"

이 코드의 결과값은 "hello"이다.

함수 역시 호이스팅에 의하여

function foo() {
	console.log("hello")
} // 호이스팅이 되어 최상단으로 올라감.

foo()

// "hello"

이렇게 해석하기 때문이다.

하지만, 변수의 선언과, 함수의 선언만 호이스팅이 가능하며, 함수 표현식은 변수로 인식되어 호이스팅이 되어지지 않는다.

예시)

foo()

var foo = () =>{
	console.log("hello")
}

// TypeError: foo is not a function

let 과 const는 호이스팅이 발생하지 않는 것처럼 보이지만, let과 const는 블록 범위 스코프이므로 변수가 선언되기 전까지는 존재하지 않으며, 변수가 선언되기 전 접근하게 되면 참조 오류가 발생하면서 이른바 TDZ(Temporal Dead Zone)에 들어가기 때문에 참조 오류가 발생한다.