자바스크립트 호이스팅 매우 간단히 정리

정의

자바스크립트 호이스팅은 인터프리터가 코드 실행 전 함수, 변수, 클래스 선언 등을 스코프의 맨 위로 올리는 프로세스를 말한다.

호이스팅은 코드가 선언되기 전 함수가 안전하게 사용될 수 있게 한다.

변수와 클래스 선언 또한 호이스팅된다. 그래서 선언 전에도 참조될 수 있다. 그러나 그런식으로 코드를 작성하는 것은 권장하지 않고, 예상치 못한 에러를 낼 수 있다.

에러를 예방하고 싶다면, 자바스크립트는 선언만 호이스팅하고 초기화는 호이스팅하지 않는다는 것을 기억해야 한다.

let, const 를 포함한 ECMAScript 2015 언어 명세 이전에는 호이스팅이 Javascript 의 실행 컨텍스트에서 동작방식을 표현하는 일반적인 방법이었다.

함수 호이스팅 예제

catName("Tiger");

function catName(name) {
  console.log("My cat's name is " + name);
}
/*
The result of the code above is: "My cat's name is Tiger"
*/

함수는 정의보다 호출이 먼저 되었음에도 멀쩡히 동작한다.

변수 호이스팅

변수를 호이스팅할 때도 선언만 호이스팅하고, 초기화 과정(initialization)은 호이스팅하지 않는다.

var 호이스팅

console.log(num); // Returns 'undefined' from hoisted var declaration (not 6)
var num = 6; // Initialization
console.log(num); // Returns 6 after the line with initialization is executed.

• 호이스팅 되어 console.log(num) 에서 num 이 정의되지 않았다는 에러는 나지 않는다.
• 처음엔 선언부만 호이스팅되고 초기화 부분은 호이스팅되지 않아서 undefined 가 출력된다.

let, const 호이스팅

console.log(num); // Throws ReferenceError exception as the variable value is uninitialized
let num = 6; // Initialization

• let, const 도 호이스팅의 대상이지만, var 처럼 초기 기본값으로 undefined 를 넣어주지 않는다.
• 초기화 전에 사용하려 하면, ReferenceError 가 발생한다.

참고로 소스코드가 실행되는 순서 가 중요한 것이지 소스코드가 위치한 순서 가 중요한 것이 아니다. 초기화 부분이 나중에 위치하더라도, 실행 순서 상 먼저 실행된다면 코드는 정상적으로 실행될 것이다.

class 호이스팅

클래스 선언 은 호이스팅 되지만, 초기화 과정은 호이스팅되지 않아 참조만 되고 new 를 통한 생성은 불가능하다. 변수와 동일하게 ReferenceError 가 발생한다.

함수 표현식 (Function Expressions) 과 클래스 표현식 (Class Expression) 호이스팅

함수 표현식 과 클래스 표현식 은 호이스팅되지 않는다.

함수 표현식이나 클래스 표현식도 결국 변수처럼 작동하는 것이기에 따로 나눠 어렵게 생각할 필요는 없다.

레퍼런스

https://developer.mozilla.org/en-US/docs/Glossary/Hoisting