호이스팅

keemsebeen·2024년 4월 22일

호이스팅

자바스크립트 및 기본 지식

목록 보기

4/7

호이스팅이란?

변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 호이스팅이라고 한다.

var, let, const, function, class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅이 된다.

var

console.log(score); // undefined

var score;

변수 선언문보다 변수를 참조하는 코드가 앞에 있어 ReferenceError가 발생해야 하지만 undefined가 출력된다. 이는 변수 선언(선언+초기화)이 소스코드가 실행되는 런타임 이전에 먼저 실행된다는 증거이다.

let, const, class

let foo = 1; // 전역 변수

{
	console.log(foo); // ReferenceError : Cannot acess 'foo' before initailization
	let foo = 2; // 지역 변수
}

const Person = '';

{
	console.log(Person);
	// ReferenceError : Cannot acess 'Person' before initailization
	class Person {}
}

let 키워드는 선언 단계와 초기화 단계가 분리되어 진행된다. 자바스크립트 엔진에 의해 암묵적으로 선언 단계가 먼저 실행되지만 초기화 단계는 변수 선언문에 도달했을 때 실행된다. (const 키워드는 선언 단계와 초기화 단계가 동시에 진행된다.)

let, const, class가 호이스팅이 발생하지 않는 거 처럼 느껴지는 이유는 일시적 사각지대 때문이다.
초기화 단계 시작 지점까지 변수를 참조할 수 없으며, 초기화 단계가 실행되기 이전에 변수에 접근하려고 하면 참조 에러가 발생한다. 이를 일시적 사각지대라고 부른다.

function

console.dir(add); // add(x,y)
console.dir(sub); // undefined

console.log(add(2,5)); // 7
console.log(sub(2,5)); // TypeError: sub is not a function

// 함수 선언문
function add(x, y){
	return x+y;
}

// 함수 표현식
var sub = function (x, y){
	return x - y;
}