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 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

• map
• filter
• some
• every
• join
• flat

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 🙏