In this article, we will try to understand what exactly an Anonymous function is, and how we could declare it using the syntax provided in JavaScript 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 produce 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.
Example: Let’s consider the following piece of code to understand how we declare a normal function and an anonymous function.
Javascript
<script> // Normal function function Display() { return "neveropen!"; } console.log(Display()); // Anonymous function let display = function() { return "neveropen!!!"; } console.log(display()); </script> |
Output:
neveropen! neveropen!!!
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 the Arrow functions in JavaScript article.
Javascript
<script> let display = function() { return "neveropen...!"; } console.log(display()); // Using arrow function let displayName = () => { return "neveropen....!"; } console.log(displayName()); </script> |
Output:
neveropen...! neveropen....!
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("neveropen")); // Using arrow function let displayName = (name) => { return name; } console.log(displayName("neveropen")); </script> |
Output:
neveropen neveropen
Example 3: In this example, we use an anonymous function as a self-invoking function (a special function that is invoked right after it is declared and also does not have any kind of name associated with it) and this can be done just by writing parenthesis in between the function definition.
Javascript
<script> (function () { console.log("neveropen....!"); })(); // Using arrow functions (() => { console.log("neveropen....!"); })(); </script> |
Output:
neveropen....! neveropen....!
Difference between the been 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. |
