Functions without a name are called Anonymous Functions in JavaScript. We use only the function keyword without the function name.
The below code shows how to define an anonymous function:
function() {
// Function Body
}An anonymous function can also have multiple arguments, but only one expression.
JavaScript Anonymous Functions
A simple example is an anonymous function that is not accessible after its initial creation. Therefore, you often need to assign it to a variable. We assign the anonymous function to the show variable.
A function expression defines a function as part of an expression, and it doesn’t require a function name.
<!DOCTYPE html>
<html>
<body>
<script>
let show = function() {
console.log('Anonymous function');
};
show();
</script>
</body>
</html> Output:
Let’s see how to pass arguments to the anonymous function.
<script>
var greet = function (platform) {
console.log("Welcome to", platform);
};
greet("EyeHunts!");
</script>Output: Welcome to EyeHunts!
Callback function to the setTimeout() method. This executes this anonymous function 2000ms later.
setTimeout(function() {
console.log('Execute later after 2 second')
}, 2000);Immediately invoked function execution or created a self-executing function.
(function() {
console.log('IIFE');
})();Arrow functions
ES6 introduced the Arrow function expression that provides a shorthand for declaring anonymous functions: Arrow functions provide a more concise syntax for creating anonymous functions.
let show = () => console.log('Anonymous function');and
let add = (a, b) => a + b;
In JavaScript, anonymous functions are functions that are defined without a name. They are often used for short-lived, one-time operations or as arguments to other functions. There are two main ways to create anonymous functions in JavaScript: using function expressions and arrow functions.
- Function Expressions: A function expression defines a function as part of an expression, and it doesn’t require a function name. Here’s an example:javascriptCopy code
// Anonymous function using a function expression var myFunction = function() { console.log("This is an anonymous function."); }; // Call the anonymous function myFunction();In this example,myFunctionis a variable that holds an anonymous function. - Arrow Functions (ES6 and later): Arrow functions provide a more concise syntax for creating anonymous functions. Here’s an example:javascriptCopy code
// Anonymous function using an arrow function var myFunction = () => { console.log("This is an anonymous function using an arrow function."); }; // Call the anonymous function myFunction();Arrow functions are especially useful for short, simple functions. They have a more concise syntax and automatically bind thethisvalue from the enclosing scope.
Additionally, you can use anonymous functions directly as arguments to other functions. This is common when working with higher-order functions like map, filter, and forEach. Here’s an example using an anonymous function with the Array.prototype.map method:
var numbers = [1, 2, 3, 4, 5];
var squaredNumbers = numbers.map(function(num) {
return num * num;
});
console.log(squaredNumbers); // Output: [1, 4, 9, 16, 25]
In this example, the anonymous function is passed as an argument to map and is used to square each element in the array.
Anonymous functions are handy in situations where you don’t need to reuse the function elsewhere in your code. They are commonly used for callbacks, event handlers, and short-lived operations.
Comment if you have any doubts or suggestions on this JS function topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version