Async JavaScript With Higher Order Functions

If JavaScript is a functional programming language or not I leave for you to decide, but the language do have aspects from the functional language paradigm. See reference Wiki.

In JavaScript functions are Higher-order functions and functions are treated as First-class citizens. You don’t have to know computer science to write JavaScript, but these concepts are 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 object.

Callback functions are a big deal in JavaScript. It’s a a technique that allows JavaScript to run asynchronously. Meaning that your program can continue to execute with out having to stop and wait for a task to be done. Callbacks are a direct result of Higher-order functions, a function that accepts another function as an argument. You have probably used callback functions when you are passing a function as an argument to the Array.prototype.map() or when you are handling scenarios from different responses on your AJAX calls.

This is setInterval takes a callback function as an argument:

setInterval(() => { 
  alert(“Stop calling me”)
}, 3000)

After three seconds the anonymous function will fire from the callback queue and alert the message. During those three seconds our runtime can continue execute other callbacks or events. Great!

A callback is a function that executes later

Lets create our own callback function:

let data = []
function mergeData(param) {
  setTimeout(() => {
    data = data.concat(param)
    alert('Duplication done')
  }, 3000)
}
function setData(…args) {
  let [param, callback] = args
  data = param
  if(typeof callback === 'function') {
    console.log('Starting merge')
    callback(arr)
    console.log('Continue program while awaiting..')
  }
}

We are creating a function called mergeData it takes a parameter, starts a time out and after 3 sec it concats data and with the given parameter. Nothing special so far but good enough to show the concept.

Now we want to pass mergeData as a callback function. We create the function setData, deconstructing its arguments, set the value of data to be what ever the first argument of the function is, validates so that the callback argument is a function, if true then invoke the given callback function. The callback could be named what ever you prefer but for simplicity I named it callback.

Lastly we invoke setData with an array and duplicateData as a callback function:

setData([1, 2, 3], duplicateData)
-> 'Starting merge'
-> 'Continue program while awaiting..'
-> 'Duplication done'
data // [1, 2, 3, 1, 2, 3]

Callbacks are a powerful component of JavaScript and a fun one. When I was new to JavaScript, I used callbacks for some time without knowing what it was or how it worked. I believe that many people who are new to programming or JavaScript in particular could be confused with the concept.

If you found this useful or if you have anything to add, please comment below.

Enjoy your code.