[JavaScript] reduce 개념 사용법 알아보기

Reduce

: reduce() 매서드는 배열의 각 요소에 대해 주어진 함수를 실행, 하나의 결과값을 반환한다. 반환값은 number, object, array 등이 있다. 

 

* reduce는 배열에 적용되는 함수이다. 

 

Reduce의 인자값 

1. 누산기 (acc)

2. 현재값 (cur) 

3. 현재 인덱스 (idx)

4. 원본 배열 (src) 

 

 

 

reduce의 첫 번째 인자값이 reduce의 특징을 잘 말해준다. acc 누산기 = 최종 집합 결과물이라고 생각하면 쉽다, 내가 설정한 함수가 적용된 값이 acc 인자값으로 할당되고 각 ele요소 반복하면서 acc의 값도 계속해서 바뀌게 된다. 

 

처음 개념을 읽었을 때 바로 이해하기 어려웠는데, 아래 예시처럼 console.log를 찍어 어떻게 돌아가는지 눈으로 확인하니 이해가 잘 되었다. 

 

example)

const array2 = [1,2,3,4];

const reduceArray = array2.reduce((sum, ele) => {
  return sum+ele; 
})  // default not defined ===> array2[0]

console.log(reduceArray); // 10

reduce(Fn, defaut value(optional)) 에 default value가 설정되어있지 않으면 배열의 첫 번째 요소를 디폴트값으로 한다. 

위의 예시는 디폴트 값이 없어서 배열의 첫 요소인 1이 sum (결과값) 에 할당되고 그 다음 요소 2 가 더해진 3이 sum에 할당된다. 그리고 다시 3 + 3 = 6이 sum이 되고 마지막으로 6 + 4 = 10이 sum이 되어 return된다. 

 

default value를 0으로 설정한 경우

default값이 0인 경우 0부터 시작한다. 위의 예시보다 한 번 더 돌았다. 

 

default value를 1,000으로 설정한 경우

디폴트 값을 1,000을 주고 1,000 부터 배열의 각 요소들이 더해진다.

 

 

 

 

example2) default 가 배열인 경우

const reduceArray = array2.reduce((result, ele) => {
  console.log(result, ele);
  result.push({key: ele})
  return result;
}, [])

console.log(reduceArray);

디폴트값을 빈 배열로 하고 { key: ele} 인 object를 해당 배열 (result)에 push해 주었다. 최종 result는 위의 console.log와 같이 하나의 배열로 나온다.