While functions were introduced in this reading list series as named tasks, it’s also possible to create anonymous functions, which have several important roles in JavaScript.

Everyday Anonymity

You’re probably already encountered anonymous functions: they’re an intrinsic part of callbacks.

document.getElementById("button").addEventListener("click", 
    function (){
        …
    })

Because the function used in the event listener is not named, it’s anonymous. Anonymous functions are frequently created and run at the same moment, as they are in a callback.

An anonymous function can also be the value of a variable, as a function expression:

var luke = function() {
    // use the force
}

In this way, the function can be referred to later by the name of the variable, although it is still considered anonymous.

Distinctions with a Difference

One important distinction about anonymous functions is that they must be defined before making any reference to them. You might recall back in the first article in this series that traditional functions can be declared anywhere in your code and referenced from anywhere, since the browser will parse your code before executing it, picking up any named functions along the way; it’s only convention (and good coding practice) that functions are written at the start of your script. But because an anonymous function is created at the moment it is run in the script, not when the script is parsed, it can’t be written after a reference to it in your code.

Uses for Anonymous Functions

Because they don’t need a name, anonymous functions are shorter and easier to write if you don’t need a reference to them elsewhere; that’s one of the reasons they’re used in callbacks. There’s also one interesting feature of anonymous functions: used in a particular way, they can run themselves.

(function() {
    // run a bunch of code automatically
})();

The technique is known as a self-executing, self-invoked, or immediately invoked function expression (and thus by the acronym IIFE). It is created by the empty parentheses at the end of the function, which tells the browser to run the function as soon as it comes across it. This may seem to be somewhat redundant: ordinary JavaScript will also be executed when it is encountered in your code, so why use this odd-looking function?

The primary reason is to take advantage of scope. You may recall that variables declared inside functions can only be referenced inside the context of that function; they’re not recognized at all outside of it. As such, creating variables inside a self-executing function “locks off” the function, and prevents the variables from being accidentally referenced or overwritten elsewhere in your code. The technique neatly encapsulates the variables and code, keeping them out of the global namespace and ensuring they don’t clash with other code written elsewhere. As such, additions to code such as polyfills or plugins are frequently written as self-executing functions.

Conclusion

Understanding anonymous and self-executing functions allows you to pass functions around as variables and modularize your code. But functions can be used for much more: they can even create and return other functions. That’s the role of closures, which we will look at next.

Photograph by Smilla, used under a Creative Commons Attribution-NonCommercial 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.