the murmurous sea

JS ES5: reduce() 본문

#dev/개념정리

JS ES5: reduce()

lunacer 2020. 4. 30. 12:58

1. Method
2. Reduces the array to a single value.
3. Executes a provided function for each value of the array (from left-to-right).
4. The return value of the function is stored in an accumulator (result/total).
   : value is remembered across each iteration throughout the array and ultimately becomes the final, single resulting value.
5. Does not execute the function for array elements without values.
6. Does not change the original array.
7. Almost always safer to provide an initialValue, because there can be up to four possible output types without initialValue.

let maxCallback = ( acc, cur ) => Math.max( acc.x, cur.x );
let maxCallback2 = ( max, cur ) => Math.max( max, cur );

// reduce without initialValue
[ { x: 2 }, { x: 22 }, { x: 42 } ].reduce( maxCallback ); // NaN
[ { x: 2 }, { x: 22 }            ].reduce( maxCallback ); // 22
[ { x: 2 }                       ].reduce( maxCallback ); // { x: 2 }
[                                ].reduce( maxCallback ); // TypeError

// map & reduce with initialValue; better solution, also works for empty or larger arrays
[ { x: 22 }, { x: 42 } ].map( el => el.x )
                        .reduce( maxCallback2, -Infinity );

[Syntax]

arr.reduce(callback( accumulator, currentValue[, index[, array]] )[, initialValue])
callback Required.  A function to be run for each element in the array.
accumulator Required.
accumulates callback's return values. 
: It is the accumulated value previously returned in the last invocation of the callback(or initialValue).
currentValue Required.
The value of the current element being processed in the array.
index Optional.
The array index of the current element being processed in the array.
Starts from index 0 if an initialValue is provided.
Otherwise, it starts from index 1.
array Optional.
The array object the current element belongs to.
(The array reduce() was called upon.)
: why need this argument?
initialValue optional A value to be passed to the function as the initial value.
A value to use as the first argument to the first call of the callback.
If no initialValue is supplied, the first element in the array will be used as the initial accumulator value and skipped as currentValue
Calling reduce() on an empty array without an initialValue will throw a TypeError.


[Return Value]

: The single accumulated value that results from the last call of the callback function.

[Replace .filter().map() with .reduce()]

: Using Array.filter() then Array.map() traverses the array twice.
: but you can achieve the same effect while traversing only once with Array.reduce(), thereby being more efficient.
: If you like for loops, you can filter and map while traversing once with Array.forEach().


https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

https://www.w3schools.com/jsref/jsref_reduce.asp

'#dev > 개념정리' 카테고리의 다른 글

HTML, JS: DOM  (0) 2020.05.01
callback  (0) 2020.05.01
JS ES1: sort()  (0) 2020.04.30
JS ES5: filter  (0) 2020.04.29
JS ES5: forEach vs map  (0) 2020.04.29
Comments