[JS] Higher Order Functions

The function statement declares a function.

A declared function is “saved for later use”, and will be executed later, when it is invoked (called).

In JavaScript, functions are objects, and they have both properties and methods.(W3C school : function statement)

As explained above, functions are objects.

It also can be assigned to a variable and can be invoked with the variable name.

//declare function
function apple(){
  return 'Yay, I got apples';
}
//assign function into new variable 'getApples'
const getApples = apple();
//invoke getApples
getApples// 'Yay, I got apples';

Because a function is an object, we can also invoke a function within another function. That is called Higher Order Function.

const climbTree = (fn) => {
  return "I climbed Tree..., + " " + fn();
}
climbTree(apple); // "I climbed Tree..., Yay, I got apples"

Higher order function can take a function as arguments, and also return functions. (in this case, “apple” is a function to be taken by “climbTree”, and it is returned as “fn()”.)

Today, I’d like to introduce some useful higher-order functions to help your coding life much easier!

Map(Apply callback to elements inside arrays)

“map” method is one of higher order function used with arrays, and apply callback function iteratively. It looks like a “for loop” but, it generates a new array, it doesn’t mutate the original array itself.

const array = [1, 2, 3];
array.map((val) => {
  return val * 2;
})
//[2, 4, 6]

Below is the process of MAP.

1. collect first element in the array
2. invoke callback function with element picked from array.
callback = (val) => {
             return val * 2;
            })
3. generate new empty array "[]"
4. push element into new array generated by MAP method.
5. return new generated array after all loop has done.

As I mentioned above, Map generates a new array without mutating the existing array itself.

const array = [1, 2, 3];
array.map((val) => {
  return val * 2;
  })
//[2, 4, 6]<= It is new array, not existing array.
console.log(array) // [1, 2, 3]<= original "array" does not change.

This behavior will help you to predict which variable contains what value inside, also helps you to get a result while keeping original data pure. We also can say this is immutable.

Filter(Filter element by callback)

“filter” method helps you to filter elements with call-back function.

It also creates a new array and returns the results of call back function in that new array. This means the original array is not mutated which is the same as Map.

Filter method checks all elements inside the array, and if each result is true, then the element is pushed into the new array.

const array = [1, 2, 3]
array.filter((val) => {
  return val > 1
  });
//[2, 3]

Reduce(make elements in the array more concise)

“reduce” method helps you make an array more concise.

This is the syntax of reduce method.

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

If you want to invoke “reduce” method with the initial value, you can choose to set [initialValue] or use the first element of the array, if you don’t want to set.

This is a basic example, and it takes only 2 arguments, accumulator and currentValue.

const array = [1, 2, 3]
array.reduce((acc, cur) => {
  return acc + cur; 
},0) <= "0" is initiated number
// 6

“Call-back” function within the reduce method takes a maximum of 4 arguments below.

• accumulator: base value to be accumulated by the current value
• currentValue: the value which accumulates to the accumulator
• currentIndex : index number
• array: Initial array

The below example is a rare case, but you can use “arr” argument to mutate the original array.

const array = [1, 2, 3];
array.reduce((acc, cur, ind, arr) => {
 return arr[ind] = cur + 1;
},0)
console.log(array);
//[2, 3, 4]

“map”, “filter” and “reduce” method are one of the most popular higher-order functions in Javascript, and you’ll see them many times in your coding life.

I believe it is quite difficult for beginners to understand these concepts and I was confused about how these methods work myself.

This is why I made these articles, and also I hope it helps you learn these functions.

Furthermore, there are many articles about higher-order functions and many examples exist. I recommend you to spend time to research and understand completely about them. It will make your coding life much easier.