Higher Order Functions

I learned the basics of coding in a bootcamp setting. We learned how to do things, in what felt like, the hard way first. Looking back, they were teaching us how to understand what was going on 'under the hood' before we started to use the built-in higher order functions.

Higher order functions(HOF) allow for smoother coding by letting us reduce and reuse code. HOF are functions that accept a function(s) as a parameter(s), known as 'callback', or the function will return a function as the result.

Below we have an example of what a call back can look like

Our first function called 'display' takes a single parameter val and logs it to the console using console.log(val).

The second function takes three parameters: num1, num2, and a callback. It calculates the sum of num1 and num2, storing the result in the variable 'add'. It then calls the callback function, passing 'add' as an argument.

The last line calls the sum function with the arguments 2, 4, and the display function. After running, 6 is logged to the console.

HOF with arrays

The map(), filter(), and reduce() methods are used fairly commonly, so I am going to show you some I use less frequently - but still find interesting.

Sort() is a method that accepts an array, and will return the elements sorted, by mutating the original array. Sort converts the elements into strings and then sorts them in ascending order 'comparing their sequences of UTF-16 code units values'(MDN, Array.prototype.sort()).
Below is an example of sort()

First, we declare an array named 'stringArray' containing four strings: "apple", "cherry", "apricot", and "banana".

Then, sort() method is called on 'stringArray'. This method sorts the elements of the array in place and returns the sorted array. Remember! By default, the sort() method sorts the elements as strings in ascending order, based on their UTF-16 code unit values. The sorted array is ["apple", "apricot", "banana", "cherry"].

Here is another example for sort(), this time with numbers

First, we initialize an array called numberArray with the elements [66, 1, 19, 333, 42].

Then, define a comparison function named 'compareNumbers'. This function takes two arguments, a and b, and returns the result of a - b. This result determines the order of the elements:

If a - b is negative, a is considered to come before b.
If a - b is positive, a is considered to come after b.
If a - b is zero, a and b are considered equal in terms of order.

The first time sort() is called on numberArray without any arguments. Did you Remember? By default, sort() converts the elements to strings and sorts them lexicographically (based on the unicode code point values of the characters). This is why the array is sorted as [1, 19, 333, 42, 66] instead of numerically.

Finally, the sort() method is called with the compareNumbers function as an argument. This causes the array to be sorted numerically in ascending order [1, 19, 42, 66, 333].

HOF with objects

Object.entries() is a function, that creates a new array from an object. It takes the key and corresponding value pair from the object, and puts them both into a little array together, and followed by the next corresponding pair in another array, and so on until the object is finished.

Below is an example of Object.entries()

First, we initialize an object 'user' with two properties:
firstName with the value 'Lyle' and pets with the value 2.

Then the Object.entries() method is called with the 'user' object as its argument. This method returns an array of the object's own property key-value pairs ['firstName', 'Lyle'], ['pets', 2].

Conclusion

Since completing the JS coding part of the bootcamp, I've found myself starting to write out code that map(), filter(), or any other HOF accomplishes before I remember them. However, spending time trying to find a missing or misplaced syntax within loops or large if-else chains, is inefficient time management and taxing on our brain's energy. HOF are smaller blocks of code that allow developers to keep their code dry, make code more legible, and easier to debug. Practicing new methods is an important way to strengthen skills and helps streamline coding.

Sites I found helpful

Prasad, Sobit, "Higher Order Functions in JavaScript – Explained with Practical Examples", Free Code Camp, 1/3/2023,
https://www.freecodecamp.org/news/higher-order-functions-in-javascript-explained/ , 06/2024

MDN, Array.prototype.sort(),
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort , 06/2024

MDN, Code Unit,
https://developer.mozilla.org/en-US/docs/Glossary/Code_unit , 06/2024