Reduce에 대한 고찰

목차

• 1. 서론: reduce.. 너 이런놈이었어?
• 2. 본론: reduce의 참된 사용
• 3. 결론: reduce의 강력함

 

📌 서론: reduce.. 너 이런놈이었어?

Javascript를 쓰면서 reduce는 이상하게 잘 사용하지 않았다. 하지만 이제 reduce의 강력함을 알고 그 사용법을 공유하고자 한다.
기본적인 책에서 나오는 reduce문법을 먼저 소개하고 그뒤에 실사용의 예제를 소개하고자 한다.

 

📌 본론: reduce의 참된 사용

기본적인 문법:

 

const temp = [1, 2, 3, 4, 5];

temp.reduce((a, c) => a + c, 0); // 15

 

간단하게 1 부터 5까지 더하는 reduce를 작성해보았다.
reduce의 첫번째 인자로는 call-back function이 들어가게 되고 두번째 인자로는 초기값이 들어가게 된다.

중요한 부분🚨은 여기서 부터 시작된다.
초기값은 그 어떠한 값이 들어갈 수 있다. 예를 들어, array, object...etc가 될수 있다는 것이다.(충격)

그래서 이렇게 사용이 가능해진다.

 

const items = [
  {
    id: 1,
    name: 'banana',
    price: 1,
  },
  {
    id: 2,
    name: 'apple',
    price: 2,
  },
  {
    id: 3,
    name: 'pear',
    price: 3,
  },
  {
    id: 4,
    name: 'orange',
    price: 4,
  },
];

// items를 id를 키값으로 갖는 map alike 형태로 만드려고 한다.
items.reduce((a, c) => {
    a[c.id] = c;
    return a;
  }, {});

// 결과
// {
//   '1': { id: 1, name: 'banana', price: 1 },
//   '2': { id: 2, name: 'apple', price: 2 },
//   '3': { id: 3, name: 'pear', price: 3 },
//   '4': { id: 4, name: 'orange', price: 4 }
// }

 

📌 결론: reduce의 강력함

나는 주로 데이터 형태를 가공할땐 foreach나 map을 많이 사용을 했다.(map alike 형태로 만들거나 많은 경우) 코드의 가독성인 측면에서도 foreach보다는 reduce로 깔끔하게 할수 있었다. 그리고 의미적으로도 여태까지 내가 reduce(어떤 상태에 이르게 하다.)를 사용해야하지만 그렇지 못하였다.

앞으로 reduce의 문법에 맞게 자바스크립트를 사용하겠다고 다짐하면서 글을 마친다.