Functional JavaScript — Functional Array Methods

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.