This content originally appeared on DEV Community and was authored by Alfredo Salzillo ?
In this article, we will show that the only collection method you need is the Array.prototype.reduce.
Note that this is only to demonstrate all the other methods are only a special case of the reduce.
Only Array methods that don't change the original array will be demostrated.
What is the Array.prototype.reduce
The reduce method is a function that transforms a collection (array) of elements into a single value.
A single value can also be another collection.
We can divide the application of the reduce into 3 equivalent classes.
- Type 1 reduce that returns a single Object/number/string, that reduce the collection to another type
- Type 2 reduce that returns another collection with the same number of elements
- Type 3 reduce that returns another collection with a different number of elements
// Type 1: the sum of the elements of an array
const sum = [1, 2, 3].reduce((acc, value) => acc + value, 0)
// Type 2: convert an array of number to an array of strings
const strings = [1, 2, 3].reduce((acc, value) => [...acc, String(1)], [])
// Type 3: remove even elements
const randoms = [1, 2, 4].reduce((acc, value) => {
if (value%2 === 0) return acc
return [...acc, value]
}, [])
Implemtations
Array.prototype.map
The map method creates a new array with the results of calling a function for every array element.
It is useful to transform all the elements of an array.
Example
// calculate the spare root of all the elements of the array
const result = [4, 9, 16].map((value) => Math.sqrt(value)) // => [2, 3, 4]
It's a Type 2 reduce that return always the same number of elements.
Implementation using reduce:
const map = (array, callbackfn) => array
.reduce((acc, value, i, thisArg) => [...acc, callbackfn(value, i, thisArg)], [])
Array.prototype.filter
The filter method creates an array filled with all array elements that pass a test (provided as a function).
Example
// return all the even elements
const result = [1, 2, 3].filter((value) => value % 2 === 0) // => [2]
It's a Type 3 reduce that can return an array with a different number of elements.
Implementation using reduce:
const map = (array, predicate) => array
.reduce((acc, value, i, thisArg) => {
if (predicate(value, i, thisArg)) return [...acc, value];
return acc;
}, [])
Array.prototype.some
The some method checks if any of the elements in an array pass a test (provided as a function).
Example
// check if the array contains an even number
const containsAnEven = [1, 2, 3].some((value) => value % 2 === 0) // => true
It's a Type 1 reduce that returns a single value, in this case, a boolean.
Implementation using reduce:
const some = (array, predicate) => array
.reduce((acc, value, i, thisArg) => (acc || predicate(value, i, thisArg)), false)
Array.prototype.every
The every method checks if all the elements in an array pass a test (provided as a function).
Example
// check if all the elementens of the array are even number
const allEven = [1, 2, 3].some((value) => value % 2 === 0) // => false
It's a Type 1 reduce that returns a single value, in this case, a boolean.
Implementation using reduce:
const every = (array, predicate) => array
.reduce((acc, value, i, thisArg) => (acc && predicate(value, i, thisArg)), true)
Array.prototype.join
The join method returns an array as a string concatenating the elements using a separator.
Example
// join all strings using a space
const helloDevs = ['Hello', 'Devs'].join(' ') // => "Hello Devs"
It's a Type 1 reduce that returns a single value, in this case, a string.
Implementation using reduce:
const join = (array, separator) => array
.reduce((acc, value, i, thisArg) => (acc + separator + value), '')
Array.prototype.flat
The flat method creates a new array with the elements of the subarrays concatenated into it.
Example
const results = [1, [2, 3]].flat() // => [1, 2, 3]
It's a Type 3 reduce that can return an array with more elements than the original.
Implementation using reduce:
const flat = (array, level = 1) => array
.reduce((acc, value, i, thisArg) => {
if (!level) return [...acc, value]
if (Array.isArray(value)) return [...acc, ...flat(value, level - 1)]
return [...acc, value]
}, '')
? Please give me some feedback in the comments ?
This content originally appeared on DEV Community and was authored by Alfredo Salzillo ?
Alfredo Salzillo ? | Sciencx (2021-04-29T11:59:35+00:00) The only thing you need is… reduce. Retrieved from https://www.scien.cx/2021/04/29/the-only-thing-you-need-is-reduce/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.