Functional JavaScript — Functional Array Methods
Tags: webdev, programming, functional, javascript
Published: 2021-01-25 01:33:15

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


JavaScript is partly a functional language.

To learn JavaScript, we got to learn the functional parts of JavaScript.

In this article, we’ll look at how to create our own array methods.

### concatAll

We can create our own `concatAll` method to concatenate all the nested array into one big array.

For example, we can write:

```
const concatAll = (arrays) => {
  let results = []
  for (const array of arrays) {
    results = [...results, ...array];
  }
  return results;
}
```

We just spread the array entries of all the arrays and then return the resulting array.

Then we can use it to unnest nested arrays.

For example, we can write:

```
const arr = concatAll([
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
]);
```

Then `arr` is:

```
[1, 2, 3, 4, 5, 6, 7, 8, 9]
```

### Reducing Function

Reduce is a function that lets us combine the entries of an array into a single value.

To create our own `reduce` function, we can write:

```
const reduce = (array, fn) => {
  let accumlator = 0;
  for (const a of array) {
    accumlator = fn(accumlator, a)
  }
  return accumlator;
}
```

The `reduce` function takes an `array` and a `fn` function.

`array` is the array we loop through to combine the values from the `array` and assign it as the value of `accumulator` .

`fn` returns a value with the `accumulator` and `a` values combined into one with some operations.

Once we looped through the array, then we return the `accumulator` value.

Then we can use it to add the numbers in the array by writing:

```
const sum = reduce([1, 2, 3, 4, 5], (acc, val) => acc + val)
```

We pass in a number array and a callback to combine the entries of the array together.

Then `sum` is 15 since we added all the numbers together.

We can make the `reduce` function more robust by accepting an initial value for `accumulator` .

For example, we can write:

```
const reduce = (array, fn, initialValue) => {
  let accumlator = initialValue;
  for (const a of array) {
    accumlator = fn(accumlator, a)
  }
  return accumlator;
}
```

We assign the `initialValue` as the initial value of `accumulator` .

This way, we don’t assume that we’re always working with number arrays.

### Zipping Arrays

We can zip multiple arrays into one.

We create the entry for each array with our own function.

And then we push that into the array we return.

We only loop up to the length of the shortest array, so the returned array will also have the same length as the shortest array.

For example, we can write:

```
const zip = (leftArr, rightArr, fn) => {
  let index, results = [],
    length = Math.min(leftArr.length, rightArr.length);
  for (index = 0; index < length; index++) {
    results.push(fn(leftArr[index], rightArr[index]));
  }
  return results;
}
```

We created a `zip` function with the `leftArr` , `rightArr` , and `fn` parameters.

`leftArr` and `rightArr` are arrays and `fn` is a function.

We loop through the shortest length, which is the `length` .

In the loop body, we push the zipped entry to the `results` array.

Once we did that, we return `results` .

Then we can use that by writing:

```
const zipped = zip([1, 2, 3, 4], ['foo', 'bar', 'baz'], (a, b) => `${a} - ${b}`)
```

We have a callback to combine the entry from the left and right together into a string.

Then `zipped` is:

```
["1 - foo", "2 - bar", "3 - baz"]
```

### Conclusion

We can unnest arrays and zip them together with our own functions.