JavaScript Anonymous Functions

What is an anonymous function in JavaScript?

An anonymous function is a function that does not have a name. It is often used as a function expression, typically as a callback or when passing a function as an argument to another function.

How do you define an anonymous function?

You can define an anonymous function by simply creating a function expression without a name.


const add = function(a, b) {
  return a + b;
};

console.log(add(2, 3)); // 5

Can you provide an example of an anonymous function used as a callback?

Anonymous functions are commonly used as callbacks in event handling or asynchronous operations.


setTimeout(function() {
  console.log('Executed after 2 seconds');
}, 2000); // Outputs after 2 seconds

What is an Immediately Invoked Function Expression (IIFE)?

An IIFE is a function that is defined and executed immediately after its creation. It is often used to create a new scope, encapsulating variables and avoiding polluting the global scope.


(function() {
  const message = 'I am an IIFE!';
  console.log(message); // Outputs: I am an IIFE!
})(); // Immediately invoked

How can you use anonymous functions with the `addEventListener()` method?

You can pass an anonymous function directly as an argument to the addEventListener() method to handle events.


const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  alert('Button clicked!');
});

What are the advantages of using anonymous functions?

Advantages of using anonymous functions include:

They can be defined inline, which can improve readability for simple operations.
They create a new scope, helping to avoid variable conflicts and keeping the global scope clean.
They are commonly used in callbacks and event handling, making code concise.

What are the disadvantages of using anonymous functions?

Disadvantages of using anonymous functions include:

Debugging can be more challenging since they do not have names to identify them in stack traces.
They can lead to confusion if used excessively or nested deeply, reducing code clarity.

Can you create an anonymous function that returns another function?

Yes, you can create an anonymous function that returns another function, which is often used for creating closures.


const createCounter = function() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
};

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

How do anonymous functions relate to arrow functions in ES6?

Arrow functions are a more concise syntax for defining anonymous functions. They do not have their own this context, making them useful in situations where you want to retain the surrounding context.


const add = (a, b) => a + b; // Arrow function
console.log(add(2, 3)); // 5

const button = document.getElementById('myButton');
button.addEventListener('click', () => {
  alert('Button clicked!'); // Arrow function as an anonymous function
});

Ads

‹ JavaScript Interview