Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 29, 2021 11:59 am GMT

The only thing you need is... reduce

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.

  1. Type 1 reduce that returns a single Object/number/string, that reduce the collection to another type
  2. Type 2 reduce that returns another collection with the same number of elements
  3. Type 3 reduce that returns another collection with a different number of elements
// Type 1: the sum of the elements of an arrayconst sum = [1, 2, 3].reduce((acc, value) => acc + value, 0)// Type 2: convert an array of number to an array of stringsconst strings = [1, 2, 3].reduce((acc, value) => [...acc, String(1)], [])// Type 3: remove even elementsconst 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 arrayconst 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 elementsconst 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 numberconst 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 numberconst 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


Original Link: https://dev.to/alfredosalzillo/the-only-thing-you-need-is-reduce-318a

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To