[JS] reduce() 사용법

JavaScript로 백준 문제풀이를 하는데 다른 사람들은 reduce()를 사용해서 배열을 처리했다. 그런데 코드를 봐도 무슨 말인지 이해할 수 없었다. reduce 함수를 좀 더 잘 이해하고 사용하기 위해서 정리해보기로 했다.

찾아보다 보니까 reduce 함수는 덧셈을 할 때만 사용하는 함수인 줄 알았는데 생각보다 다양한 활용이 가능하다.

reduce 간단 설명

• reduce는 기본적으로 배열을 하나의 값으로 감소시키는 역할을 한다.
• reduce 로 map,filter 등의 다양한 메서드를 구현 가능하다.

reduce 메서드의 기본적인 사용법은 다음과 같다.

acc - 누적 값

cur - 현재 값

idx - 현재 요소의 인덱스 >> 초기값을 제공하면 0부터, 아니면 1부터 시작한다.

src - reduce()를 호출한 배열

arr.reduce((acc,cur,idx,src)->{
  return 결과
},초기값);

처음 reduce를 보면 도대체 무엇을 위한 것인지 한번에 이해하기가 어렵다.

예제들을 살펴보면서 무슨 reduce 안에서 무슨 일이 일어나는지 파악해보자.

예제 1. 덧셈

reduce는 for문 처럼 배열의 하나하나를 돈다. 이 때 cur는 배열을 순회할 때 현재 값을 뜻하고 acc는 누적된 결과를 뜻한다. 밑의 예시에서 acc + cur를 하는 것은 계속 cur를 누적해간다는 뜻이다.

• 추가로 초기값으로 0을 설정해주면 acc 의 초기값이 0이 되고, 초기값을 제공했기 때문에 idx는 0부터 시작한다.

const input = [1,2,3,4];
const result = input.reduce((acc,cur,idx)=>{
  console.log(acc,cur,idx);
  return acc+cur;
},0)
// 0 1 0
// 1 2 1
// 3 3 2
// 6 4 3
console.log(result); //10

• 초기값을 설정해 주지 않으면 idx는 1부터 시작한다.

const input = [1,2,3,4];
const result = input.reduce((acc,cur,idx)=>{
  console.log(acc,cur,idx);
  return acc+cur;
})
// 1 2 1
// 3 3 2
// 6 4 3
console.log(result); //10

예제 2. 최대값, 최대값의 idx 찾기

acc의 초기값을 꼭 숫자만 설정할 필요는 없다. 아래와 같이 obj로 설정하면 결과를 obj로 출력할 수 있다.

• 초기값 설정해 줬기 때문에 idx는 0부터 시작한다.

const arr = [1,7,3,95,876,44,52]
let max=-9999999;
let result = arr.reduce((acc,cur,idx)=>{
  if(max<cur){
    max = cur;
    acc['maxValue']=cur
    acc['idx']=idx
  }
  return acc;
},{})
console.log(result) // { maxValue: 876, idx: 4}