Colin's Blog
자바스크립트 함수 호이스팅 (Function Hoisting)

자바스크립트에서 함수 호이스팅 (function hoisting)은 함수가 선언되기 전에도 호출할 수 있는 특징입니다. 이는 자바스크립트 엔진이 코드를 실행하기 전에 함수 선언을 메모리에 끌어올리는 것을 의미합니다.

함수 호이스팅은 자바스크립트에서 함수를 사용하는 방법 중 하나로, 미리 선언된 함수를 어디서든 호출할 수 있게 해주는 유용한 개념입니다. 이는 코드의 유연성과 가독성을 높여줍니다.

함수 선언과 함수 표현식

함수를 이해하기 전에 먼저 함수 선언과 함수 표현식에 대해 알아보겠습니다.

함수 선언 (Function Declaration)

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

함수 선언은 function 키워드를 사용하여 함수를 선언하고, 함수의 이름과 매개변수를 정의합니다.

함수 표현식 (Function Expression)

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

함수 표현식은 function 키워드를 사용하여 익명 함수를 선언하고, 이를 변수에 할당합니다.

함수 호이스팅의 예시

이제 함수 호이스팅의 예시를 살펴보겠습니다.

console.log(add(2, 3)); // 5

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

위의 예시에서는 함수 선언을 console.log() 호출 이전에 작성했음에도 불구하고 함수를 호출할 수 있습니다. 이는 함수 호이스팅으로 인해 가능한 것입니다.

하지만 함수 표현식을 사용하면 어떨까요?

console.log(add(2, 3)); // TypeError: add is not a function

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

위의 예시에서는 함수 표현식을 변수 할당 전에 호출하였기 때문에 TypeError가 발생합니다. 함수 표현식은 호이스팅되지 않기 때문에 변수 할당 이후에만 호출할 수 있습니다.

함수 호이스팅 주의사항

함수 호이스팅을 사용할 때 주의해야 할 몇 가지 사항이 있습니다.

  1. 함수 선언만 호이스팅됩니다: 함수 표현식은 호이스팅되지 않으므로 변수 할당 이후에만 사용할 수 있습니다.

  2. 변수 호이스팅과 충돌할 수 있습니다: 함수와 변수가 동일한 이름을 가질 경우, 변수 호이스팅이 함수 호이스팅을 덮어씌웁니다.

var add = 5;

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

console.log(add); // 5

위의 예시에서는 변수 add가 함수 add를 덮어씌워 5를 출력합니다.

  1. 코드 가독성에 영향을 줄 수 있습니다: 함수 호이스팅은 코드의 실행 순서와 달리 함수 선언을 메모리에 끌어올리므로, 코드의 가독성이 저하될 수 있습니다. 따라서 코드 작성 시에는 함수 호이스팅을 잘 이해하고 사용해야 합니다.

결론

자바스크립트 함수 호이스팅은 함수를 선언하기 전에도 호출할 수 있는 유용한 기능입니다. 함수 선언은 호이스팅되지만, 함수 표현식은 호이스팅되지 않으므로 변수 할당 이후에만 사용할 수 있습니다. 함수 호이스팅을 제대로 이해하고 사용하면 코드의 유연성을 높여줄 수 있습니다.

© 2018 Colin. All rights reserved.