[Javascript]Regular Function vs Arrow Function

개요

ES6에서 Arrow Function이 새롭게 추가됨으로써 자바스크립트(Javascript)에서는 Regular function과 Arrow function 두 가지 방식을 통하여 함수를 정의할 수 있게 되었습니다.

function을 명시적으로 정의하는 예

function hello(name) {
  return `Hello ${name}`;
}

const Hello = function(name) {
  return `Hello ${name}`;
}

Arrow function 문법을 사용한 예

const Hello = (name) => {
  return `Hello ${name}`;
}

Regular function과 Arrow Function은 함수를 정의한다는 방식에서는 동일하나,
차이점을 가지고 있기 때문에 두 문법을 사용하는데 있어 상황에 맞게 사용해야 됩니다.

Regular Function vs Arrow Function

이 두가지의 함수 정의 방법은 어떠한 차이점을 가지고 있는지는 다음과 같습니다.

생성자

Regular function에서는 new를 호출하여 생성자를 만들 수 있습니다.

function Foo() {
}

const foo = new Foo();
foo instanceof Foo;

Arrow function는 new를 호출하여 생성자를 만들수 없습니다.

const Foo = () => {};
const foo = new Foo(); // TypeError: Foo is not a constructor

new를 호출하여 생성자를 만들고자 한다면 TypeError: Foo is not a constructor과 같은 에러가 출력됩니다.

this의 값

Regular function에서 this는 상황에 따라 다른 값을 가지게 됩니다.

일반적인 함수에서 this는 window 값을 가지게 됩니다.

function Foo() {
  console.log(this);
}

Foo(); // window

객체 내 함수를 정의한 경우에는 this는 객체 자신을 가지게 됩니다.

const obj = {
  method() {
    console.log(this);
  }
};
// Method invocation
obj.method(); // obj

new를 호출하여 생성자를 만들 경우 this는 새롭게 생성된 instance를 가지게 됩니다.

function Foo() {
  console.log(this);
}

new Foo(); // instance of Foo

call 또는 apply를 통한 함수를 호출하는 경우에는 this는 함수의 argument값을 가지게 됩니다.

function Foo() {
  console.log(this);
}

const context = { id: 'a' };

Foo.call(context);  // { id: 'a' }
Foo.apply(context); // { id: 'a' }

Arrow function에서는 this는 항상 상위 scope의 this를 가리키게 됩니다.

const obj = {
  arrowMethod: () => {
    console.log(this);
  },
  regularMethod: function() {
    const callback = () => {
      console.log(this);
    }
    callback();
  }
}

obj.arrowMethod();  // window
obj.regularMethod();  // obj

const obj = () => {
  console.log(this);
}

obj();  // window

참고자료

https://dmitripavlutin.com/differences-between-arrow-and-regular-functions/
(MDN Web Docs: 화살표 함수)[https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98]