=> / 화살표 함수 (arrow function expression)

함수를 화살표로 표시한다.

화살표 함수 - JavaScript | MDN

 function 표현에 비해 구문이 짧고  자신의 this, arguments, super 또는 new.target을 바인딩 하지 않습니다.

 이  함수 표현은 메소드 함수가 아닌 곳에 가장 적합하다.

구문)

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
// 다음과 동일함:  => { return expression; }

// 매개변수가 하나뿐인 경우 괄호는 선택사항:
(singleParam) => { statements }
singleParam => { statements }

// 매개변수가 없는 함수는 괄호가 필요:
() => { statements }

고급 구문은 MDN에서 확인.

함수 비교하기

1. 일반적인 함수.

var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

elements.map(function(element) {
  return element.length;
});
// [8, 6, 7, 9]

2. 위의 일반적인 함수 표현은 아래 화살표 함수로 쓸 수 있다.

elements.map((element) => {
  return element.length;
}); 
// [8, 6, 7, 9]

3. 파라미터가 하나만 있을 때는 주변 괄호를 생략할 수 있다.

elements.map(element => {
  return element.length;
}); 
// [8, 6, 7, 9]

4. 화살표 함수의 유일한 문장이 'return'일 때 'return'과 중괄호({})를 생략할 수 있다.

elements.map(element => element.length); 
// [8, 6, 7, 9]

5. 이 경우 length 속성만 필요하므로 destructuring 매개변수를 사용할 수 있다.

 

elements.map(({ length: lengthFooBArX }) => lengthFooBArX); 
// [8, 6, 7, 9]

 

'length'는 우리가 얻고자 하는 속성에 해당하는 반면, lengthFooBArX'는 변경 가능한 변수의 이름일 뿐이므로
원하는 유효한 변수명으로 변경할 수 있다.

6. destructuring 파라미터 할당도 아래와 같이 작성할 수 있습니다.

elements.map(({ length }) => length); 
// [8, 6, 7, 9]

이 예에서 정의한 객체내의 'length'에 값을 지정하지 않은 점에 주목하세요. 
대신, "length" 변수의 리터럴 이름은 우리가 해당 객체에서 꺼내오고 싶은 속성이름 자체로 사용됩니다.

 

예시)

const materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

console.log(materials.map(material => material.length));
// expected output: Array [8, 6, 7, 9]