What the function? Diving into Javascript arrow functions, closures and callbacks

Functions are the backbone of any codebase. Functions allow the programmer to delegate responsibility, more easily debug code, separate concerns, improve flow and increase readability of their code. Without functions codebases would be a giant blob of continuous code that would be borderline impossible for the initial developer to follow, let alone any subsequent developers who may work on the code base. Below is an example of how delegating different responsibilities to different functions makes a developer’s code flow better and be much more readable:

Instead of coding the logic for all of these different functions within 1 runGame function, which would likely then consist of thousands of lines of continuous code, many of which are not related, we are able to delegate different responsibilities to different functions. This makes our runGame function flow much better, allows other developers to understand the workflow, allows us to separate our code into functions that deal with similar behavior and separate functions that deal with different data and behavior, and more easily pinpoint errors in our code.

STANDARD FUNCTIONS

If you have begun your journey of learning Javascript you have probably encountered the function keyword. The function keyword is used to define a function for future use as follows:

Here, addNumbers is the name of the function, num1 and num2 are the function parameters, and the code inside the {} is the function body. We also explicitly tell Javascript what to return when calling this function with the return keyword. We can call this function by invoking it with (). Since our addNumbers function takes 2 parameters we must invoke it with 2 parameters:

ARROW FUNCTIONS

The function keyword is very beginner friendly and is easily digestible. However, as you work more with Javascript you will encounter an alternative syntax for writing functions, the arrow function syntax:

This function operates the exact same as the above function declared with the function keyword. Here we are assigning the body of the function to variable called addNumbers. We invoke addNumbers the same way as above, using () and placing the required parameters within the parenthesis:

If your function does not take any parameters you must still include parenthesis (well, you don’t have to use parenthesis specifically, some coders advocate for the use of an underscore, but it is convention to use parenthesis:

One handy aspect of arrow functions is that if they are only 1 expression long you do not actually have to use the return keyword or the curly braces! Arrow functions will implicitly return the last expression. The two above functions could each be reduced by 1 line and the return keyword and the curly braces can be dropped entirely:

At first arrow functions can be a bit confusing and harder to read, but as you practice with them more and more you will (or at least I did!) begin to love arrow functions, particularly 1 liners, as they are very concise.

CLOSURES

A closure is:

the combination of a function bundled together (enclosed) with references to its surrounding state.

Sorry, what?

Closures are very important to understand in Javascript but they actually are pretty simple if they are expressed in human terms! Closures are simply functions that are created inside other functions and thus have access to every variable that the outer function has access to. Here is an example of a closure:

Which when called returns:

The closure function printInfo does not actually take 2 parameters of name and age, but as you can see, the function still has access to those variables because it can see outside its own scope to anything that is in scope of the function that encloses it.

CALLBACKS

Last but certainly not least is the idea of callback functions. Another backbone of Javascript, callback functions are crucial to understanding Javascript. A callback function is a function passed into another function as an argument and it is then executed. A very common place a Javascript developer encounters callbacks is when they create a forEach loop which requires a callback function as an argument:

Here we pass a function with no name that we declare in the forEach argument that simply multiplies the number by 2 and logs it to the console.

Since we are defining this function in the argument of forEach and it has no name it is called an anonymous function.

We can combine what we learned above about arrow functions and callbacks to make very clean 1 line forEach loop!

Hopefully this blog will help impress the importance and usefulness of functions upon you. Moreover, I hope it was able to clarify what closures and callbacks are, and when and how they get used! Goodluck on your coding adventure.