Anonymous Function JavaScript

This tutorial covers:
  1. What is an anonymous function in JavaScript?
  2. Why do we want anonymous functions in JavaScript?
  3. How do you create a JavaScript anonymous function?
  4. How do you run an anonymous function in JavaScript?
  5. JavaScript Anonymous Function Exercises
Let's get started →

What is an anonymous function in JavaScript?

An anonymous function in JavaScript is a function without a name.

This is the opposite of a Named Function in JavaScript.

An example of a JS Named Function is:

function highFive() {
    return "yeah!";
}

The name of this function is highFive.

The name of a JavaScript Named Function is the text that comes after the function keyword.

You can see in this image the name of this function highlighted:

JavaScript Named Function Example - highlighting the highFive name

If we remove the name of the function we end up with a JavaScript Anonymous Function:

function () {
    return "yeah!";
}

There is no name for this function.

This is why it is called an anonymous function - because it has no name.

You can see in this image that the name is missing from this JavaScript anonymous function:

Anonymous Function JavaScript Example - cursor highlights a function with no name

So you can see that an anonymous function in JavaScript is a function that does not have a name after the JavaScript function keyword.

Why do we want anonymous functions in JavaScript?

Four reasons we would want to use a JavaScript Anonymous Function are that we need a function that:

  1. is used only once
  2. is immediately invoked
  3. is being passed into another function
  4. is returned from another function

Let's work through the thinking behind these four (of many) reasons.


"1 - We need a function that is used only once"

You may sometimes write functions that are used only once.

Rather than having to create a new name for the function, you can just write an Anonymous Function.

1 + (function() { return 1; })();

Because this function is used in the addition that is going to be evaluated, you will only use it once.

Anonymous Function JavaScript that is used only once


That way you don't have to keep coming up with new function names.

This also helps you to avoid polluting the JavaScript global namespace.


"2 - We need a function that is immediately invoked"

You may sometimes write a function that needs to be immediately invoked as soon as it's defined.

(function() { return "immediately invoked!"; })();

You can see that there are parentheses that enclose the anonymous function.

What makes the anonymous function evaluate is the open / close parentheses after the enclosing parentheses.

JavaScript Anonymous Function Immediately Invoked

This helps you to avoid polluting the JavaScript global namespace.

This helps you to isolate different variable declarations.


"3 - We need a function that is being passed into another function"

...


"4 - We need a function that is being returned from another function"

...

How do you create a JavaScript anonymous function?

...

How do you run an anonymous function in JavaScript?

...

JavaScript Anonymous Function Exercises

...

Copyright © 2021 JavaScriptFunction.com - All rights reserved.