Function VS Arrow Function

시작하며

자바스크립트에서 함수를 선언하는 방식은 다양하지만 특히 일반 함수와 화살표 함수는 자주 비교되는 개념입니다.
이 글에선 두가지의 차이점과 화살표 함수를 사용하는 이유를 정리해보겠습니다.

함수 선언 방식

일반 함수

const add = function(a, b) {
    return a + b;
};

• function 키워드를 사용해 선언
• 함수 이름을 가질 수도 있고, 익명 함수로 표현식에 할당할 수도 있음

화살표 함수

const add = (a, b) => {
    return a + b;
};

• function 키워드 대신 =>기호를 사용하여 함수를 간결 하고 간단하게 작성 가능
• 한줄 반환 시 return과 {} 생략 가능

const greet = (name) => `Hello, ${name}!`;

위 코드 처럼 return 키워드를 생략할 수 있고 이때 중괄호{} 는 생략해야 합니다.
또, 중복된 매개변수 이름을 선언 할 수 없습니다.

화살표 함수와 일반 함수의 차이

화살표 함수와 일반 함수의 차이에 대해 알아보겠습니다.

this 바인딩 차이

먼저 바인딩이란 쉽게 말해서 변수, 함수, 객체 등이 어떤 값이 연결되는 것을 의미합니다.
즉 함수가 실행될 때 this가 무엇을 가리키는지를 결정하는 연결 과정을 바인딩이라고 합니다.

일반함수

window.a = 10;

function foo() {
  console.log(this.a);
}

foo(); // 10

기본 바인딩이 적용될 경우 this는 전역 객체에 바인딩된다.

화살표 함수

const obj = {
  name: "JS",
  arrow: () => console.log(this.name),
};

obj.arrow(); // undefined (전역 this)

화살표 함수는 자신만의 this를 가지지 않고 정의된 위치의 this를 그대로 사용합니다.
따라서 eventListener나 콜백에서 this를 헷갈리지 않고 사용할 수 있습니다.

arguments 객체

arguments란 프로그래밍에서 함수가 호출될 때 함수에 전달되는 실제 값을 의미합니다.

일반 함수

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

화살표 함수

const arrowFunc = (...args) => {
  console.log(args);  // {0: 1, 1: 2, 2: 3}
};
arrowFunc(1, 2, 3);

일반 함수는 함수 안에서 전달된 모든 인수를 arguments 객체로 확인할 수 있습니다.
반면 화살표함수는 arguments가 없고 대신 `...args나머지 매개변수를 사용해야 합니다.

생성자 함수

생성자 함수란 new키워드를 사용해 객체를 만들어주는 함수입니다.

일반 함수

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const p1 = new Person("Tom", 20);
console.log(p1.name); // "Tom"

이름 첫 글자를 대부분 대문자로 씁니다.
코드 안에서 this는 새로 만들어질 객체를 가리킵니다.

화살표 함수

const PersonArrow = (name, age) => {
  this.name = name;
  this.age = age;
};

const p2 = new PersonArrow("Tom", 20); // 에러

화살표 함수에는 자체적인 this가 없기 때문에 new와 함께 쓰면 에러가 납니다.

화살표 함수 장점

문법이 간결하다

가장 큰 이유 중 하나는 짧은 문법입니다.
위에서 설명 한것 처럼 function 키워드가 필요없고
한 줄로 반환할 때 {} 와 return 도 생략 가능 합니다.

콜백 함수에서 깔끔

map, filter, forEach 같은 배열 매서드에서 특히 유용합니다.

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6]

반복되는 짧은 콜백 함수는 화살표 함수로 쓰면 가독성이 더 좋아집니다.

마치며

오늘은 화살표 함수와 일반함수의 차이점 그리고 왜 쓰는지에 대해 알아보았습니다. 화살표 함수는 짧고 직관적입니다 따라서 상황에 맞게 잘 쓰면 가독성을 정말 좋아지게 할 수 있습니다. 글 읽어주셔서 감사합니다. 피드백 많이 해주시면 감사하겠습니다.