Open In App

JavaScript Anonymous Functions

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will study in detail what exactly are Anonymous Functions in JavaScript and how to declare them using normal technique and/or with the Arrow Function technique itself.

Anonymous Function 

It is a function that does not have any name associated with it. Normally we use the function keyword before the function name to define a function in JavaScript, however, in anonymous functions in JavaScript, we use only the function keyword without the function name.

An anonymous function is not accessible after its initial creation, it can only be accessed by a variable it is stored in as a function as a value. An anonymous function can also have multiple arguments, but only one expression.

Syntax: 

The below-enlightened syntax illustrates the declaration of an anonymous function using the normal declaration:

function() {
    // Function Body
 }

We may also declare an anonymous function using the arrow function technique which is shown below:

( () => {
    // Function Body...
} )();

The below examples demonstrate anonymous functions.

Example 1: In this example, we define an anonymous function that prints a message to the console. The function is then stored in the greet variable. We can call the function by invoking greet().

Javascript




<script>
    var greet = function () {
        console.log("Welcome to GeeksforGeeks!");
    };
      
    greet();
</script>


Output:

Welcome to GeeksforGeeks!

Example 2: In this example, we pass arguments to the anonymous function.

Javascript




<script>
    var greet = function (platform) {
        console.log("Welcome to ", platform);
    };
      
    greet("GeeksforGeeks!");
</script>


Output:

Welcome to GeeksforGeeks!

As JavaScript supports Higher-Order Functions, we can also pass anonymous functions as parameters into another function.

Example 3: In this example, we pass an anonymous function as a callback function to the setTimeout() method. This executes this anonymous function 2000ms later.

Javascript




<script>
    setTimeout(function () {
        console.log("Welcome to GeeksforGeeks!");
    }, 2000);
</script>


Output:

Welcome to GeeksforGeeks!

Another use case of anonymous functions is to invoke the function immediately after initialization, this is also known as Self Executing Function. This can be done by adding parenthesis so we can immediately execute the anonymous function.

Example 4: In this example, we have created a self-executing function.

Javascript




<script>
    (function () {
        console.log("Welcome to GeeksforGeeks!");
    })();
</script>


Output:

Welcome to GeeksforGeeks!

Arrow functions

ES6 introduced a new and shorter way of declaring an anonymous function, which is known as Arrow Functions. In an Arrow function, everything remains the same, except here we don’t need the function keyword also. Here, we define the function by a single parenthesis and then ‘=>’ followed by the function body.

Example 5: In this example, we will see the use of arrow function.

Javascript




<script>
    var greet = () => 
    {
        console.log("Welcome to GeeksforGeeks!");
    }
      
    greet();
</script>


Output:

Welcome to GeeksforGeeks!

If we have only a single statement in the function body, we can even remove the curly braces.

Example 6: In this example, we create a self-executing function.

Javascript




<script>
    let greet = () => console.log("Welcome to GeeksforGeeks!");
    greet();
</script>


Output:

Welcome to Geeksforgeeks! 

Example-7: In this example, we will declare a self-executing anonymous function (without the name itself) and will see how we may declare it as well as how we may call it in order to print the resultant value.

Javascript




<script>
    (() => {
      console.log("GeeksforGeeks");
    })();
</script>


Output:

GeeksforGeeks


Last Updated : 30 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads