Hoisting

turnaroundwoo·2023년 3월 10일

11st Blogs

목록 보기

46/52

Hoisting(호이스팅) 은 코드를 실행하기 전에 선언된 변수 및 함수를 해당 범위의 맨 위로 이동하는 JavaScript의 메커니즘입니다. 다시 말해서, 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것인데요.

일반적으로 선언되지 않은 변수를 접근할 수 없습니다. 마찬가지로, JavaScript에서도 선언되지 않은 변수를 접근할 수 없으며, 선언되지 않은 변수를 접근하면 ReferenceError가 발생합니다.

하지만, JavaScript는 다음 예제처럼 나중에 선언되는 변수를 미리 접근할 수 있습니다.

console.log(value); // undefined

var value = 'Hello'

console.log(value); // Hello

ReferenceError는 발생하지 않으나, JavaScript는 호이스팅 된 변수를 📌undefined로 초기화하게 됩니다.
또한, JavaScript는 변수뿐만 아니라 함수도 호이스팅할 수 있습니다.

다음 예제는 함수가 선언되기 전에 함수를 호출합니다.

show(); // show() Call!

function show() {
  console.log('show() Call!');
}

show(); // show() Call!

변수와 마찬가지로 함수도 해당 범위의 맨 위로 호이스팅됩니다.