[React/js] Array.reduce()

reduce() 메서드는 

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

 

*리듀서(reducer) : 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수.

 

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

// 0 + 1 + 2 + 3 + 2
const initialValue = 0;
const sumWithInitial = array1.reduce(
	(previousValue, currentValue) => previousValue + currentValue,
    initialValue
);

console.log(sumWithInitial);
// expected output : 10

 

리듀서 함수는 네 개의 인자를 가진다.

- 누산기 (acc)

- 현재 값 (cur)

- 현재 인덱스 (idx)

- 원본 배열 (src)

 

리듀서 함수의 반환 값은 누산기에 할당되고,

누산기는 순회 중 유지되므로 결국 최종 결관느 하나의 값이 된다.

 

arr.reduce(callback, [, initialValue])

매개변수

- callback 

  : 배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 받는다.

    1. accumulator

        : 누산기는 콜백의 반환값을 누적한다.

          콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값이다.

    2. currentValue

        : 처리할 현재 요소

    3. currentIndex ( optional )

        : 처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 또는 1부터 시작한다.

    4. array ( optional )

        : reduce() 를 호출한 배열

 

- initialValue ( optional )

  : callback 의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용한다.

    빈 배열에서 초기값 없이 reduce()를 호출하면 오류 발생.

 

 

 

나의 경우 두 배열을 하나의 오브젝트로 합치기 위해 사용했다.

const keys = ['name', 'age'];
const values = ['jiwon', '26'];

const result = keys.reduce((acc, curr, idx) => {
	acc[curr] = values[idx];
    return acc;
}, new Object);

console.log(result);
// { name : "jiwon", age : "26" }

 

---

참고사이트

 

https://velog.io/@zayong/Reducer%EB%9E%80

Reducer란

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Array.prototype.reduce() - JavaScript | MDN

https://miiingo.tistory.com/365

[Node.js] javascript: Array.reduce() 사용 방법 정리

https://ingnoh.tistory.com/133

[JS] 두 배열을 하나의 오브젝트로 합치기