자바스크립트에는 호이스팅이라는 신기한 현상이 존재한다. 이번 포스트에서는 이 호이스팅에 대해 알아보자.

1. 호이스팅이란?

호이스팅이란 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기하는 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다.
let과 const는 호이스팅이 발생하지 않는다고 알고 있는 사람들도 있는데 그것은 사실이 아니다. let과 const 또한 var과 같이 호이스팅이 발생한다. 다만 undefined로 초기화를 하지 않는 것이다.
호이스팅을 설명할 땐 주로 변수의 선언과 초기화를 분리한 후 선언만 코드의 최상단으로 옮기는 것으로 말한다. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있다.

2. 호이스팅 예제

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

• 위 코드를 보면 var를 사용한 num 변수가 선언부에서 호이스팅이 된다. 따라서 선언 전에 num을 콘솔에 출력하면 undefined가 출력된다. 다만 호이스팅은 선언만 해당하기 때문에 초기화 부분은 의미가 없다.

console.log(num); // ReferenceError
num = 3; // 초기화

• 위 코드에서는 선언 없이 초기화만 존재한다. 따라서 호이스팅이 없고 ReferenceError 에러가 발생한다.

console.log(num); // ReferenceError
let num; // 선언
num = 3; // 초기화

• 위 코드를 보면 let를 사용한 num 변수가 선언부에서 호이스팅이 된다. 다만 let은 호이스팅이 되지만 초기화는 하지 않으므로 ReferenceError가 발생한다. const 또한 마찬가지다.

console.log(sum(3, 7));  // 10

function sum(a, b) {
  return a + b 
}

• 위 코드에서는 함수 호출이 함수 자체보다 앞서지만 잘 동작한다. function 키워드를 사용하여 함수를 선언하면 가능하다.

console.log(sum(3, 7));  // ReferenceError

const sum = (a, b) => {
  return a + b 
}

• 위 코드에서는 ReferenceError 가 발생한다. 그 이유는 함수를 선언할 때 function 키워드가 아니라 const를 사용했기 때문이다. 잘 알아두자.

마치며

이번 포스트에서는 자바스크립트의 호이스팅에 대해서 알아보았다. 상황에 맞게 호이스팅 현상을 이용하면 더 편하게 코드를 작성할 수 있을 것 같다.
그럼 안녕!! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧