JavaScript > ES6 > Arrow Functions (화살표 함수에 대해서)

일반적인 자바스크립트 함수

function add(a) {
 return a;
}

기본문법

const functionName = (parameter1, parameter2) => {
  // function body
  return someValue;
};

 

두 숫자를 더하는 화살표 함수

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

console.log(add(2,3));

 

단축문법

 

단일 표현식인 경우 중괄호{}와 return 생략 가능

const add = (a,b) => a+b;

 

매개 변수가 하나인 경우 괄호 생략 가능

const square = a => a * a;

 

매개 변수가 없는 경우 빈 괄호() 를 사용한다.

const greet = () => console.log('Hello World!');

 

 

화살표 함수 사용시 주의점

 

- 화살표 함수에서의 this는 항상 부모(화살표 함수를 품고 있는)를 참조한다. 따라서 객체 메서드에서 화살표 함수 사용시 주의해야 함.

- 생성자 함수로 사용 못함.

-  arguments 객체를 사용할 수 없음. 대신에 rest  매개변수 (...args) 를 사용함.

 

일반 함수에서 argument 객체 사용 방법.

function sum() {
 let total = 0;
 for (let i = 0; i < arguments.length; i++) {
  totoal += arguments[i];
 }
 return total;
}

console.log(sum(1,2,3,4));

 

화살표 함수에서는 arguments 개체를 사용할 수 없기 때문에 rest 매개 변수 사용 ...으로 표현함.

const sum = (...args) => {
 let total = 0;
 for (let i = 0; i < args.length; i++) {
  total += args[i];
 }
 return total;
 };
 
 console.log(sum(1,2,3,4));

 

reduce 메서드를 사용해서 더 간단하게

const sum = (...args) => args.reduce((result, number) => result + number, 0);

console.log(sum(1,2,3,4));