JS 의 일반 함수와 화살표 함수

자바스크립트에서는 함수를 선언하는 방법이 여러 가지가 있지만,

가장 자주 비교되는 두 가지는 바로 일반 함수(Function Declaration / Expression) 와 화살표 함수(Arrow Function) 입니다.

이 두 가지는 문법뿐 아니라 this****, arguments****, 생성자 사용 가능 여부 등에서도 큰 차이가 있습니다.

하나씩 정리해볼게요 👇

🚀 1. 기본 문법

✅ 일반 함수

function add(a, b) {
  return a + b;
}
 
// 또는 함수 표현식으로
const add = function (a, b) {
  return a + b;
};

✅ 화살표 함수

const add = (a, b) => {
  return a + b;
};
 
// 한 줄일 경우 return 생략 가능
const add = (a, b) => a + b;

🧠 핵심 요약

• 일반 함수: function 키워드를 사용
• 화살표 함수: => 문법으로 간결하게 표현

⚙️ 2. this의 차이점

이 부분이 가장 중요한 차이입니다.

🔹 일반 함수의 this

• 호출 방식에 따라 this가 동적으로 결정됩니다.

• 객체의 메서드로 호출하면 그 객체가 this가 되고,

  그냥 호출하면 this는 undefined (strict mode) 혹은 전역 객체(window)가 됩니다.

const obj = {
  value: 10,
  normalFunc: function () {
    console.log(this.value); // ✅ 10
  },
};
 
obj.normalFunc();

🔹 화살표 함수의 this

• 자신만의 **this**를 가지지 않습니다.
• 대신 **자신이 선언된 “외부 스코프의 this”**를 그대로 사용합니다.

const obj = {
  value: 10,
  arrowFunc: () => {
    console.log(this.value); // ❌ undefined (상위 스코프의 this는 전역)
  },
};
 
obj.arrowFunc();

➡️ 이 특징 때문에, 이벤트 핸들러나 클래스 메서드에서 this를 다뤄야 할 땐 화살표 함수를 주의해야 합니다.

🧠 3. arguments 객체

• 일반 함수는 호출 시 전달된 인자를 담는 arguments 객체를 제공합니다.
• 화살표 함수는 arguments가 없어요. 대신 **rest parameter(...args)**를 써야 합니다.

function normalFunc() {
  console.log(arguments); // ✅ 사용 가능
}
 
const arrowFunc = () => {
  console.log(arguments); // ❌ ReferenceError
};
 
normalFunc(1, 2, 3);
arrowFunc(1, 2, 3);

🏗️ 4. 생성자 사용 가능 여부

• 일반 함수는 new 키워드로 생성자 함수로 사용 가능
• 화살표 함수는 생성자로 사용할 수 없습니다 (오류 발생)

function Person(name) {
  this.name = name;
}
 
const john = new Person("John"); // ✅ 가능
 
const PersonArrow = (name) => {
  this.name = name;
};
 
const jane = new PersonArrow("Jane"); // ❌ TypeError

🧩 5. 메서드 정의 시 주의점

객체 메서드를 정의할 때 화살표 함수를 사용하면 this가 꼬일 수 있어요.

const counter = {
  count: 0,
  increase: () => {
    this.count++; // ❌ this는 counter가 아님
  },
};
 
counter.increase(); // TypeError

이럴 때는 반드시 일반 함수 문법을 사용해야 합니다.

🧭 6. 정리표

💡 언제 어떤 걸 써야 할까?

✅ 일반 함수가 좋은 경우

• 객체의 메서드를 정의할 때 (this 사용 필요할 때)
• 생성자 함수를 만들 때
• 동적으로 this를 다뤄야 할 때

✅ 화살표 함수가 좋은 경우

• 콜백 함수 (e.g. map, filter, forEach)
• 짧은 함수 로직 (return 한 줄)
• this를 상위 스코프에서 유지하고 싶을 때