함수 호이스팅과 변수 호이스팅

1. 호이스팅(Hoisting)

함수 선언문과 변수 var가 선호되지 않고, 화살표함수와 변수 let 혹은 상수 const가 주로 사용되는 이유는 호이스팅 때문이다.

호이스팅이란 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. 다시 말해, 호이스팅은 변수의 선언과 초기화를 분리해서 선언만 코드의 최상단으로 끌어올려주는 것이다. 따라서 변수를 선언하는 코드보다 사용하는 코드가 앞서 등장할 수 있게 된다.

1.1. 함수 호이스팅

catName("클로이");

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

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

1.2. var 키워드로 선언한 변수 호이스팅

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

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

let과 const로 선언한 변수도 호이스팅이 되긴 하지만, var 키워드로 선언한 변수와는 달리 선언과 초기화 단계가 분리되어 있기 때문에(초기화 단계에서 undefined로 변수를 초기화하지 않기 때문에) 호이스팅이 발생하지 않는 것처럼 보이는 것이다. 따라서 변수 선언 전에 변수를 먼저 사용하게 되면 undefined 대신 오류가 발생한다.

함수 표현식과 화살표 함수로 정의한 함수도 호이스팅이 발생하긴 한다. 단지, 선언 단계에서 함수가 식별자에 바인딩되지 않고 선언과 초기화 단계가 분리되어 있기 때문에 함수 선언 전에 호출할 수 없는 것이다.