호이스팅(Hoisting)

우리가 이전에 배웠던 변수 선언 방식을 기억하시나요? 변수 선언 방식에는 총 세가지가 있다고 했습니다. 그 중에 var는 이미 선언된 변수를 다시 선언할 수 있기 때문에 현재는 사용하지 않는 변수 선언 방식이라고 알려드렸습니다. 이러한 문제는 자바스크립트에서 호이스팅이라는 개념이 있기 때문인데요.

호이스팅이란 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.

쉽게 말해서 호이스팅은 변수의 선언과 초기화를 분리하여 선언만 코드의 최상단으로 끌어올려주는 것입니다. 따라서, 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있습니다.

함수(function)의 호이스팅

함수는 코드를 실행하기 전에 함수 선언에 대한 메모리부터 할당되어 함수를 호출하는 코드를 함수 선언 앞에 배치할 수 있습니다.

catName('클로이')

function catName(name) {
	console.log('제 고양이의 이름은' + name + '입니다')'
}

// '제 고양이의 이름은 클로이입니다'

이러한 특징 때문에 const를 사용한 화살표형 함수 선언 방식을 통해 예상하지 못한 에러를 방지할 수 있습니다.

변수 선언 방식(var)의 호이스팅

console.log(num); // 호이스팅한 var 선언으로 인해 undefined 출력
var num; // 선언
num = 6;  // 초기화

변수 선언 시 초기화를 제외한 선언만 호이스팅합니다. 변수를 먼저 사용하고 그 후에 선언 및 초기화가 나타나면 사용하는 시점의 변수는 기본 초기화 상태인 undefined입니다.

let과 const로 선언한 변수도 호이스팅이 되긴 하지만, var와는 달리 undefined로 변수를 초기화 하지 않기 때문에 변수 선언 전에 먼저 사용하게되면 오류가 발생합니다.