[javascript] 화살표함수(arrow function)

이제껏 함수 표현식이나 선언식으로 쓰는게 익숙했는데, 화살표 함수 쓰는 버릇을 들여야겠다.

화살표 함수란?

화살표 함수(arrow function)는 function 키워드를 화살표로 축약해서 표시하는 함수를 표시하는 다른 방법이다. ES6에서 새로 도입되었다.

함수 표현식

const add = function (x,y) {
  return x+y;
}

화살표 함수

const add = (x,y) => {
  return x+y;
}

화살표함수 특징

1) 함수 본문에 return문만 존재할 경우, return 생략 가능

함수 body에 return문만 존재할 때 return을 생략하고 쓸 수 있다. 이때 중괄호({})도 생략해서 써야 정상 작동된다.

//정상 
const add = (x,y) => x + y;
add(4,5); //리턴값 : 9

//비정상
const add = (x,y) => { x + y }; 
add2(4,5);  //리턴값 : undefined 

2) 소괄호(parentheses)를 사용하는 것은 가능

return 생략시 중괄호도 생략해야했지만 대신, 소괄호를 써서 나타낼 수 있다. (optional)

const add = (x, y) => (x + y);
add(3,2); //리턴값 : 5

함수 내 표현식이 두 줄 이상일 경우에는 return을 생략하기 보다는 중괄호(curlybrace)와 return을 명시적으로 써주는 것이 좋다.

함수 표현식

const getStudentAvg = function (arr) {
  return arr.filter(function(person) {
    return person.job === 'student';
  }).reduce(function(sum, person) {
    return sum + person.grade
  }, 0);
}

화살표 함수

// bad
const getStudentAvg = arr => arr.filter(person => person.job === 'student').reduce((sum, person) => (sum + person.grade),0);

// good
const getStudentAvg = arr => {
  return arr.filter(person => person.job === 'student').reduce((sum, person) => (sum + person.grade),0);
}

화살표 함수 예시

화살표 함수는 클로저를 표현할 때 가시성이 좋다.

함수표현식

const adder = function(x) {
  return function(y) {
    return x+y;
  }
}

adder(5)(7); //12

화살표 함수
단계적으로 적용해보기

1. function 키워드 없애기

const adder = (x) => {
  return (y) => {
    return x+y;
  }
}

2. 안쪽 return 없애보기
   return을 생략할 때 중괄호도 없애준다.
   함수의 파라미터가 하나일때는 소괄호를 생략하고 쓰기

const adder = x => {
  return y => x+y;
}

3. 남은 return 없애보기

const adder = x => y => x+y;