일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- nodeValue
- keyup
- modal
- innerText
- UI
- beforeinput
- node
- textContent
- addEventListener
- CSS
- for loop
- ES5
- node.js
- javascript
- js
- react
- es6
- innerHTML
- Temporal dead zone
- Dom
- keyboardEvent
- css:position
- Empty
- yet
- HTML
- dotenv
- Review
- Event
- a11y
- TypingEffect
- Today
- Total
the murmurous sea
JS ES5: reduce() 본문
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
'#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 |