Functional JavaScript — Higher-Order Functions in the Real World

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 use higher-order functions.

Higher-Order Functions in the Real World

Higher-order functions are used in the real world a lot.

For example, arrays have many instance methods that are higher-order functions.

One of them is the every method.

every takes a callback that returns the boolean expression to check if each item is what we’re looking for.

For example, we can use it by writing:

const allEven = [1, 2, 3].every(a => a % 2 === 0);

We pass in a callback to check if each entry is evenly divisible by 2.

This should return false since we have 1 and 3 which are odd.

Also, the every method can be implemented with our own code:

const every = (arr, fn) => {
  for (const a of arr) {
    if (!fn(a)) {
      return false;
    }
  }
  return true;
}

We loop through the entries of arr and then call fn to check if the entry matches the given condition.

If it does, then we return false since we have at least one item that doesn’t match the given we have in the callback.

We can use it by writing:

const allEven = every([1, 2, 3], a => a % 2 === 0)

And allEven should be false .

some Function

The some method is similar to every .

It’s also part of the array instance.

For example, we can call the array instance’s some method by writing:

const hasEven = [1, 2, 3].some(a => a % 2 === 0)

We call the some method on the array.

The callback returns the condition and that we’re looking for.

It checks if at least one item matches the given condition.

Therefore, hasEven should be true since 2 is even.

Also, we can implement it in our own way.

For example, we can write:

const some = (arr, fn) => {
  for (const a of arr) {
    if (fn(a)) {
      return true;
    }
  }
  return false;
}

We loop through the items and check if fn(a) returns true .

If one does, then we return true .

Otherwise, we return false .

We can call our own some function by writing:

const hasEven = some([1, 2, 3], a => a % 2 === 0)

then we get true .

We pass in the array and the callback function that returns the function we’re checking for.

sort

The array instance sort method takes a function that lets us compare 2 entries and sort them.

The callback takes 2 parameters, which are 2 entries of the array.

If the first parameter should come before the second, then we return a negative number.

If we keep the same order, then we return 0.

Otherwise, we return a positive number.

We can improve this by creating a function that returns a comparator function.

For example, we can write:

const sortBy = (property) => {
  return (a, b) => a[property] - b[property];
}

const arr = [{
    foo: 3
  },
  {
    foo: 1
  },
  {
    foo: 2
  }
]

const sorted = arr.sort(sortBy('foo'));
console.log(sorted);

We have the sortBy function that returns a function to let us compare a property value.

Then we call arr.sort with our sortBy function, which returns the comparator function for the property we want.

Then sorted should be:

[
  {
    "foo": 1
  },
  {
    "foo": 2
  },
  {
    "foo": 3
  }
]

We can see the items are sorted.

Conclusion

We can implement various array methods our way.

There are many applications of higher-order functions in the real world.