자바스크립트 함수 선언과 표현식 완전 정리: function vs 화살표 함수의 차이

자바스크립트에서 함수는 재사용 가능한 코드 블록으로, 함수 선언식과 함수 표현식으로 구분됩니다. 이 글에서는 function 키워드와 화살표 함수(arrow function)의 문법, 차이점, this 바인딩 문제, 사용 시 주의사항 등을 예제와 함께 명확히 설명합니다.

함수는 자바스크립트의 구조를 만드는 기본 단위

자바스크립트에서 함수는 반복되는 작업을 모듈화하고, 코드의 재사용성을 높이며, 복잡한 로직을 구조적으로 구성하는 핵심 수단입니다. 함수는 개발자가 작성한 코드를 논리적 단위로 나누어 의미 있게 구성할 수 있도록 돕고, 필요할 때마다 불러와 실행할 수 있는 독립적인 블록입니다. 자바스크립트의 함수는 크게 함수 선언식(Function Declaration)과 함수 표현식(Function Expression)으로 나뉘며, ES6 이후에는 화살표 함수(Arrow Function)라는 새로운 형태도 도입되었습니다. 이 세 가지는 문법적으로는 유사하지만, 동작 방식, 스코프에서의 this 바인딩, 호출 가능 시점 등에서 중요한 차이점을 보입니다. 함수 선언식은 전통적인 방식으로, 코드 상단에서 미리 정의하고 이후 자유롭게 호출할 수 있습니다. 반면 함수 표현식은 변수에 익명 함수를 할당하는 형태로, 변수 선언 이후에만 호출이 가능합니다. 화살표 함수는 함수 표현식의 간결한 문법 버전이면서, 특히 this의 처리 방식이 기존 함수와 달라 클로저나 콜백 함수에서 자주 사용됩니다. 이 글에서는 이 세 가지 함수 정의 방식의 차이와 장단점을 명확하게 구분하고, 각각을 실제 코드에 어떻게 활용하면 좋은지 구체적인 예제와 함께 설명합니다.

 

함수 선언식, 함수 표현식, 화살표 함수의 차이

1. 함수 선언식(Function Declaration)
가장 기본적인 함수 정의 방법이며, 호이스팅(hoisting)의 영향을 받아 선언 이전에도 호출이 가능합니다.

function greet(name) {
  return "안녕하세요, " + name + "님";
}

console.log(greet("홍길동")); // "안녕하세요, 홍길동님"

2. 함수 표현식(Function Expression)
변수에 함수를 할당하는 방식이며, 선언 이후에만 호출이 가능합니다. 익명 함수가 대부분이지만 이름이 있는 표현식도 가능합니다.

const greet = function(name) {
  return "반갑습니다, " + name + "님";
};

console.log(greet("김철수")); // "반갑습니다, 김철수님"

차이점: 함수 선언식은 호이스팅되어 코드 위에서도 호출할 수 있지만, 함수 표현식은 변수에 함수가 할당된 이후부터 사용할 수 있습니다. 3. 화살표 함수(Arrow Function)
ES6에서 도입된 함수 표현식의 축약형으로, 특히 콜백 함수나 클로저에서 유용합니다. this를 바인딩하지 않고 상위 스코프의 this를 그대로 사용한다는 점이 핵심 특징입니다.

const greet = (name) => {
  return `환영합니다, ${name}님`;
};

console.log(greet("이영희")); // "환영합니다, 이영희님"

중괄호와 return을 생략할 수 있는 경우도 있습니다:

const double = n => n * 2;
console.log(double(4)); // 8

this 바인딩 차이
function 키워드로 정의한 함수는 호출 방식에 따라 this가 바뀌지만, 화살표 함수는 자신이 선언된 스코프의 this를 그대로 사용합니다.

function Timer() {
  this.seconds = 0;
  setInterval(function() {
    this.seconds++;
    console.log(this.seconds);
  }, 1000);
}
// 결과: NaN 또는 오류 (this가 setInterval 내부의 context를 가리킴)

function FixedTimer() {
  this.seconds = 0;
  setInterval(() => {
    this.seconds++;
    console.log(this.seconds);
  }, 1000);
}
// 결과: 1, 2, 3... 정상 작동 (화살표 함수가 외부 this를 그대로 사용)

화살표 함수는 this, arguments, super, new.target을 자체적으로 바인딩하지 않기 때문에 생성자 함수로는 사용할 수 없습니다.

 

함수 선언 방식의 선택이 코드의 성격을 결정한다

자바스크립트에서 함수를 정의하는 방식은 코드의 구조와 동작 방식에 직접적인 영향을 줍니다. 함수 선언식은 직관적이고 명확한 정의가 가능하며, 선언 이전에도 호출이 가능하다는 장점이 있습니다. 함수 표현식은 선언 위치 이후에만 호출 가능하다는 제약이 있지만, 코드 흐름상 변수를 기반으로 함수를 동적으로 정의하거나 클로저와 함께 사용할 때 유용합니다. 화살표 함수는 간결한 문법과 함께 this 바인딩 처리 방식이 기존 함수와 다르기 때문에, 특히 콜백 함수나 setTimeout, setInterval, map, filter 같은 고차 함수 안에서 매우 유용합니다. 하지만 생성자 함수나 클래스 메서드에는 적합하지 않다는 점을 반드시 기억해야 합니다. 실무에서는 함수 선언식은 유틸 함수나 기본 도구 함수 정의에, 함수 표현식은 모듈 구조나 클로저 활용 시, 화살표 함수는 간결한 표현과 this 처리를 동시에 요구하는 콜백 함수에 주로 사용됩니다. 상황에 따라 세 가지 방식을 구분하여 쓰는 습관을 들이는 것이 중요합니다. 결론적으로, 자바스크립트의 함수는 단순한 기능 실행 도구를 넘어서 코드의 흐름, this의 의미, 메모리 구조까지도 좌우하는 중요한 개념입니다. 따라서 function 선언식과 표현식, 화살표 함수 각각의 문법과 작동 방식, 제한 사항을 명확하게 이해하고, 상황에 맞는 함수 정의 방식을 선택하는 역량은 자바스크립트 개발자로서의 기본기라 할 수 있습니다.