An **anonymous function** is a function without a name. They appear as callbacks to event listeners, array methods, and timers. The **IIFE (Immediately Invoked Function Expression)** pattern uses anonymous functions to create isolated scopes and avoid polluting the global namespace.
1Understanding Anonymous Functions
An anonymous function is a function without a name. They appear as callbacks to event listeners, array methods, and timers. The IIFE (Immediately Invoked Function Expression) pattern uses anonymous functions to create isolated scopes and avoid polluting the global namespace.
Modern JavaScript prefers arrow functions over anonymous function expressions for callbacks due to shorter syntax and lexical this.
// Arrow function as anonymous callback
const nums = [1, 2, 3, 4, 5];
const doubled = nums.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
// Event listener with anonymous function
document.getElementById('btn').addEventListener('click', function() {
console.log('Clicked!');
});2Practical Example
Here is a real-world application of Anonymous Functions showing how it is used in production JavaScript code.
// IIFE: Immediately Invoked Function Expression
(function() {
const privateVar = 'I am private';
console.log(privateVar);
})();
// console.log(privateVar); // ReferenceError3Best Practices
Follow these guidelines when working with Anonymous Functions:
1. Use arrow functions instead of anonymous function() for short callbacks
2. Name your IIFEs for better stack traces
3. Avoid anonymous functions in critical paths where debugging is needed
Tip: Modern JavaScript prefers arrow functions over anonymous function expressions for callbacks due to shorter syntax and lexical this.
// Arrow function as anonymous callback
const nums = [1, 2, 3, 4, 5];
const doubled = nums.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
// Event listener with anonymous function
document.getElementById('btn').addEventListener('click', function() {
console.log('Clicked!');
});