Skip to content
Related Articles

Related Articles

Improve Article

What is a typical use case for anonymous functions in JavaScript ?

  • Last Updated : 25 Aug, 2021
Geek Week

In this article, we will try to understand what exactly an Anonymous function is, how we could declare it using the syntax provided in JavaScript and further we will see some examples (use-cases) where we can use anonymous functions to get our results in the console. Before proceeding with the examples or use-cases of anonymous functions, let’s briefly understand the simple function and anonymous function.

A function is a set of statements that take inputs, do some specific computation, and produces output. Basically, a function is a set of statements that performs some tasks or does some computation and then return the result to the user. The anonymous function works the same as the normal function but they differ in terms of syntax.

An 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.

Let’s consider the following piece of code to understand that how we declare a normal function and an anonymous function:



Example:

Javascript




<script>
   // Normal function
   function Display() {
        return "GeeksforGeeks!";
    }
  
  console.log(Display());
  // Anonymous function
  let display = function() {
    return "GeeksforGeeks!!!";
   }
  console.log(display()); 
</script>

Output:

GeeksforGeeks!
GeeksforGeeks!!!

Now let’s see the following examples (use-cases) that would illustrate more about an anonymous function and its usage.

Example 1: In this example, we will store the anonymous function in a variable and then we will call that variable using the function calling syntax in order to print our result. If you don’t know about the arrow function, please refer to Arrow functions in JavaScript article.

Javascript




<script>
    let display = function() {
        return "GeeksforGeeks...!";
    }
    console.log(display());
  
   // Using arrow function 
   let displayName = () => {
     return "GeeksforGeeks....!";
   }
  console.log(displayName()); 
</script>

Output:

GeeksforGeeks...!
GeeksforGeeks....!

 



Example 2: In this example, we will pass a parameter inside our anonymous function that is responsible for taking our result name and further while calling the function, we will provide the name as a parameter value.

Javascript




<script>
    let display = function(name) {
        return name;
    }
   console.log(display("GeeksforGeeks"));
  
   // Using arrow function
   let displayName = (name) => {
    return name;
   }
  console.log(displayName("GeeksforGeeks")); 
</script >

Output:

GeeksforGeeks
GeeksforGeeks

Example 3: In this example, we use an anonymous function as a self-invoking function (a special function which is invoked right after it is declared and also it does not have any kind of name associated with it) and this can be done just writing parenthesis in between the function definition.

Javascript




<script>
      (function () {
        console.log("GeeksforGeeks....!");
       })();
  
      // Using arrow functions
      (() => {
    console.log("GeeksforGeeks....!");
      })(); 
</script >

Output:

GeeksforGeeks....!
GeeksforGeeks....!

Difference between Anonymous function & Normal function

S.No.

Normal function

Anonymous function

1. 

A simple function (also called a method) is responsible for carrying out certain operations or tasks. When the function is called, it executes that particular task for which the function has called.

An anonymous function is a function that does not have any name associated with it ie. this was created without any identifier or name that refer to it

2.

We can access this function directly by calling the function.

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.

3. 

This function is useful for all scenarios. 

An anonymous function can be useful for creating IIFE(Immediately Invoked Function Expression).

4. 

Normal functions are hoisted which means we can declare the function after it has been used in javascript. 

An anonymous function can not be hoisted.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :