Functions are used in many different areas of JavaScript. Functions in JavaScript are a powerful way of freezing code for further use. Thus far, we used different functions to define object constructors and object behavior. In this post, we are going to look at some of the other ways that we can take advantage of functions in JavaScript.

Anonymous Functions in JavaScript

anonymous functionIn JavaScript, a typical function declaration utilizes the function keyword followed by the name of the function. We name our functions when we want to invoke them multiple different times in a piece of code. Sometimes, we want to be able to pass a function directly to another function as an argument. We were actually doing something like this when we were defining our getter and setter functions in our last post. The get: and set: keywords are both function shortcuts.

Most of the functions we’ve been writing inside of objects are called anonymous functions. Anonymous functions are functions that are not defined with a name. Typically, these functions are used for one of three main reasons.

The first way they are used is for direct variable definitions. This style of anonymous function is the most like a normal function declaration in that it is bound to a variable name. It can be invoked by calling that variable as an execution (with parenthesis). This is the type of anonymous function you will most commonly see inside of objects and constructors as well.

These are not the most realistic examples but they work for our purposes. These shaky examples just simply show that you can substitute a return value for a variable declaration in most cases. The second example displays a concept called side-effecting which we will talk about at length in a future post (the console.log() is the side-effect).

Callback Functions

Another common way that anonymous functions are used in JavaScript is as arguments for other functions.

callback anonymous functionsThe setTimeout() function is a very good example for this type of use. The first parameter that we pass to it is a function we want to run. The second parameter is the amount of milliseconds that we want to pass before this function runs. In this example, we’ve specified 3 secs or 3000 milliseconds before this anonymous function runs. You will see this type of anonymous function used many times when working with web applications. Typically, we call these functions callback functions.

Before we get to the last most common method of using anonymous functions, we need to define self-invoking functions.

Self-Invoking Functions

A self-invoking function is actually an anonymous function itself. A self-invoking function automatically runs on its creation and can only be run once. Here is the general format for this type of function.

self-invoking functionsFunctions run immediately in JavaScript when you place a set of parathesis after their names. This is an important thing to remember because in JavaScript you only put semicolons after execution statements. You may have noticed that after a function declaration you don’t put a semicolon. This is because the code is being stored for later. With self-invoking functions, however, we are not storing any code for later use. We are running the function right then and there.

The main reason to use a self-invoking function is for data privacy. Self-invoking functions are primarily used to create what is called a closure. A closure is a method of creating private variables inside of a function block. Closures can be used to create variables that act like the block scoped variables created by let as well. Closures are our last main use case for anonymous functions.

Closures

In JavaScript, functions have access to global variables and to variables defined inside of them. This can be a problem, for example, in web development, the global variables belong to the window object. Any script running on the page can actually access and manipulate any of these global variables. Look at this classic example.

With these examples, we can’t increment the count variable past one because every time we call the functions, we reset the count variable to zero. If we use a closure, however, this problem is easily solved.

closure-introIn this example, we set the add variable to the return value of a self-invoking function. This means that the outer function only runs one time, which sets counter to zero. The inner function works like a normal anonymous function. After the outer function runs from the declaration, when we call add(), only the inner function runs. In this example, the scope of counter is only inside of the self-invoking function and the add function. This means that after the self-invoking function runs, the add function is the only function that can touch it.

Closing

In this post, we took a look at the primary use cases for anonymous functions, for variable definitions, for callback functions and for creating closures. We also looked at self-invoking functions and how JavaScript scope can sometimes work against us.

In our next post, we will start to look at classes in JavaScript. As always, feel free to leave a comment if you thought we left anything out or if you need more clarification.