[일반 함수와 화살표 함수] 자바스크립트 함수, 왜 두 가지 문법이 존재할까?

728x90

일반 함수와 화살표 함수 

ES6(ECMAScript 2015)부터 도입된 화살표 함수(Arrow Function)는 기존의 일반 함수(Function Declaration/Expression)보다 짧은 문법과 특정 컨텍스트 처리의 단순화를 위해 고안되었습니다. 하지만, 문법이 간결하다고 해서 항상 화살표 함수를 쓰는 것이 최선은 아닙니다.
이 글에서는 화살표 함수와 일반 함수의 동작 방식 차이, 사용 시 주의할 점, 예제 코드 비교를 통해 언제 어떤 함수를 써야 하는지 설명합니다.

 

---

1.  문법 차이

항목	일반 함수	화살표 함수
기본 형태	function add(a, b) { return a + b; }	const add = (a, b) => a + b;
return 생략 가능 여부	불가능	가능 (단일 표현식인 경우)
function 키워드	필수	불필요

// 일반 함수
function greet(name) {
  return `Hello, ${name}`;
}

// 화살표 함수
const greet = name => `Hello, ${name}`;

 

---

2.  this 바인딩

가장 핵심적인 차이는 this의 바인딩 방식입니다.

일반 함수의 this는 호출 시점에 결정

const user = {
  name: "Alice",
  greet: function () {
    console.log(`Hello, I'm ${this.name}`);
  }
};

user.greet(); // Hello, I'm Alice

화살표 함수의 this는 정의 시점에 상위 스코프의 this로 고정

const user = {
  name: "Alice",
  greet: () => {
    console.log(`Hello, I'm ${this.name}`);
  }
};

user.greet(); // Hello, I'm undefined

 

---

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

일반 함수는 생성자로 사용할 수 있지만, 화살표 함수는 그렇지 않습니다.

function Person(name) {
  this.name = name;
}
const p = new Person("Tom"); // OK

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

 

---

4.  arguments 객체 사용 가능 여부

일반 함수는 자동으로 arguments 객체를 생성하지만, 화살표 함수는 그렇지 않습니다.

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

const showArgsArrow = () => {
  console.log(arguments);
};
showArgsArrow(1, 2, 3); // ReferenceError: arguments is not defined

• 화살표 함수 내에서 arguments가 필요하다면 외부 함수에서 전달받거나 Rest 파라미터를 사용해야 합니다.

 

---

5.  사용 시 주의사항 및 정리

구분	일반 함수	화살표 함수
객체 메서드	O	X (this 문제)
생성자 함수	O	X
arguments 접근	O	X
간결한 콜백	다소 장황	매우 간결
this 바인딩	동적 (호출 시 결정)	정적 (정의 시 상위 스코프 고정)

 

---

6.  마무리

화살표 함수는 짧고 직관적인 문법을 제공하지만, this, arguments, new 사용과 관련해 제한이 있습니다. 반면 일반 함수는 더 많은 기능과 유연성을 제공하지만 코드가 길어질 수 있습니다.

언제 어떤 함수를 사용해야 할까?

• 콜백 함수, 배열 메서드(map, filter 등)에는 화살표 함수가 적합
• 객체의 메서드, 생성자 함수에는 일반 함수가 적합

두 함수의 특성을 잘 이해하면 더 깔끔하고 의도에 맞는 자바스크립트 코드를 작성할 수 있습니다.

함께 보면 좋은 자료

외부 사이트 : 

• MDN Web Docs - Function
• MDN Web Docs - Arrow Function Expressions

 

---