The only thing you need is... reduce
Tags: javascript, showdev, programming
Published: 2021-04-29 11:59:35

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

```javascript
// 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](#-raw-arrayprototypemap-endraw-)
- [filter](#-raw-arrayprototypefilter-endraw-)
- [some](#-raw-arrayprototypesome-endraw-)
- [every](#-raw-arrayprototypeevery-endraw-)
- [join](#-raw-arrayprototypejoin-endraw-)
- [flat](#-raw-arrayprototypeflat-endraw-)

### `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
```javascript
// 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:

```javascript
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
```javascript
// 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:

```javascript
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
```javascript
// 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:

```javascript
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
```javascript
// 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:

```javascript
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
```javascript
// 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:

```javascript
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
```javascript
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:

```javascript
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 🙏