When to Use Anonymous Functions in JavaScript

You have been learning about anonymous functions. You know how they work and even understand their syntax.

But when should you actually use them? Do they have any advantages over named functions?

Let's dive into that in this article. Let's get started!

Anonymous functions are functions without a name. They're typically used when you only need to run them once within a task, rather than being repeatedly called by other parts of the code. Here are some common scenarios where anonymous functions are commonly used:

1. As an argument when a function is called

// Define a function that takes another function as an argument
function applyOperation(x, y, operation) {
  let result = operation(x, y);
  return result;
}

// Call the function with an anonymous function for addition
const resultAddition = applyOperation(5, 3, function (a, b) {
  return a + b;
});

console.log(resultAddition); // Output: 8

2. Callback Functions

When you're passing a function as an argument to another function, and that function is expected to execute the provided function at some point, using an anonymous function can be convenient.

// Using an anonymous function as a callback
setTimeout(function () {
  console.log("Delayed message");
}, 1000);

3. Array Methods

Array methods like map, filter, and reduce often take a callback function as an argument. Anonymous functions are commonly used in these situations:

const numbers = [1, 2, 3, 4, 5];

const squared = numbers.map(function (num) {
  return num * num;
});

4. To assign the value of a property to an object.

// Object with a property assigned using an anonymous function
let obj = {
  multiplyByTwo: function (x) {
    return x * 2;
  },
};

// Using the property in the object
let result = obj.multiplyByTwo(5); // Result will be 10

5. In event handlers and listeners to perform a task when an event occurs.

// Adding an event listener with an anonymous function
document.getElementById("myButton").addEventListener("click", function () {
  alert("Button Clicked!");
});

6. IIFE

Pronounced as "iffy," these functions are not given a name. Instead, they are executed once as the interpreter comes across them.

IIFE's are commonly used as a wrapper around a set of code. Any variables declared within that anonymous function are effectively protected from variables that might have the same name.

let area = (function () {
  let width = 3;
  let height = 6;
  return width * height;
})();