What is a typical use case for JavaScript anonymous functions?

Javascript Web Development Front End Technology

In this article, we are going to explore the Anonymous functions in JavaScript and also learn about their use cases. An anonymous function is a special type of function that does not have any name associated with it.

In JavaScript, we normally use the function <funcName>() keyword before defining any function in JavaScript. However, in anonymous functions in JavaScript, we only use the keyword function for defining the function without any supported name.

An anonymous function cannot be accessed after it is created, it can only be accessed by a variable that is stored in the function as the value. An anonymous function can have multiple arguments but will always be executing a single expression only.

Example 1

In the below example, we have created a Normal function and then a simple Anonymous function. Both the functions are performing the same operation i.e. Printing a message to the console. But the anonymous function does not have a function name and only has a single expression.

#Filename: index.html

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initialscale= 1.0" />
      <title>Anonymous Function</title>
   </head>
   <body>
      <h1 style="color: red;">
         Welcome To Tutorials Point
      </h1>
      <script>
         // Normal function
         function Display() {
            return "Welcome To Tutorials Point!";
         }
         console.log(Display());
         // Anonymous function
         let display = function() {
            return "SIMPLY EASY LEARNING!!!";
         }
         console.log(display());
      </script>
   </body>
</html>

Output

It will produce the following output in the Console.

Welcome To Tutorials Point!
SIMPLY EASY LEARNING!!!

Example 2

In the below example, we have created two anonymous functions using arrow and without using arrow. Both the functions are performing sum of two numbers.

#Filename: index.html

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initialscale= 1.0" />
      <title>Anonymous Function</title>
   </head>
   <body>
      <h1 style="color: red;">
         Welcome To Tutorials Point
      </h1>
      <script>
         // Anonymous Function
         let add = function (a, b) {
            return a + b;
         };
         console.log("Sum of 3 & 5 using Anonymous Function is:" + add(3,5));
         
         // Anonymous function using arrow
         let addV2 = (a, b) => a + b;
         console.log("Sum of 3 & 5 using Anonymous Function " + "with Arrow is:" + addV2(3,5));
      </script>
   </body>
</html>

Output

On successful execution of the above program, it will produce the following output in the Console.

Sum of 3 & 5 using Anonymous Function is:8
Sum of 3 & 5 using Anonymous Function with Arrow is:8

Mayank Agarwal

Updated on 28-Apr-2022 13:48:59

Previous Page Print Page Next Page