Map, Filter, Find, Reduce

map()

프로젝트를 진행하면서 가장 많이 사용했던 메소드였고,
주로 사용하던 방식은 데이터를 받아 처리하는 과정에서 사용했었다.
간단히 설명하면 각각의 요소에 대해 한번씩 순서대로 호출하여 반환한다.
어렵게 말하면 콜백 함수의 리턴을 모아 새로운 배열을 만든다.

const accountList = [1, 2, 3, 4, 5, 6];
accountList.map((row) => console.log("accountNumber" + row));

// 위 코드는 기본 문법.

import Transaction from 'Transaction';
const accountList = [1, 2, 3, 4, 5, 6];
...
return (
  <div>
	{accountList.map((row, index) => <Transaction key={index} {...item} />);
  </div>
);

컴포넌트를 import해서 props를 전달하여, 리스트 형태의 목록을 출력하였다.

동일한 컴포넌트를 사용하고 싶은데, json의 key값이 다를 경우에 원하는 key로 변경하여 사용하였다.

const noticeList = eventList.map((row) => {
    return {
      원하는 key: row.eventNumber,
      원하는 key: row.eventTitleCount,
    };
  });

이처럼 map() 메소드의 활용 용도는 다양하며, 부모 스코프에 영향을 미치지 않기 때문에 map() 메소드를 권장합니다.

filter()

filter() 메소드는 배열내에 조건에 충족되는 요소들을 모아 새로운 배열을 만들때 사용한다.

const userInfo = [
  {id:1, name:'kang1'},
  {id:2, name:'kang2'},
  {id:3, name:'kang3'},
  {id:4, name:'kang4'},
];
const userSelected = userInfo.filter( (item) => item.name.includes('sb'));
console.log(userSelected) // []

위의 코드를 실행해보면 includes() 매소드를 사용하여 특정 요소를 포함하는지 테스트를 해보았고 찾는 요소가 없다면 console의 결과값은 [] 빈 배열인 걸 확인할 수 있다.

find()

find() 메소드는 단 하나의 요소만 리턴하며 콜백 함수의 리턴이 true인 요소를 찾을 때까지만 순회하며 끝나며, 발견하지 못할 경우에 undefined를 반환합니다.

const userInfo = [
  {id:1, name:'kang1'},
  {id:2, name:'kang2'},
  {id:3, name:'kang3'},
  {id:4, name:'kang4'},
];
const userSelected = userInfo.find( (item) => item.name.includes('kang3'));
console.log(userSelected) // {id:3, name:'kang3'}

filter, find 매소드는 비슷한 듯 하지만 위 코드를 보면 filter()는 값을 찾지 못할 경우에 빈 배열을 반환하며, find()는 undefined를 반환하였다.

reduce

reduce() 메소드는 위에서 설명한 메소드를 모두 대체 할 수 있는 메소드이며,
누산기, 현재 값, 현재 인덱스, 원본 배열 이렇게 네 개의 인자를 가집니다.
누산기는 컴퓨터의 중앙처리장치에서 더하기, 빼기, 곱하기, 나누기 등의 연산을 한 결과 등을 일시적으로 저장해 두는 레지스터를 누산기라고 합니다.
그럼 reduce() 메소드는 반환하는 값은 누산기에 할당되고, 누산기는 순회 중이므로 최종 결과는 하나의 값이 됩니다.

const arr = [1,2,3,4];
const reducer = arr.reduce((acc, currValue) => acc + currValue);
console.log(reducer); // 10

위 코드를 보면 acc는 누산되는 값이며, currValue는 현재 값이다.
그렇다면 코드를 뜯어서 나열하게 된다면
1. acc:1, currValue:2, return(반환 값) : 3,
2. acc:3, currValue:3, return(반환 값) : 6,
3. acc:6, currValue:4, return(반환 값) : 10,
최종 acc에는 curr의 마지막 값이 계산되어, reduce는 10을 반환한다.