1회차 - 08 ES6 문법 - Arrow function

=> : 이것이 Arrow function

기존 자바스크립트 + ES5문법의 filter을 사용한 코드를 보자.

const years = [
  {
    year : 2000,
    data : '크리스마스',
  },
  {
    year : 2005,
    data : '설날',
  },
  {
    year : 2010,
    data : '광복절',
  },
  {
    year : 2015,
    data : '추석',
  },
];


// 함수 생성 - ES5 형식
const result = years.filter(function(data){
  return data.year > 2008;
});

// 실행
console.log(result);

출력결과

[ { year: 2010, data: '광복절' }, { year: 2015, data: '추석' } ]

이렇게 함수를 만들어서, 배열에 들어있는 값을 가지고 왔어야했는데
arrow function이 이를 다음처럼 개선시켰다.

const years = [
  {
    year : 2000,
    data : '크리스마스',
  },
  {
    year : 2005,
    data : '설날',
  },
  {
    year : 2010,
    data : '광복절',
  },
  {
    year : 2015,
    data : '추석',
  },
];


// 함수 생성 - ES6 형식
const result = years.filter((data) => data.year > 2008 );

// 실행
console.log(result);

2가지 비교

// 함수 생성 - ES5 형식
const result = years.filter(function(data){
  return data.year > 2008;
});

// ES6 형식
const result = years.filter((data) => data.year > 2008 );

화살표함수를 더 알아보려면?

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션

화살표 함수를 제대로 알기위해선, 배열 등 연결형데이터의 메소드들을 알아둬야한다.

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

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

화살표 함수는 배열에서만 사용 가능?

• https://poiemaweb.com/es6-arrow-function
  아니다. 배열에서 많이쓰는거지 그런건 아니다.

상황 1 : 제곱하는 함수를 구현할 경우

// ES5
var pow = function (x) { return x * x; };
console.log(pow(10)); // 100

// ES6
const pow = x => x * x;
console.log(pow(10)); // 100

상황 2 : 배열을 각각 제곱할 경우(마치 파이썬의 comprehension과 map 함수)

• https://wikidocs.net/22#_1
• https://wikidocs.net/32#map
• https://dojang.io/mod/page/view.php?id=2286
• https://dojang.io/mod/page/view.php?id=2360

// ES5
var arr = [1, 2, 3];
var pow = arr.map(function (x) { // x는 요소값
  return x * x;
});

console.log(pow); // [ 1, 4, 9 ]

// ES6
const arr = [1, 2, 3];
const pow = arr.map(x => x * x);

console.log(pow); // [ 1, 4, 9 ]

정리한 내용은 이 정도지만, 추가 링크를 통해 알게된 사용법과 주의사항 및 활용이 바로 이해되진 않는다.
여태 공부한 ES6 중 가장 어려운 듯 하다.