[JavaScript] 호이스팅(Hoisting)

jwp9633·2022년 6월 24일

목록 보기

2/28

1. 호이스팅(Hoisting)이란

호이스팅은 런타임 시 변수와 함수의 선언 전에 메모리 공간을 미리 할당하는 것이다.

즉, 변수와 함수의 선언과 할당을 분리한 후, 선언만 코드의 최상단으로 옮기는 것이다.

var로 선언한 변수는 호이스팅 되어 undefined로 변수를 초기화(할당)한다.
반면, let과 const로 선언한 변수는 호이스팅 되지만, 변수를 undefined로 초기화(할당)하지 않는다.

함수 선언식으로 작성하면 호이스팅 되어 어느 위치에서도 함수를 호출할 수 있다.

var 선언문과 함수 선언식으로 인한 호이스팅은 예상치 못한 오류를 발생시킬 수 있으므로, 일반적으로 권장되지 않는다.

console.log(str); // 호이스팅한 var 선언으로 인해 undefined 출력

var str; // var 선언
str = "Hello World"; // 초기화(할당)

console.log(str); // Hello Wolrd 출력

첫번째 console.log에서는 var 선언으로 변수 str이 호이스팅 되어 undefined로 초기화(할당)되어 undefined가 출력되었다.

마지막 console.log에서는 변수 str이 undefined에서 Hello World로 재할당되었으므로, Hello World가 출력되었다.

console.log(str); // 호이스팅한 var 선언으로 인해 undefined 출력

var str = "Hello World"; // var 선언 및 초기화(할당)

console.log(str); // Hello Wolrd 출력

var 선언 및 초기화(할당)이 동시에 이루어졌을 때도 예제1과 동일한 결과가 나타난다.

console.log(str); // str이 할당되지 않았으므로 ReferenceError가 발생한다.

let str = "Hello World"; // let 선언 및 초기화(할당)

console.log(str); // Hello Wolrd 출력

첫번째 console.log에서는 let 선언으로 변수 str이 호이스팅 되었으나, undefined로 초기화(할당)되지 않아서, undefined가 출력되었다.

마지막 console.log에서는 변수 str이 let 선언과 동시에 Hello World로 초기화(할당)되었으므로, Hello World가 출력되었다.

console.log(foo()); // 1 출력

function foo() {
	return 1;
}

console.log(foo()); // 1 출력

함수 선언식으로 작성하였으므로, 호이스팅 되어 첫번째와 마지막 console.log에서 1이 출력된다.

console.log(foo()); // 에러 발생

const foo = function() {
	return 1;
}

console.log(foo()); // 1 출력

함수 표현식으로 작성하였으므로, 호이스팅 되지 않아서 첫번째 console.log에서는 에러가 발생하고, 마지막 console.log에서는 1이 출력된다.

JUST DO IT.