함수 선언식과 함수 표현식의 차이

함수 선언식과 함수 표현식의 차이

소개

JavaScript에서는 함수를 정의하는 두 가지 주요 방법이 있습니다: 함수 선언식(Function Declaration)과 함수 표현식(Function Expression). 이 두 방법은 함수의 정의와 호출 시점, 호이스팅 방식에서 차이가 있습니다.

함수 선언식 (Function Declaration)

정의

함수 선언식은 function 키워드로 함수를 선언하는 방식입니다. 함수 이름을 명시적으로 지정하며, 함수는 코드의 어느 위치에서나 호출할 수 있습니다.

예제

function greet() {
  console.log('안녕하세요');
}

greet(); // "안녕하세요"

특징

1. 호이스팅(Hoisting): 함수 선언식은 코드 실행 전에 함수 선언이 호이스팅되므로, 함수 선언 이전에 호출할 수 있습니다.
2. 명명된 함수(Named Function): 함수 이름을 명시하므로, 디버깅 시 호출 스택에서 함수 이름을 확인할 수 있습니다.

함수 표현식 (Function Expression)

정의

함수 표현식은 변수에 익명 함수(Anonymous Function)를 할당하는 방식입니다. 함수가 변수에 할당된 이후에만 호출할 수 있습니다.

예제

const greet = function() {
  console.log('안녕하세요');
};

greet(); // "안녕하세요"

특징

1. 호이스팅(Hoisting): 함수 표현식은 변수에 할당된 후에만 호출할 수 있습니다. 따라서 함수 선언 이전에 호출하면 오류가 발생합니다.
2. 익명 함수(Anonymous Function): 일반적으로 함수 이름이 없지만, 이름을 지정할 수도 있습니다. 이름이 지정된 경우 이를 기명 함수 표현식(Named Function Expression)이라고 합니다.

기명 함수 표현식 예제

const greet = function hello() {
  console.log('안녕하세요');
};

greet(); // "안녕하세요"
// hello(); // ReferenceError: hello is not defined

주요 차이점

1. 호이스팅:
   • 함수 선언식: 함수 선언이 호이스팅되어 함수 선언 이전에 호출할 수 있습니다.
   • 함수 표현식: 변수 선언만 호이스팅되며, 함수는 할당 후에만 호출할 수 있습니다.
2. 구문:
   • 함수 선언식: function 키워드 뒤에 함수 이름이 옵니다.
   • 함수 표현식: 함수가 변수에 할당되며, 익명 함수 또는 기명 함수로 정의할 수 있습니다.
3. 디버깅:
   • 함수 선언식: 함수 이름이 명시되어 있어 호출 스택에서 함수 이름을 확인할 수 있습니다.
   • 함수 표현식: 익명 함수의 경우 호출 스택에서 함수 이름이 표시되지 않지만, 기명 함수 표현식은 함수 이름을 표시할 수 있습니다.

예제 비교

// 함수 선언식
function add(a, b) {
  return a + b;
}

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

// 함수 표현식
const addExpr = function(a, b) {
  return a + b;
};

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

결론

함수 선언식과 함수 표현식은 함수 정의와 호출 시점, 호이스팅 방식에서 차이가 있습니다. 함수 선언식은 코드 실행 전에 호이스팅되어 함수 선언 이전에 호출할 수 있으며, 함수 표현식은 변수에 할당된 후에만 호출할 수 있습니다. 이 두 가지 방법을 이해하고 적절히 사용하면 JavaScript에서 더 효율적이고 가독성 높은 코드를 작성할 수 있습니다.

다음시간에 계속…