Skip to content
Related Articles

Related Articles

JavaScript Anonymous Functions

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Basic
  • Last Updated : 23 Jun, 2022

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

Anonymous Function 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 anonymous function using normal declaration:

function() {
    // Function Body
 }

We may also declare anonymous function using 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 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:

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 self executing anonymous function (without 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




// JavaScript code..
 
(() => {
  console.log("GeeksforGeeks");
})();
 
// This code is contributed by Aman Singla...

Output:

GeeksforGeeks

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!