What is an anonymous function in JavaScript?

— 4 minute read

An anonymous function is a function defined without a name.

This could be either a normal function or an arrow function, let's take an example:

function() {
    // this is an anonymous function
}

() => {
   // this is an anonymous arrow function
}

It is different from named functions which are functions that have a name. For example:

function doSomething() {
  // named function
}

const doSomething = () => {
  // named arrow function
};

Notice how the arrow function takes the name as a variable declaration.

Now you might be wondering, why do we have this concept of anonymous functions in JavaScript?

Why it exists

JavaScript relies heavily on callbacks.

A callback is a function that will be called (sometimes it could be called in the future).

Those functions often do not require a name, which is when we tend to use anonymous functions.

Here are a few examples:

Array operations

The most common use case is array operations such as .forEach, .map, .filter, etc.

const numbers = [1, 2, 3];
numbers.forEach(function(number) {
  // anonymous function
  console.log(number);
});

numbers.forEach(number => {
  // anonymous arrow function
  console.log(number);
});

Notice how the function does not take a name, because we will not need to call that function again later on.

Event listeners

Another common example is event listeners.

const button = document.querySelector('button');

button.addEventListener('click', () => {
  // anonymous (arrow) function
  console.log('Button clicked');
});

However the moment you need to call removeEventListener then you would need to give that function a name. For example:

const button = document.querySelector('button');

const handleClick = () => {
  // named (arrow) function
  console.log('Button clicked');
};

button.addEventListener('click', handleClick);

// remove event listener after 1 second
setTimeout(() => {
  button.removeEventListener('click', handleClick);
}, 1000);
Do you want to Learn JavaScript step by step?
Checkout my interactive course where you read short lessons, solve challenges in the browser and recap topics with Flashcards:
Learn JavaScript