JavaScript

JavaScript Anonymous Functions | Explained for beginners

The function is a set of instructions that is executed whenever it is called and returns some result as its answer. Functions are created by using a particular syntax, for example in JavaScript you use the function keyword and then the function name and then parenthesis. Similarly, the Anonymous functions are the same but the difference is in the syntax.

JavaScript Anonymous function does not have a name with its declaration and this is usually passed as the argument to the other higher-order functions. The anonymous function is basically built and used for instant function execution within a function as a parameter.

When anonymous functions are constructed, they can be assigned to variables, giving you the same capabilities as if you used a name in the function declaration.

Making use of anonymous functions as parameters to other functions

Because of its anonymous function, we can utilize it wherever we want, we often use this method as a parameter in another function as well, and here is the example of this below:

setTimeout(function () {

console.log('This function is being used as a parameter in JS setTimeout method ')

}, 3000);

In this example, we use the setTimeout() method to pass an anonymous function. This anonymous function is executed Three seconds later by the setTimeout() method.

Immediate Execution of a function

Immediate execution of a function means that you have created a function and you want it to be executed right after it is created. You can achieve this functionality with the anonymous function very easily. Here is an example of how you can easily make it happen in the code.

(function() {

console.log('This function is being executed immediately right after its creation');

})();

Output

So in the above example, the function is getting executed right after its creation. The syntax is simple: you can simply declare the anonymous function and make it execute by just calling it using the parenthesis at the end of the function.

Here is how you can do this below:

let obj = {

'name': 'John Doe',

'age': 22,

'address': 'xyz'

};

(function() {

console.log('My name is ', obj.name, ' and my age is', obj.age, ' and I live in ', obj.address);

})(obj);

Output

You can simply pass the parameters inside the immediate execution of the anonymous function as we have seen in the above example.

Arrowed Anonymous function

The arrowed anonymous function is similar to the non-arrowed anonymous function, it’s the short syntax of the function and can be easily implemented in the program. Arrow functions are the modern ES6 features actually, which allows you to write the code fast and easier, it is basically a shorthand approach to declare and use the functions in JavaScript.

Here is an example of the shorthand anonymous function.

let AnonymousFunc = function () {

console.log('This is an Anonymous function');

};

You can write the above function as a shorthand arrow function as below

let AnonymousFunc = () => console.log('Short hand Arrowed Anonymous function');

AnonymousFunc();

Here is the output

How to reuse the Anonymous Function

JavaScript’s anonymous functions can be reused later on. You can make them reusable by assigning them to a variable and then calling them wherever you want. Let’s take a look at the example below to make a clear understanding of how we can easily use anonymous functions in the future.

let AnonymousFunc = function () {

console.log('This is an anonymous function');

};

AnonymousFunc();

Output:

So if you take a look at the above example, you will find out that there’s no name between the function keyword and parentheses which is making it completely Anonymous but why we are assigning this anonymous function to an AnonymousFunc variable is because we want this function to be callable later.

Conclusion

An anonymous function is a function with no name which can be used once they’re created. The anonymous function can be used in passing as a parameter to another function or in the immediate execution of a function. In this article, we have discussed how we can create an anonymous function and store them for future usage as well.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.