[JavaScript]🔍화살표 함수(Arrow Function) vs function 키워드 차이점

0. 들어가면서

JavaScript에는 함수를 선언하는 여러 가지 방법이 있지만,

가장 자주 비교되는 두 가지는 바로 function 키워드와 화살표 함수입니다.

 

이번 포스트에서는 이 둘의 차이점, 언제 어떤 것을 사용해야 하는지, 그리고 주의할 점을 정리해보겠습니다.

 

 

 

---

1. 기본 문법 차이

// function 키워드
function sayHello(name) {
  return `Hello, ${name}`;
}

// 화살표 함수
const sayHello = (name) => {
  return `Hello, ${name}`;
};

// 화살표 함수의 축약형 (한 줄 리턴일 때)
const sayHello = name => `Hello, ${name}`;

 

→  화살표 함수는 더 짧은 문법을 제공하며, 익명 함수로 사용되는 경우가 많아요.

 

 

---

2. this 바인딩의 차이

이게 가장 큰 차이점입니다!

• function 키워드는 동적 바인딩 (호출되는 문맥에 따라 this가 달라짐)
• => 화살표 함수는 정적 바인딩 (선언 당시의 this를 기억함, 다른 말로 상위 스코프의 this)

const user = {
  name: 'Jane',
  sayHi: function () {
    console.log(this.name); // Jane
  },
  sayHiArrow: () => {
    console.log(this.name); // undefined (상위 스코프의 this)
  }
};

user.sayHi();        // Jane
user.sayHiArrow();   // undefined

 

→ 화살표 함수는 객체 메서드에서 this를 사용하고 싶을 때 적절하지 않습니다.

 

---

3. arguments 객체의 유무

function normalFunc() {
  console.log(arguments); // 유사 배열 객체
}

const arrowFunc = () => {
  console.log(arguments); // ❌ ReferenceError
}

• function은 내부적으로 arguments 객체를 사용 가능
• => 함수는 arguments가 정의되어 있지 않음

➡️ arguments가 필요한 경우에는 function 키워드를 써야 합니다.

 

---

4. 생성자 함수로 사용 가능 여부

function Person(name) {
  this.name = name;
}
const p = new Person('Tom'); // ✅ 가능

const PersonArrow = (name) => {
  this.name = name;
};
const p2 = new PersonArrow('Tom'); // ❌ TypeError: PersonArrow is not a constructor

• function은 생성자 함수로 사용 가능 (new)
• => 함수는 생성자 사용 불가

 

---

5. 메서드 정의 시 사용 여부

const user = {
  name: 'Jane',
  greet() {
    return `Hi, I'm ${this.name}`;
  },
  badGreet: () => `Hi, I'm ${this.name}`
};

user.greet();    // Hi, I'm Jane
user.badGreet(); // Hi, I'm undefined

• 객체의 메서드로 사용할 때는 function 또는 축약형 메서드 정의를 추천
• 화살표 함수는 this가 상위 스코프이기 때문에 사용하지 않는 것이 좋음

 

---

📌 6. 요약 비교표

항목	function 키워드	화살표 함수 (=>)
문법	길고 명시적	짧고 간결
this	호출 시점에 따라 동적 바인딩	선언 시점에 고정된 바인딩
arguments 사용	가능	❌ 사용 불가
생성자 함수 (new 키워드) 사용	가능	❌ 불가능
메서드 정의	권장	❌ 지양 (this 문제)
콜백 함수 사용	가능	✅ 간결하게 사용 가능

 

---

🧠 언제 어떤 걸 써야 할까?

상황	추천 함수 유형
콜백 함수 (map, filter 등)	화살표 함수
객체 메서드 정의	function 키워드
생성자 함수	function 키워드
this가 필요한 컨텍스트	function 키워드
간단한 로직 or 내부적으로 this 미사용	화살표 함수

 

 

 

 

 

📚 참고 자료

• MDN Web Docs - Arrow Functions
• MDN Web Docs - Function
• JavaScript.info - Arrow Functions