자바스크립트 화살표 함수 vs 일반 함수 차이 정리

자바스크립트 화살표 함수 vs 일반 함수, 무엇이 다를까?

자바스크립트 화살표 함수 vs 일반 함수의 가장 큰 차이는 this를 어떻게 결정하느냐입니다. 화살표 함수(arrow function)는 ES6에 도입된 짧은 문법으로, 자신만의 this를 갖지 않고 바깥 스코프의 this를 그대로 사용합니다. 반면 일반 함수는 호출 방식에 따라 this가 동적으로 결정됩니다.

문법부터 비교

// 일반 함수
function add(a, b) {
  return a + b;
}

// 화살표 함수
const add2 = (a, b) => a + b;

// 본문이 한 줄이면 return 생략(암묵 반환)
const square = x => x * x;

// 객체를 반환할 땐 괄호로 감싸기
const makeUser = name => ({ name });

핵심 차이 1: this 바인딩

일반 함수의 this는 "누가 호출했는가"에 따라 바뀝니다. 화살표 함수는 정의된 위치의 this를 그대로 물려받아, 콜백 안에서 this가 풀리는 문제를 자연스럽게 해결합니다.

const counter = {
  count: 0,
  start() {
    // 화살표 함수: 바깥 start()의 this(counter)를 그대로 사용
    setInterval(() => {
      this.count++;
      console.log(this.count); // 1, 2, 3 ...
    }, 1000);
  },
};

const counterBad = {
  count: 0,
  start() {
    // 일반 함수: 여기서 this는 counterBad가 아님 → NaN
    setInterval(function () {
      this.count++;
      console.log(this.count); // NaN
    }, 1000);
  },
};

핵심 차이 2: 객체 메서드에서는 주의

역설적으로 객체의 메서드 자체를 화살표 함수로 정의하면 this가 객체를 가리키지 않습니다. 메서드에는 일반 함수(또는 메서드 축약형)를 쓰세요.

const user = {
  name: '유진',
  // 나쁜 예: this가 user가 아님
  greetBad: () => console.log(this.name), // undefined
  // 좋은 예: 일반 함수
  greet() {
    console.log(this.name); // 유진
  },
};

그 밖의 차이 비교

arguments와 생성자

function normal() {
  console.log(arguments); // [1, 2, 3]
}
normal(1, 2, 3);

const arrow = (...args) => {
  console.log(args); // 화살표는 rest 파라미터로 대체
};
arrow(1, 2, 3);

const Arrow = () => {};
// new Arrow(); // TypeError: Arrow is not a constructor

실전 예제: 배열 메서드 콜백에서의 화살표 함수

화살표 함수가 가장 빛을 발하는 곳은 map, filter, reduce 같은 배열 메서드의 콜백입니다. 짧은 문법과 암묵 반환 덕분에 코드가 간결해지고, 콜백 안에서 바깥 this가 유지되어 클래스 메서드 안에서도 안전합니다.

class Cart {
  constructor() {
    this.tax = 0.1;
    this.items = [1000, 2000, 3000];
  }
  totalWithTax() {
    // 화살표 함수라 콜백 안에서도 this.tax 접근 가능
    return this.items
      .map(price => price * (1 + this.tax))
      .reduce((sum, p) => sum + p, 0);
  }
}
console.log(new Cart().totalWithTax()); // 6600

만약 위 map 콜백을 일반 함수 function (price) { ... }로 썼다면, 그 안의 this는 Cart 인스턴스가 아니어서 this.tax가 undefined가 됩니다. 이처럼 "바깥의 this를 그대로 쓰고 싶을 때" 화살표 함수가 정답입니다.

기본 매개변수, rest 파라미터와의 조합

// 기본값과 rest를 화살표 함수에서도 그대로 사용
const sum = (start = 0, ...nums) =>
  nums.reduce((acc, n) => acc + n, start);

console.log(sum());            // 0
console.log(sum(10, 1, 2, 3)); // 16

흔한 실수

• 객체 메서드를 화살표로: 메서드 안에서 this로 객체에 접근해야 한다면 일반 함수를 쓰세요.
• 이벤트 핸들러에서 this 기대: DOM 이벤트 핸들러를 화살표로 쓰면 this가 이벤트 대상 요소가 아니라 바깥 스코프를 가리킵니다. 요소가 필요하면 event.currentTarget을 쓰세요.
• 화살표로 생성자 만들기: 클래스나 객체 생성용 함수는 화살표로 만들 수 없습니다.

자주 묻는 질문

Q1. 언제 화살표 함수를 써야 하나요?

콜백, 배열 메서드(map/filter), 짧은 유틸 함수처럼 자체 this가 필요 없는 경우에 화살표 함수가 좋습니다. 코드가 간결해지고 this 혼란이 줄어듭니다.

Q2. 언제 일반 함수를 써야 하나요?

객체 메서드, 클래스 메서드, 생성자, arguments가 필요한 경우, 호출 시점의 동적 this가 필요한 경우에는 일반 함수를 사용하세요.

Q3. 화살표 함수는 성능이 더 좋나요?

성능 차이는 거의 없습니다. 선택 기준은 속도가 아니라 this 동작과 문법 간결성입니다.