[Javascript] 호이스팅 (Hoisting)

일반적으로 코드는 위에서 아래로 순서대로 진행된다. 호이스팅이란 순서상으로는 선언하지 않았지만, 아래에서 선언된 변수나 함수를 위쪽에서 사용할 수 있는 현상을 말한다.

console.log(num)을 실행할 당시에는 add라는 함수가 정의되어 있지 않은 상태인데, console에 30이라는 값이 찍힌다.

const num = add(10, 20);
console.log(num); // 30

function add(a, b) {
  return a + b;
}

const나 let은 var와 같이 undefined가 아닌 Error가 뜨기 때문에 호이스팅이 되지 않는 것처럼 보이지만, 사실은 그렇지 않다. const나 let도 호이스팅을 지원하지만 다른 기능을 가지고 있다.

console.log(hello); // undefined
var hello = 10;
console.log(hello); // 10

---------------------------------

var hello;
console.log(hello); // undefined
hello = 10;
console.log(hello); // 10

console.log(hello); // Error!

const hello = 10;
// or let hello = 10;

코드를 선언하는 구문에 도달하기 전에는, 변수를 사용하게 할 수 없도록 하게하는 기능이다. 호이스팅을 지원하지 않는 것이 아니다. print2함수 내부에서 선언한 hello와 전역에서 선언한 hello는 다르다. print1함수에서는 전역에서 선언한 hello변수를 가져와서 사용했지만, print2함수에서는 hello변수를 새롭게 선언했는데 console.log(hello)가 변수를 선언하기 전에 실행되기 때문에 print2함수 내부의 hello변수를 사용하지 못하고 Error를 출력한다.

const hello = 100;

function print1() {
  console.log(hello); // 100
}

function print2() {
  console.log(hello); // Error!
  const hello = 200;
}

아래에서 add()함수를 선언할 때, 목적에 따라 어느 위치에서 선언하는 것이 바람직한지 알아보려고 한다. 외부에서 함수를 사용하지 않을 생각이라면 불필요한 코드는 작성하지 않는 것이 좋기 때문에 [4]번과 같이 export를 사용할 필요는 없다. main()함수 뿐만 아니라, main2()나 main3()함수에서도 add()함수를 사용한다면, [3]번 위치에서 작성하는 것이 재사용성을 위해서 좋다. main()함수 내에서만 add()함수를 사용한다면 [1]번과 [2]번에서 함수를 선언하는 것이 더 적절하다. [2]번이 가능한 이유는 자바스크립트에서 함수의 호이스팅이 가능하기 때문이다. [1]번과 [2]번 중 선택하는 것은 개발자의 선택에 따라 갈리는 문제인데, main()함수를 실행함에 있어서 add()함수가 중요하거나 개발자가 보고 이해가 필요한 경우라면 [1]번에 위치하는 것이 좋지만, add()함수와 같은 경우는 함수의 이름만 봐도 함수의 목적이 분명하고, main()함수와 직접적인 연관성이 있는 경우가 아니기 때문에 [2]번에 위치해서 시선을 분산시키지 않는 것도 좋은 방법이다.

function main() {
  // [1]
  function add(n1, n2) {
    return n1 + n2;
  }
  
  const result = add(3, 4);
  
  // [2]
  function add(n1, n2) {
    return n1 + n2;
  }
}

function main2() { ... }
function main3() { ... }

// [3]
function add(n1, n2) { ... }

// [4]
export function add(n1, n2) { ... }