자바스크립트 - function vs Arrow 함수 무엇을 사용하는 것이 좋을까?

자바스크립트에 함수를 만들 수 있는 방법이 일반적으로 function 함수가 있고 ES6 문법 이후로 Arrow 함수가 생겼습니다.

function 함수

함수를 만드는 일반적인 방법입니다.

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

 

생성자, arguments, prototype 기능이 사용 가능합니다.

함수 선언시에 호이스팅 됩니다.

함수에 이름 있어 직관적으로 사용이 가능하고 디버깅등에 편리합니다.

Arrow 함수

const add = (num1, num2) => { 
   return num + 1
}

화살표 키워드를 이용해서 간편하게 함수를 표현할 수 있습니다.

더 간단히 return 키워드와 중괄호까지 생략할 수 있습니다.

const add = (num1, num2) => num1 + num2;

함수 내의 this는 외부 스코프의 this를 사용합니다.

 

Arrow 함수를 사용하면 안 될 때

1. 객체 내 메서드를 만들 때

var obj = {
   sayHello: () => { // error
      console.log('Hello, Superman');
   }
}

2. ProtoType 사용할 때

function Person() {}

Person.prototype.sayHello = () => { // error
   console.log('Hello');
}

3. 생성자 호출 할 때

const Person = (name) = > {
  console.log('init', name);
}

const superman = new Person('superman') // error

4. Dom 이벤트 핸들러 사용할 때

const button = document.querySelector('button');
button.addEventListener('click', () => {
   // this is not button;
   this.classList.add('active') // error 
})

5. 코드 가독성 떨어질 때

Arrow 함수 사용 시 코드 가독성이 떨어질 수 있습니다.

간편하게 함수를 만들 수 있는 장점이 있지만, 자칫 어떤 기능인지 구분하기 어려울 때가 있습니다.

Arrow 함수는 익명함수이기 때문에 코드 디버깅이 불편합니다.

const findMax = (arr) => arr.reduce((a, b) => a > b ? a : b);

단, ES6 문법인 filter, map의 경우에 화살표 함수를 사용하면 직관적으로 알아볼 수 있어서 사용하면 좋습니다.

 

결론

Arrow 함수를 사용하게 되면, 코드를 간편하고 직관적으로 사용할 수 있습니다.

하지만 function 함수의 모든 기능을 아직 대체할 수는 없습니다.