자바스크립트 reduce 사용방법 정리 팁!

자바스크립트로 코딩테스트 문제를 풀다보면 항상 for...forEach등을 자주쓰게 된다.

뭔가 자연스럽게 생각을 하기도전에 내 손가락은 for(let i = 0; i < ....을 치고 있다 ㅋㅋㅋㅋㅋㅋ

프로그래머스, 백준 문제풀이들을 볼때마다 reduce, filter를 많이 사용하는걸보고 난 왜 저렇게 생각을 못할까? 라는 생각이 들었다..!

아직 내 뇌는 for만 생각을 하고 있는 것 같다... 그래서 사용방법들을 정리하면서 이제 내 머리에 넣어보려고 한다ㅠㅠ!

 

reduce는 4가지의 인수를 가진다.

그렇기 때문에 사용하기 전에도 거부감이 먼저 들었던거 같다..

4가지 인수는 다 사용할 필요도 없는데 말이야...!

 

가장 좋은 예만 봐도 사용하기에 정말 좋았다.

1부터 10까지의 배열을 가지고 있는 모든 값을 더할때! 배열값 모두 더하기

이럴때는 항상 for문을 통해서 length만큼 +=더해지는 코드를 작성했었다.

 

reduce로 배열 값 더하기

let num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let sum = num.reduce((arr, res) => arr + res)

console.log(sum) // 55

이렇게 간단한 코드 한줄이면 num배열의 모든 값을 더해서 출력한다. 첫번째 파라미터에는 콜백함수의 반환값이 누적된다. 그리고 두번째 파라미터에는 배열의 인수가 순서대로 들어간다고 생각하면 된다.

arr = 1 // res = 2

arr = 3 // res = 3

arr = 6 // res = 4

arr = 10 // res = 5 ...

이런식으로 모든 배열 값을 더한다.

 

그리고 인덱스 값을 구하고 싶은 문제가 있으면 세번째 인수를 넣어서 인덱스도 도출할 수 있었다.

const num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let sumidx = 0;
let arrsum = 0;
const sum = num.reduce((arr, res, i) => {
  arrsum = arr + res;
  if (arrsum == 45) {
    sumidx = i;
  }
  return arrsum;
});

console.log(sum); // 55
console.log(sumidx); // 8 : 배열의 8번째에 arr45가 같다.

만약 배열에서 숫자들을 더하면서 조건을 걸고 index를 받을 수 있다.

 

 

객체를 가진 배열에서 특정 값 더하기

const num = [
  {
    first: "hong",
    second: "gildong",
    age: 27,
    job: true,
  },
  {
    first: "kim",
    second: "minsu",
    age: 29,
    job: true,
  },
  {
    first: "sin",
    second: "yuli",
    age: 23,
    job: false,
  },
];

const agesum = person.reduce((arr, person_age) => {
  return arr + person_age.age;
}, 0);

console.log(agesum); // 79

객체 배열에서 값들을 더하게 된다면? 특정 프로퍼티의 값들을 구할 수 있다.

여기서 중요한게 initialValue값을 명시해줘야하는데 모든 객체의 값을 구하려면 0을 넣어줘야 한다.

0을 넣지 않으면 2번째 배열부터 시작한다.

만약 0을 넣지 않으면 error가 발생한다.

 

앞으로 reduce를 활용해서 문제를 많이 푸는 연습을 해봐야겠다.!