JavaScript Higher-order functions

Higher-order functions, what does that even mean.

JavaScript is a functional programing language at least it has some of the core components from the functional langugage paradigm. See reference Wiki.

Is it important to know that JavaScript supports Higher-order functions and treats functions as First-class citizens. We don’t have to know computer science to write code. But we are still exposed to these concepts in our daily JavaScript code and it’s the reason why we can pass functions as arguments, store them in variables, create functions inside a functions body and return them. Just like we do with any other objects like Strings or Arrays.

Callback functions are a big deal of JavaScript. It’s a a technique that allows JavaScript to run asynchronously. Callbacks are a direct result of Higher-order functions, a function that accepts another function as a parameter.

The most used example for introducing callback is the setInterval function.

setInterval(function(){ 
  alert("Stop calling me");
}, 3000);

After three seconds the anonynous function will fire from the callback que and alert the message. During thoose three seconds our runtime can continue execute other callbacks or events.

Lets cover some more usage of functions.

var arr = [1, 2, 3];

var indexFunction = function(changes){
  changes.forEach(function(change){
    console.log('Index of new element is: ' + change.index);
    })
}

Array.observe(arr, indexFunction, ['add'])
 
arr.push(4) // Index of new element is: 3

indexFunction is a function expression that are assigned to a variable and can be invoked on indexFunction. The function takes one parameter called changes. The function then executes the forEach method on each object in our parameter and calls an anonymous function as a callback on each object found. Which logs to our console the index of found objects. A pretty useless and confusing function so far.

Then we call the method Array.observe with three parameters:

name of our object that we want to observe

a callback</i>

an array where we specify what type of changes we want to listen to

indexFunction is the callback. It's passed in as a parameter just like any other object. The function will stay in memory and will fire or "Call back" on every new change to arr.

This is all possible because of how functions gets treated in JavaScript.

This post was written.

function getTime(){
  return Date()
}

var obj = {
  time: getTime()
}

obj.time // "Sat Feb 27 2016 16:44:34 GMT+0100 (CET)"

getTime returns a function that return the current time and date. We can then use the getTime as a value for the property time.

There is more to functions in JavaScript but we have cleared out some of the concepts and explained why we can treat functions in JavaScript the way we do.
I hope you found this article helpful and feel free to comment below.

Enjoy your code.

MARCUS ÖSTERBERG

Feb 27, 2016

JavaScript Higher-order functions