JavaScript reduce break 하기

JavaScript reduce break 하기

 

JavaScript reduce란?

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

Array.prototype.reduce() - JavaScript | MDN

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

 

JavaScript에서 배열을 합을 구하기 위해 Array.prototpye.reduce()를 사용할 수 있다.

const array1 = [1,2,3,4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expect output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer,5));
// expect output: 15

 

MDN을 참고하면 Array.reduce() 데모를 이렇게 나타내고 있다.

reduce에서 accumulator에는 누적합이 들어가게 되고, currentValue는 각각의 값이 들어가게 된다.

두번째인자가 생략된 경우에는 accumulator가 0으로 할당되고, reduce(reducer,5) 와 같이 두번째인자는 처음 accumulator에 해당 값을 할당하게 된다.

그래서 위와 같은 결과를 볼 수 있게 되고, 별도의 reducer를 만들지 않을 땐,

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

// 1 + 2 + 3 + 4
console.log(array1.reduce((accumulator, currentValue) => accumulator + currentValue))
// expected output: 10

이렇게 한 줄로도 만들 수 있다. 

 

 

리듀서함수의 인자

1. 누산기(acc)

2. 현재값(cur)

3. 현재 인덱스(idx)

4. 원본 배열(src)

리듀서 함수의 반환 값은 누산기에 할당, 누산기는 순회 중 유지되어 최종 결과는 하나의 값이 리턴

누산기(acc)	누산기는 콜백의 반환값을 누적 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값
현재값(cur)	처리할 현재 요소
현재 인덱스(idx)	처리할 현재 요소의 인덱스, initialValue를 제공한 경우 0, 아니면 1
원본 배열(src)	원본 배열

 

 reduce() 작동방식

완전한 함수 사용

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

 

화살표 함수 사용

[0, 1, 2, 3, 4].reduce( (prev, curr) => prev + curr );

 

실행결과

call-back	accumulator	currentValue	currentIndex	array	반환값
1번째 호출	0	1	1	[0,1,2,3,4]	1
2번째 호출	1	2	2	[0,1,2,3,4]	3
3번째 호출	3	3	3	[0,1,2,3,4]	6
4번째 호출	6	4	4	[0,1,2,3,4]	10

 

reduce() break

for문이나 while문을 사용할 때, 조건에 맞춰 break를 해야할 때가 있다.

reduce()를 사용할 때는 어떻게 해야할까?

 

for문에서 break 사용예시

for (let i = Things.length - 1; i >= 0; i--) {
	if(Things[i] <= 0) {
    	break;
    }
};

 

reduce문에서 break 사용법?

Things.reduce(function(memo, current){
  if(current <= 0){
    //break ???
    //return; <-- this will return undefined to memo, which is not what I want
  }
}, 0)

 

당연히 이렇게하면 작동하지 않는다.

 

reduce function은 4번째 인자인 array를 mutating하기 때문에 이를 이용해서 종료할 수 있다.

const array = ['12', '34', '56', '78', '99'];
const x = array
.reduce((acc, curr, i, arr) => {
    if(i === 2) arr.splice(1);  // eject early
    return acc += curr;
  }, '');
console.log('x: ', x);  // x:  123456

 

https://stackoverflow.com/questions/36144406/how-to-early-break-reduce-method

How to early break reduce() method?