[Javascript] Hoisting

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다. -MDN

Hoisting은 설명보단 예제로 이해하는것이 좋다.

Var

console.log(a)  // undefined

var a = 5

console.log(a). // 5

var로 a를 선언하고 초기값으로 5를 할당 하였을 때
Hoisting 시 값이 초기화 된다는 것을 알 수 있다.

console.log(a) // undefined

a = 3 

console.log(a)  // 3

var a = 5

console.log(a)  // 5

a = 7

console.log(a)  // 7

Hoisting 후 변수에 값을 어디에서 재할당 하느냐에 따라 값이 달라진다.

console.log(a)  // Error
console.log(b)  // Error

let a
const b

var와는 다르게 let,const는 Hoisting이 적용되지 않는다.

Function

test()  // "hello"

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

함수에도 Hoisting이 적용된다.

test()  // Error

test = function() {
	console.log("hello")
}

함수 표현은 Hoisting이 적용되지 않으므로 사용 시에 주의해야한다.