Functional JavaScript — Functional Programming and Arrays

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.

Working Functionally on Arrays

Array functions are useful for manipulating arrays.

There are many built-in array methods like map and forEach .

Many of them take callbacks which let us do something with the array entries.

map

The map method lets us convert array entries from one thing to another.

To implement it, we can loop through each entry and call a function that we pass in.

The function’s returned value will be pushed into a new array and returned.

For example, we can write:

const map = (array, fn) => {
  const results = []
  for (const a of array) {
    results.push(fn(a));
  }
  return results;
}

The map function takes an array and fn function.

We use the for…of loop to loop through the entries.

fn is used to map a value from one to another value.

Then we push the returned item in the results .

And we return the results array.

Then we can use it by writing:

const arr = map([1, 2, 3], (x) => x ** 3);

Then arr is:

[1, 8, 27]

filter

We can implement our own filter function which lets us return a new array with entries that meets a given condition.

The condition is in the callback.

For example, we can write:

const filter = (array, fn) => {
 let results = [];
  for (const a of array) {
    if (fn(a)) {
      results.push(a)
    }
  }
  return results;
}

We loop through the array with a for…of loop.

Then we check with the fn function with the argument a whether it returns true or not.

If it returns true , then we push the item a into results .

Once we looped through all the items, we return results .

Then we can use it by writing:

const arr = filter([1, 2, 3], a => a % 2 === 1);

Then we get:

[1, 3]

as the value of arr .

Chaining Operations

We can chain the 2 operations since they’re both pure functions.

For instance, we can filter our items and then map them to the values of our choice:

const map = (array, fn) => {
  const results = []
  for (const a of array) {
    results.push(fn(a));
  }
  return results;
}

const filter = (array, fn) => {
  let results = [];
  for (const a of array) {
    if (fn(a)) {
      results.push(a)
    }
  }
  return results;
}

const arr = map(filter([1, 2, 3], a => a % 2 === 1), a => a ** 3);

We first called the filtet function to return an array of odd numbers.

Then we cube all the odd numbers and return the array of cubed odd numbers.

So arr is:

[1, 27]

We can rewrite that in a cleaner way by writing:

const odd = filter([1, 2, 3], a => a % 2 === 1);
const arr = map(odd, a => a ** 3);

Conclusion

We can create our own map and filter functions to map array entries and return a filtered array.