자바스크립트 filter함수로 배열 특정 요소 거르기, reduce로 객체 배열 내 특정 값 가진 요소 찾기 + 특정 값 더하기

#Filter()

자바스크립트에서 filter()함수는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환하는 역활을 한다.
다음은 MDN의 예시이다.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

위의 코드에서 보다시피, filter는 해당 조건을 맞는 배열의 각 요소들로 새로운 배열을 만들어준다.

나는 이것을 이용해서 모든 유저들 중, 나와 같은 편인 유저들과 적들의 배열을 만들고자 한다.

다음과 같이 구현하였다.

  const myMember = gameData.info.participants.filter(
    (user: IMatch) => user.teamId === Me.teamId
    //모든 participants의 각 user의 teamId 가 나와 동일한 요소들만 뽑아냄
  );
  const eneMember = gameData.info.participants.filter(
    (user: IMatch) => user.teamId !== Me.teamId
  );

#Reduce()

자바스크립트에서 reduece()함수는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다.

reduce()는 배열의 각 요소에 콜백함수를 한번씩 실행한다.

콜백함수는 1) accumulator, 2) currentValue, 3) currentIndex, 4) array, 총 4개의 인자 값을 받는다.

accumulator는 콜백의 반환값을 누적한다.
initialValue가 있는 경우 첫 accumulator값은 initialValue이다.
currentValue 처리할 현재 요소.
currentIndex (옵션) 처리할 현재 요소의 인덱스. initialValue가 있으면 0, 없다면 1부터 시작한다.
array (옵션) reduce()를 호출한 배열.
initialValue (옵션) 콜백의 최초 호출에서 첫 번째 인수에 제공하는 값. initialValue가 없다면 배열의 첫번째 요소를 최초 호출에 사용한다.

#모든 유저 중 가장 데미지를 크게 준 유저 찾기

const maxTaken = gameData.info.participants.reduce(
    (prev: IMatch, current: IMatch) => {
      return prev.totalDamageTaken > current.totalDamageTaken ? prev : current;
      //이전 값과 현재 값을 비교하여 더 큰 값을 가진 객체를 반환
    },
    0
    //초기값 0
  );

#모든 유저들의 골드 더하기

const myTeamMoney = myMember.reduce((prev: number, current: IMatch) => {
    return prev + current.goldEarned;
  }, 0);

#REFERNCE

devCechy - [JAVASCRIPT] 모든 배열의 요소 더하기 – REDUCE()