## DEV Community is a community of 636,189 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

loading... # 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 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) // => 
``````

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 🙏

## Discussion (8) Bruno Dias • Edited

Last week, on a stack meeting, I explained the same derivations using `reduce`. :)

It's also nice to point out that you can also implement `reduce` on custom containers.

``````class Identity { // Just holds a single value
constructor(x) { this.x = x; }
reduce(f, initial) { return f(initial, this.x); }
}

const base = new Identity(1);
base.reduce((acc, x) => acc + x, 10); // 11
``````