[JavaScript] map, filter (ft.같이 사용하기)

개요

객체 배열에서 특정 속성값을 변경하고 특정 조건에 해당하는 리스트만 거르고 싶었다

예를 들어 id가 1~10까지는 group이 vegetable이고
11~20까지는 fruit인 경우
grape의 group을 fruit으로 바꾸고 fruit만 출력해보자!

let market = [
  { id: 10, name: 'potato', group: 'vegetable' },
  { id: 12, name: 'apple', group: 'fruit' },
  { id: 11, name: 'grape', group: 'vegetable' },
  { id: 14, name: 'banana', group: 'fruit' }
];

filter()

market = market.filter(item => item.id > 10)

// [
//    { id: 12, name: 'apple', group: 'fruit' },
//    { id: 11, name: 'grape', group: 'vegetable' },
//    { id: 14, name: 'banana', group: 'fruit' }
//   ]

map()

market.map(item => {
  if(item.id > 10 && item.group !== 'fruit') {
    item.group = 'fruit';
  }
});

// [
//    { id: 10, name: 'potato', group: 'vegetable' },
//    { id: 12, name: 'apple', group: 'fruit' },
//    { id: 11, name: 'grape', group: 'fruit' },
//    { id: 14, name: 'banana', group: 'fruit' }
//   ]

map과 filter 같이 사용하기

market = market.filter(item => item.id > 10);
market.map(item => {
  if (item.group !== "fruit") {
    item.group = "fruit";
  }
});

위 코드를 합치면 아래 코드처럼 된다

market = market
  .filter(item => item.id > 10)
  .map(item => {
    return { ...item, group: item.group !== "fruit" ? "fruit" : item.group };
  });

// [
//    { id: 12, name: 'apple', group: 'fruit' },
//    { id: 11, name: 'grape', group: 'fruit' },
//    { id: 14, name: 'banana', group: 'fruit' }
//   ]

참고

map, reduce, filter를 유용하게 활용하는 15가지 방법