29/07/2022, 08:06 JavaScript Anonymous Functions
JavaScript Anonymous Functions
If this JavaScript tutorial saves you
hours of work, please whitelist it in
your ad blocker 😭 and
Donate Now
(https://www.javascripttutorial.net/donation/)
to support us ❤️in paying for web
hosting and CDN to keep the site
running.
Summary: in this tutorial, you will learn about JavaScript anonymous functions.
Introduction to JavaScript anonymous functions
An anonymous function is a function (https://www.javascripttutorial.net/javascript-function/) without a name. The
following shows how to define an anonymous function:
(function () {
//...
});
Note that if you don’t place the anonymous function inside the () , you’ll get a syntax error. The ()
makes the anonymous function an expression that returns a function object.
An anonymous function is not accessible after its initial creation. Therefore, you often need to assign it
to a variable.
For example, the following shows an anonymous function that displays a message:
https://www.javascripttutorial.net/javascript-anonymous-functions/ 1/4
29/07/2022, 08:06 JavaScript Anonymous Functions
let show = function() {
console.log('Anonymous function');
};
show();
In this example, the anonymous function has no name between the function keyword and
parentheses () . Because we need to call the anonymous function later, we assign the anonymous
function to the show variable.
Using anonymous functions as arguments
In practice, you often pass anonymous functions as arguments to other functions. For example:
setTimeout(function() {
console.log('Execute later after 1 second')
}, 1000);
In this example, we pass an anonymous function into the setTimeout()
(https://www.javascripttutorial.net/javascript-bom/javascript-settimeout/) function. The setTimeout()
function executes this anonymous function one second later.
Note that functions are (https://www.javascripttutorial.net/javascript-functions-are-first-class-citizens/) first-
class citizens in JavaScript. Therefore, you can pass a function to another function as an
argument.
Immediately invoked function execution
If you want to create a function and execute it immediately after the declaration, you can declare an
anonymous function like this:
https://www.javascripttutorial.net/javascript-anonymous-functions/ 2/4
29/07/2022, 08:06 JavaScript Anonymous Functions
(function() {
console.log('IIFE');
})();
How it works.
First, define a function expression:
(function () {
console.log('Immediately invoked function execution');
})
This expression returns a function.
Second, call the function by adding the trailing parentheses () :
(function () {
console.log('Immediately invoked function execution');
})();
and sometimes, you may want to pass arguments into it, like this:
let person = {
firstName: 'John',
lastName: 'Doe'
};
(function () {
console.log(person.firstName} + ' ' + person.lastName);
})(person);
Arrow functions
https://www.javascripttutorial.net/javascript-anonymous-functions/ 3/4
29/07/2022, 08:06 JavaScript Anonymous Functions
ES6 introduced arrow function (https://www.javascripttutorial.net/es6/javascript-arrow-function/) expression that
provides a shorthand for declaring anonymous functions:
For example, this function:
let show = function () {
console.log('Anonymous function');
};
… can be shortened using the following arrow function:
let show = () => console.log('Anonymous function');
Similarly, the following anonymous function:
let add = function (a, b) {
return a + b;
};
… is functionally equivalent to the following arrow function:
let add = (a, b) => a + b;
Summary
Anonymous functions are functions without names.
Anonymous functions can be used as an argument to other functions or as an immediately
invoked function execution.
https://www.javascripttutorial.net/javascript-anonymous-functions/ 4/4
