[JavaScript] Hoisting(호이스팅)

 

다른 언어에는 잘 없는 개념인데 JavaScript에는 존재하는 개념이다.

 

Hoisting(호이스팅)

함수와 변수 선언문이 코드의 최상단으로 끌어올려지는 것처럼 느껴지는 현상

 

여기서 중요한 것은 그렇게 느껴지기만 한다는 것 = 실제로는 그렇지 않다는 것

 

이 현상은 JavaScript 코드 실행 방식에 관련이 있는 것으로 코드가 실행되기 전에

 

변수와 함수의 선언이 미리 처리되기 때문에 발생한다.

 

변수 Hoisting

변수 var

입력:

console.log(name);
var name = '파삭';
console.log(name);

 

출력:

undefined
파삭

 

분명 name이 아직 선언되지 않은 상태인데 오류가 발생하지 않고 undefined라는 값이 출력됨.

 

변수 let, const

입력:

console.log(name2);
let name2 = '파삭이';

 

출력:

ReferenceError: Cannot access 'name2' before initialization

 

에러가 발생하지만 여기서 중요한 것은 name2라는 변수를 인식하고 있다는 것.

그 이유가 변수 호이스팅 때문이다.

 

만약 아예 변수 선언이 없다면 아래와 같은 에러메시지가 출력된다.

 

입력:

console.log(name2);

 

출력:

ReferenceError: name2 is not defined

 

const의 경우에도 동일하다.

 

즉, let, const에 대해서도 호이스팅이 발생하긴 한다. 하지만 TDZ(Time Dead Zone: 변수 선언 시점부터 블록의 시작 지점까지 변수를 참조할 수 없는 구역)에 의해 ReferenceError가 발생한다.

 

이러한 에러 발생이 var을 사용하지 않고 let과 const를 사용하게된 많은 이유중 하나이다.

 

함수 Hoisting

입력:

console.log(hello());
function hello() {
    return "Hello, world!";
}

 

출력:

Hello, world!

 

함수 호이스팅이 발생하여 선언된 함수가 함수 호출문보다 뒤에 등장하는데도 오류없이 호출이 가능하다.

 

 

요약

 

• 변수 호이스팅: var는 선언이 호이스팅되며, 초기화는 끌어올려지지 않는다. let과 const는 선언이 호이스팅되지만 TDZ로 인해 초기화 전에 접근할 수 없다.
• 함수 호이스팅: 함수 선언문은 전체 함수가 호이스팅되므로 선언 전에 호출할 수 있다. 함수 표현식은 변수 호이스팅과 동일한 규칙을 따른다.