javascript 자바스크립트 reduce() 함수 알아보기

reduce 메소드는 배열 각 요소를 돌면서 새로운 하나의 결과값을 반환합니다.

아..!일단 배열의 원소들을 순회하고 무언가의 새로운 값을 반환하는구나..

라고 생각하시고 예제들을 살펴볼게요 ~~

reduce 에는 콜백함수와 초깃값이 있어요

콜백함수에서 4개의 매개변수를 사용할 수 있고 

초깃값을 비워넣거나 설정해놓을 수 있죠

유심히 봐주시길 바랍니다 (중요중요)

배열.reduce(function(누적값, 현잿값, 인덱스, 요소) { 

    return 결과 

}, 초깃값);

1.누적값 (accumulator) 

return 값을 누적합니다.

초깃값을 제공한 경우에는 초기값의 값으로 시작합니다.

2.현재값 (currentValue) 

배열에 현재 요소 입니다

3.인덱스 (currentIndex)

현재 요소의 인덱스 입니다. 초깃값을 제공한 경우 0, 아니면 1부터 시작합니다. 

4.요소 (array)

reduce를 호출하고 있는 현재 배열입니다.

5.초깃값 (initialValue)

콜백을 호출할때 누적값에 제공하는 값입니다.

초깃값을 제공 할 경우 콜백호출 시 초깃값으로 사용되고 제공하지 않으면 배열의 첫번째요소를 사용합니다.

(빈 배열로 reduce를 호출하면 오류)

1.초깃값 (initialValue)이 제공 된 경우

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {

  return accumulator + currentValue;

}, 10)

위의 예제로 볼게요

초깃값이 제공된 경우입니다. 지금 10이 제공되어있죠?

그럼 accumulator는 10인 상태입니다.

이상태로 배열 원소를 순회하기 시작해요.

	

 
[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  //1 번째 순회 
  console.log(accumulator :10,currentValue:0)
  return accumulator + currentValue; // 10 + 0 = 10
  //2 번째 순회 
  console.log(accumulator :10,currentValue:1)
  return accumulator + currentValue; // 10 + 1 = 11
  //3 번째 순회 
  console.log(accumulator :11,currentValue:2)
  return accumulator + currentValue; // 11 + 2 = 13
  //4 번째 순회 
  console.log(accumulator :13,currentValue:3)
  return accumulator + currentValue; // 13 + 3 = 16
  //5 번째 순회 
  console.log(accumulator :16,currentValue:4)
  return accumulator + currentValue; // 16 + 4 = 20
 
}, 10)
 

reduce가 순회하면서 return 값은 accumulator에 할당되고, accumulator는 순회 중 유지되므로

결국 하나의 값이 됩니다.

배열이 reduce를 호출할때 순회하면서 매개변수 accumulator에 반환값이 누적된다 

라는 것을이해하시면 다른 예제도 쉽게 이해가능하실거에요

2.초깃값 (initialValue)이 제공 되지 않은 경우

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {

  return accumulator + currentValue;

},)

1번 보시면 초깃값을 제공했죠? 근데 위에 예제처럼 제공을 안 할 수도 있습니다.

그런데 그럴 경우 다르게 동작 된다는 사실!!

	

 
[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  //1 번째 순회 
  console.log(accumulator :0,currentValue:1)
  return accumulator + currentValue; // 0 + 1 = 1
  //2 번째 순회 
  console.log(accumulator :1,currentValue:2)
  return accumulator + currentValue; // 1 + 2 = 3
  //3 번째 순회 
  console.log(accumulator :3,currentValue:3)
  return accumulator + currentValue; // 3 + 3 = 6
  //4 번째 순회 
  console.log(accumulator :6,currentValue:4)
  return accumulator + currentValue; // 6 + 4 = 10
})
 

제공 되지 않을 경우엔 누적값이 배열의 첫번째요소로 사용됩니다.

그리고 index 값이 1로 시작됩니다.

첫번째 index인 0을 건너 뛰고 1부터 시작하는거죠.

!알아두어야 할게

배열이 비어있는데 초깃값을 제공하지 않으면 에러가 발생합니다.

배열의 요소가 하나인데 초깃값을 제공하지 않는경우 , 

초깃값은 주어졌으나 배열이 비어졌을 경우엔 그 하나의 단독 값을 반환합니다.

reduce를 사용하여 배열을 객체로 바꿀 수 있어요

	

	const arr = [1,2,3,4,5];
	const obj = arr.reduce(function(acc,el,idx){
	 acc[el] = el 
	return acc
	},{})

초깃값에 객체 리터럴 을 넣어주면 됩니다!

이번 포스팅은 reduce가 어떻게 사용되는지 알아보았어요

조금 더 심화된 과정은 따로 포스팅 하도록 하겠습니다.