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

코드 상으로는 다음과 같은 차이가 있다.

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

const result1 = add(2, 3); // 5

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

const result2 = add(2, 3); // 5

1. 문법적 차이점

• 일반 함수는 function 키워드를 사용하여 선언하며, function 다음에 함수 이름과 매개변수를 작성한다.
• 화살표 함수는 => 기호를 사용하여 함수를 선언한다. 매개변수와 함수 본문은 => 기호 양쪽에 작성한다. 함수 이름은 선택적으로 사용할 수 있다.

2. this 바인딩 차이점

• 일반 함수에서의 this는 함수가 호출되는 방법에 따라 동적으로 결정된다. 일반 함수를 객체의 메소드로 호출하면, this는 해당 객체를 참조한다. 그러나 함수를 호출할 때 this를 바인딩하지 않은 경우, this는 전역 객체를 참조한다.

const obj = {
  name: 'John',
  greet: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

obj.greet(); // "Hello, John!"

const greetFn = obj.greet;
greetFn(); // "Hello, undefined!" or "Hello, [global object]!"

• 화살표 함수에서의 this는 자신을 감싼 외부 스코프에서 상속된다. 이를 lexical this라고 한다. 화살표 함수는 자신만의 this를 생성하지 않으므로, 화살표 함수를 호출할 때 this를 바인딩하는 과정이 필요하지 않다. 따라서, 화살표 함수 내부에서 this를 사용하면, 화살표 함수를 감싼 외부 스코프에서 상속받은 this를 참조한다.

const obj = {
  name: 'John',
  greet: function() {
    const greetFn = () => console.log(`Hello, ${this.name}!`);
    greetFn();
  }
};

obj.greet(); // "Hello, John!"

greetFn은 화살표 함수로 선언되어 있다. greetFn 내부에서 this를 사용했지만, this는 외부 스코프에서 상속받은 obj를 참조하게 된다.
즉, 화살표 함수는 아예 무시해버리고 화살표 함수를 감싸고 있는 lexical scope의 this가 되는 것이다.
여기서는 메소드 호출 형식의 this이므로 호출한 객체 자체가 된다.
(참고: 자바스크립트에서의 this에 대한 설명)

3. 반환값 처리 차이점

• 일반 함수에서는 명시적으로 return 키워드를 사용하여 값을 반환한다.
• 화살표 함수에서는 return 키워드 생략이 가능하다.

화살표 함수는 함수 선언을 간단하게 만들고, this의 처리를 간편하게 해주는 장점이 있다.
하지만, 일반 함수와 다르게 생성자 함수로 사용할 수 없고, 메소드로 사용할 때 this를 바인딩할 수 없다.