호이스팅 (hoisting)

자바스크립트에서 중요한 개념 중 하나가 "호이스팅"이라고 생각한다.

 

호이스팅을 이해해야지 코드의 동작을 더 정확하게 파악할 수 있고, 예상 외 동작을 방지할 수 있다.

그래서 오늘은 호이스팅에 대해 자세하게 공부해보려고 한다.

 

 

호이스팅이란?

변수 및 함수의 선언문이 스코프 내의 최상단으로 끌어올려지는 현상

(대입문이 아닌 선언문이 끌어올려진다는 것을 기억할 것!)

 

위에 내용을 이해하기 위해서는 자바스크립트 엔진의 실행 과정을 알아야 한다.

JS 엔진은 코드 실행 전 실행 가능한 코드를 형상화 및 구분하는 과정(실행 컨텍스트를 위한 과정)을 거치는데,

이 과정에서 모든 선언 (var, let, const, function, class)를 스코프에 등록한다.

이로 인해 이미 코드 실행 전 변수 및 함수 선언이 저장되어 호출문이 선언문보다 일찍 나와도 오류가 발생하지 않는다.

 

하지만 선언 방식에 따라 차이점이 존재한다.

 

var

호이스팅 발생

 

let, const

블록 스코프를 지키기 때문에 호이틍이 발생하긴 하지만, 선언 전 접근 시 ReferenceError 발생

 

function

함수 선언문은 호이스팅 되지만, 함수 표현식은 호이스팅 되지 않음.

test();

// 함수 선언
function test() {
	// 생략
}

// 함수 표현
var test = function() {
	// 생략
}

 

class

function과 동일하게 선언문은 호이스팅 되지만, 표현식은 안됨.

const test = new Test();

// 선언
class Test {
	// 생략
}

// 표현
var Test = class {
	// 생략
}