Anonymous Functions in JavaScript

Introduction

Like, every other computer language, Javascript also supports functions. Usually, while defining a function, we specify a name, sometimes parameters, and then whatever we want the function to do in form of expressions. But, anonymous functions do not follow these norms of usual functions. Like the word “Anonymous”, which means “whose name is not known”, thus, anonymous functions do not have a name. 

Let’s discuss anonymous functions in detail. 

Also Read About, Javascript hasOwnProperty

What is Anonymous Function in JavaScript?

As mentioned earlier, in JavaScript, Anonymous Functions are functions that are not given any name or identity. In other words, they are not assigned with identifiers. The different type of function with a name is said to be “Named Function”. They are normal functions similar to functions in most other languages. 

In JavaScript, Anonymous functions are created at run time.  

Defining Anonymous Function

To define the anonymous function, we simply use the function keyword (similar to how functions are defined in other languages) and then brackets (). We may or may not have parameters according to the need of the function. Then, we write the function's body, enabling the function to do a specific task.

Syntax:

(function (parameters)
{
	//body of the function
});

You can also try this code with Online Javascript Compiler

Run Code

Here, it is important to put the function in a bracket() followed by a semi-colon. Normally, when we define a function, we don’t use a semicolon, but for anonymous functions, it is mandatory to use a semicolon because it returns an object. Otherwise, it generates a run time error. 

For example:

<script>
	function ()
	{
		console.log("Coding Ninjas");
	}
</script>

You can also try this code with Online Javascript Compiler

Run Code

Output:

This is because it is treated as an object.

The correct way will be as follows:

<script>
	(function ()
	{
		console.log("coding Ninjas");
	});
</script>

You can also try this code with Online Javascript Compiler

Run Code

Output:

As anonymous functions do not have a name, they can not be called from anywhere in the program. In the above code as well, the function is just defined. You may wonder if they can ever be called. 

So you see the anonymous functions do not have a name. Therefore, they cannot be called anywhere, unlike the named functions. But in the cases you intend to use them more than once, there is a way to achieve it. The object returned by the anonymous function can be stored in a variable. 

Something like this:

<script>
	var one=(function ()
	{
		console.log("Coding Ninjas");
	}); 
</script>

You can also try this code with Online Javascript Compiler

Run Code

Here, the object returned by the anonymous function is stored in variable ‘one’. 

It can also be done using the arrow function like this:

<script>
	var one=()=>console.log("Coding Ninjas"); 
</script>

You can also try this code with Online Javascript Compiler

Run Code

Calling Anonymous Function

Anonymous functions are self-invoking or self-executing. This means they are called just after the declaration. They are called using brackets() just after declaring the function. 

The syntax for the same will be:

(function(parameters)
{
	//body of the function
})();      //the brackets here are invoking it 

You can also try this code with Online Javascript Compiler

Run Code

For example:

<script>
	(function ()
	{
		console.log("Coding Ninjas");
	})();
</script>

You can also try this code with Online Javascript Compiler

Run Code

Output:

Coding Ninjas

If we do not use the invoking brackets after function definition, they will be just defined and not called. That will not produce any kind of error, as demonstrated before in this article.
But, using this, they can be invoked only once. To access them in other parts of the program as well, we use the variable that stores them. 

Something like this: 

<script>
	var one=(function ()
	{
		console.log("Coding Ninjas");
	});   
	one();
</script>

You can also try this code with Online Javascript Compiler

Run Code

Output:

Coding Ninjas

Here, let’s make a small difference and see the result

<script>
	one();
	var one=(function ()
	{
		console.log("Coding Ninjas");
	});    
</script>

You can also try this code with Online Javascript Compiler

Run Code

Output:

We definitely did not expect this. The reason is the hoisting concept of JavaScript. But, here the catch is that the anonymous functions do not get hoisted. 

Hoisting, in brief, implies that in the creation phase of the execution process, function declarations are shifted to the top of the code. 

To read more about Hoisting in JavaScript, you can also refer to this article. 

Since they do not get hoisted, they are created in run time. This further implies that they are created only after they are declared. Therefore, they can only be used after declaration. Calling or trying to use an anonymous function before its declaration line generates an error. 
Therefore, this is an exception and should be kept in mind while using them.  

The arrow function can be executed in a similar fashion.