Anonymous Functions in JavaScript

Anonymous Functions in JavaScript

An anonymous function is a function without a name. They are common in JavaScript, especially as callbacks. Here is how they work and the trade-offs.

What an Anonymous Function Is

// named function
function greet(name) { return `Hello, ${name}`; }

// anonymous function (assigned to a variable)
const greet = function (name) { return `Hello, ${name}`; };

// anonymous arrow function
const greet = (name) => `Hello, ${name}`;
``
The second and third examples are anonymous: the function itself has no name. The variable `greet` has a name, but the function does not.

### Anonymous Functions as Callbacks

```js
setTimeout(function () {
  console.log("after 1 second");
}, 1000);

[1, 2, 3].map(function (n) {
  return n * 2;
});

button.addEventListener("click", () => {
  console.log("clicked");
});
``
These are the most common use cases: one-off callbacks where the function does not need a name.

### Named Function Expressions

```js
const greet = function sayHi(name) {
  return `Hello, ${name}`;
  // sayHi is available inside the function for recursion
};
``
The internal name `sayHi` is only visible inside the function. It is useful for recursion and produces better stack traces.

### Trade-offs of Anonymous Functions

**Advantages**:
- Concise: no need for a name when the function is used once.
- Clean: less naming clutter for one-off callbacks.

**Disadvantages**:
- **Stack traces**: anonymous functions show as `<anonymous>` in error traces, making debugging harder.
- **No self-reference**: cannot reference the function itself (for recursion or removal).
- **No debugging name**: the debugger shows `<anonymous>` instead of a meaningful name.

### When to Use Named Functions

- **Recursion**: the function needs to call itself.
- **Event listeners you will remove**: `removeEventListener` needs the same reference, which is easier with a named function stored in a variable.
- **Critical code paths**: where stack traces matter for debugging.
- **Reusable functions**: called from multiple places.

### When to Use Anonymous Functions

- **One-off callbacks**: `setTimeout`, `map`, `filter`.
- **Short arrow functions**: `(x) => x * 2`.
- **IIFEs**: `(function () { ... })()`.

### The Takeaway

Anonymous functions have no name. They are concise for one-off callbacks. But they produce worse stack traces (`<anonymous>`), cannot self-reference, and are harder to debug. Use named functions for recursion, removable listeners, and critical code paths. Use anonymous functions for short, one-off callbacks.