함수 선언식 vs 함수 표현식 vs 화살표 함수, 무엇이 어떻게 다를까?

함수 선언식 vs 함수 표현식 vs 화살표 함수

자바스크립트 함수 문법, 언제 무엇을 써야 할까?

 

자바스크립트에서 함수는 단순한 기능 묶음이 아니라, 코드 구조와 동작 방식에 직접적인 영향을 주는 핵심 요소입니다.

특히 함수 선언식, 함수 표현식, 화살표 함수는 문법은 비슷해 보여도 동작 방식과 사용 목적이 꽤 다릅니다.

 

처음에는 "그냥 편한 거 쓰면 되는 거 아닌가?"라고 생각하기 쉽지만, 실제 프로젝트에서는 선택 기준이 분명해집니다.

이번 글에서는 세 가지 함수 정의 방식의 차이점과 실무에서의 사용 기준을 정리해 보겠습니다.

 

---

 

1. 함수 선언식 (Function Declaration)

가장 전통적인 방식으로, 많은 분들이 처음 자바스크립트를 배울 때 접하는 형태입니다.

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

특징

• 코드 상단에서 정의하지 않아도 호출 가능
• 호이스팅(hoisting)의 영향을 받음
• 함수 이름이 반드시 필요

 

호이스팅이란?

함수 선언식은 자바스크립트 엔진이 코드를 실행하기 전에 함수 전체를 미리 메모리에 올립니다.

그래서 아래처럼 작성해도 에러 없이 동작합니다.

console.log(sum(2, 3));

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

 

장점

• 코드 어디서든 호출 가능해 가독성이 좋음
• 공통 유틸 함수, 전역적으로 사용하는 함수에 적합
• 초보자에게 이해하기 쉬움

 

 

단점

• 함수가 어디서 정의되었는지 추적이 어려울 수 있음
• 조건문 안에서 선언 시 예기치 않은 동작 가능성

 

---

 

2. 함수 표현식 (Function Expression)

함수를 변수에 할당하는 방식입니다.

선언식과 가장 큰 차이는 "값으로 취급된다"는 점입니다.

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

 

특징

• 변수에 할당된 이후에만 호출 가능
• 호이스팅 시 변수만 올라가고, 함수 내용은 올라가지 않음
• 익명 함수 사용 가능

 

아래 코드는 에러가 발생합니다.

console.log(sum(2, 3)); // 오류 발생

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

 

장점

• 코드 흐름이 위에서 아래로 자연스럽게 읽힘
• 조건부 함수 정의, 콜백 함수에 적합
• 함수가 값처럼 다뤄져 유연함

 

 

단점

• 선언 전에 호출할 수 없음
• 코드가 길어지면 가독성이 떨어질 수 있음

 

---

3. 화살표 함수 (Arrow Function)

ES6 이후 가장 많이 사용되는 방식으로, 함수 표현식을 간결하게 만든 형태입니다.

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

 

한 줄이라면 더 줄일 수도 있습니다.

const sum = (a, b) => a + b;

 

특징

• function 키워드가 없음
• 항상 익명 함수
• this 바인딩 방식이 다름

 

4. 세 가지 함수 방식 한눈에 비교

구분	함수 선언식	함수 표현식	화살표 함수
호이스팅	가능	불가	불가
this 바인딩	동적	동적	상위 스코프
익명 함수	불가	가능	항상 익명
생성자 사용	가능	가능	불가
가독성	높음	보통	매우 높음

 

실제 개발에서는 문법 자체보다 "의도"가 더 중요합니다.

• 공통 로직, 유틸 함수
  → 함수 선언식
• 조건에 따라 정의되거나, 값처럼 전달되는 함수
  → 함수 표현식
• 콜백, 이벤트 핸들러, 간단한 로직
  → 화살표 함수

 

특히 React, Vue 같은 프론트엔드 환경에서는 화살표 함수 사용 비중이 매우 높지만, 객체 메서드나 라이프사이클 로직에서는 여전히 일반 함수가 필요합니다.