[JavaScript30] 04 - Array Cardio Day 1

 

소스 코드

JavaScript30/04 - Array Cardio Day 1/index-START.html at master · jisunipark/JavaScript30

 

Today I Learned

Array.prototype.reduce()

reduce 메서드는 사용할 때마다 사용법이 헷갈리는데 이번 기회에 확실히 알아두게 되었다.

 

reduce 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다. 콜백 함수의 첫 번째 인수로 accumulator가, 두 번째 인수로 currentValue가 들어가는 것은 기억해두자.

 

MDN

 

reduce 메서드를 활용해 inventors의 수명을 합산한 결과를 반환하는 코드를 짜보았다.

// 4. How many years did all the inventors live all together?
const totalYears = inventors.reduce(
  (acc, inventor) => acc + (inventor.passed - inventor.year),
  0
);

reduce 메서드의 accumulator로 꼭 숫자가 들어가야 하는 것은 아니다. reduce 메서드를 이용해서 배열을 순회하며 각각의 요소의 개수를 세는 객체를 만들어보는 연습을 해보았다.

이 경우에는 초기값으로 빈 객체를 설정한 뒤 그 객체를 accumulator로 설정해 배열을 순회하며 객체를 채워나가게 하면 된다.

// 8. Reduce Exercise
// Sum up the instances of each of these
const data = [
  'car',
  'car',
  'truck',
  'truck',
  'bike',
  'walk',
  'car',
  'van',
  'bike',
  'walk',
  'car',
  'van',
  'car',
  'truck',
];

const transportation = data.reduce((obj, item) => {
  if (!obj[item]) {
    obj[item] = 0;
  }
  obj[item]++;
  return obj;
}, {});

reduce 메서드를 이렇게 활용할 수 있다는 것은 이번 레슨을 통해 새롭게 알게된 부분이다. 앞으로도 필요한 상황이 있을 때 적절히 사용해볼 수 있겠다.

 

참고

Array.prototype.reduce() - JavaScript | MDN