JavaScript Anonymous Functions
Introduction to JavaScript anonymous functions
An anonymous function is a function without a name. The following shows how to define an anonymous function:
(function () {
//...
});Code language: JavaScript (javascript)
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:
let show = function() {
console.log('Anonymous function');
};show();
Code language: JavaScript (javascript)
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);Code language: JavaScript (javascript)
In this example, we pass an anonymous function into the setTimeout() function. The setTimeout() function executes this anonymous function one second later.
Note that functions are 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:
(function() {
console.log('IIFE');
})();Code language: JavaScript (javascript)
How it works.
First, define a function expression:
(function () {
console.log('Immediately invoked function execution');
})Code language: JavaScript (javascript)
This expression returns a function.
Second, call the function by adding the trailing parentheses ():
(function () {
console.log('Immediately invoked function execution');
})();Code language: JavaScript (javascript)
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);
Code language: JavaScript (javascript)
Arrow functions
ES6 introduced arrow function expression that provides a shorthand for declaring anonymous functions:
For example, this function:
let show = function () {
console.log('Anonymous function');
};Code language: JavaScript (javascript)
… can be shortened using the following arrow function:
let show = () => console.log('Anonymous function');Code language: JavaScript (javascript)
Similarly, the following anonymous function:
let add = function (a, b) {
return a + b;
};
Code language: JavaScript (javascript)
… is functionally equivalent to the following arrow function:
let add = (a, b) => a + b; Code language: JavaScript (javascript)
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.