함수 선언문(Function Declaration)과 함수 표현식(Function Expression)

JavaScript에서 함수 선언문과 함수 표현식이 무엇이고 어떻게 사용하는 것인지 알아봅시다!

 

---

1. 함수 선언문(Function Declaration)

함수 선언문이란? function 키워드를 사용해 함수를 정의하고, 이를 코드 어디에서나 호출할 수 있도록 하는 방법입니다.

 

함수 선언문의 구조는 다음과 같아요.

function 함수이름(매개변수1, 매개변수2, ...) {
  // 실행할 코드
  return 반환값; // 생략 가능
}

 

주요 특징은 다음과 같습니다.

 

1-1. 호이스팅(Hoisting)

함수 선언문은 코드가 실행되기 전에 함수 선언이 자동으로 상단으로 끌어올려집니다. 따라서 함수 선언문으로 정의된 함수는 코드의 어느 위치에서든 호출할 수 있어요.

즉, 다음과 같이 작성해도 function이 먼저 읽게 되는 것이죠.

hello(); // 정상적으로 호출됨

function hello() {
  console.log("Hello!");
}

 

1-2. 매개변수와 반환값

함수 선언문에는 매개변수를 넣어 인자를 전달할 수 있고, return 키워드를 사용해 값을 반환할 수 있어요. 반환값이 없을 경우, 함수는 undefined를 반환합니다.

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

let result = add(2, 3) // 5

 

1-3. 전역 / 지역 스코프

함수는 정의된 위치에 따라 전역 or 지역 스코프에서 실행됩니다.

함수 안에서 선언된 변수는 함수 외부에서 접근할 수 없어요. 이를 지역 변수라고 합니다.

 

1-4. 재사용성

함수 선언문으로 정의한 함수는 한 번 정의하면, 여러 번 재사용할 수 있어 코드의 중복을 줄여줘요.

 

---

2. 함수 표현식(Function Expression)

함수 표현식이란? 함수 선언문과 달리, 함수가 할당된 변수를 통해서만 호출할 수 있어요.

이는 주로 익명 함수와 함께 사용되지만, 이름 있는 함수도 사용 가능합니다.

 

함수 표현식의 구조는 다음과 같아요.

const 함수이름 = function(매개변수1, 매개변수2, ...) {
  // 실행할 코드
  return 반환값; // 생략 가능
};

 

주요 특징은 다음과 같습니다.

 

2-1. 호이스팅(Hoisting)

함수 표현식은 선언 전에 호출할 수 없어요. 즉, 함수 표현식으로 정의된 함수는 정의된 이후에만 호출 가능합니다.

이는 함수 선언문과 중요한 차이점입니다.

greet() // 오류 발생

const greet = function() {
  console.log("Hello!");
}

 

2-2. 익명 함수(Anonymous Function)

함수 표현식에서는 함수에 이름을 붙이지 않고, 익명 함수를 사용하는 경우가 많아요. 이 경우, 함수는 변수 이름을 통해서만 호출이 가능해요.

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

let result = add(2, 3) // 5

 

2-3. 이름 있는 함수(Named Function Expression)

함수 표현식에서도 함수에 이름을 붙일 수 있어요. 하지만, 이름은 함수 내부에서만 사용되며, 외부에서는 변수 이름을 통해 호출됩니다.

const factorial = function fact(n) {
  if (n <= 1) return 1;
  return n * fact(n - 1);
};

console.log(factorial(5)); // 120

 

2-4. 함수를 변수처럼 사용

함수 표현식에서 함수는 변수에 저장되므로, 다른 변수에 복사하거나 인자로 전달할 수 있어요.

함수가 변수에 할당되기 때문에, 배열의 요소로 함수가 들어가거나 객체의 메서드로도 사용될 수 있습니다.

const multiply = function(a, b) {
  return a * b;
};

const operation = {
  add: function(x, y) { return x + y; },
  multiply: multiply
};

console.log(operations.add(2, 3)); // 5
console.log(operations.multiply(4, 5)); // 20

 

2-5. 익명 함수의 활용

익명 함수는 일회성 사용이나 콜백 함수로 자주 사용됩니다. 이를 통해 간결한 코드 작성이 가능해요.

setTimeout(function() {
  console.log("1초 후, 실행");
}, 1000);

 

---

3. 정리하며

지금까지 함수 선언문과 함수 표현식에 대해 알아보았습니다.

마지막으로 둘의 차이점을 정리하고 마무리하겠습니다.

특징	함수 선언문	함수 표현식
호출 시점	선언하기 전에 호출 가능 (호이스팅)	선언된 이후에만 호출 가능
함수 이름	필수 (함수에 이름을 붙여야 함)	선택 (익명 함수 가능)
용도	전역적으로 함수 선언에 사용	콜백 함수, 익명 함수, 일회성 함수 등에 적합
유연성	코드 전체에서 사용 가능	특정 스코프 내에서만 사용 가능

 

참고

캡틴 판교 님의 함수 표현식 vs 함수 선언문

Dean H. Park 님의 함수 표현식 VS 함수 선언식

꼼코더 님의 [JS] - 함수 선언식과 함수 표현식이란? 간단하고 쉽게 이해하기(예제코드, 함수 선언식과 함수 표현식의 차이점, var 함수 표현식 호이스팅 에러 이유)