Closures & Callback Functions

Understand advanced functional programming concepts in JavaScript.

Present State

Closures and callback functions are foundational concepts in JavaScript's functional programming paradigm. Closures enable functions to remember the scope in which they were created, while callbacks allow asynchronous or deferred execution of code, facilitating event handling, APIs, and more complex flow control.

Code Example

Example demonstrating closures and callback functions:

Closure & Callback Example

// Closure example: function retains access to outer scope variables
function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}
const counter = createCounter();

console.log(counter()); // 1
console.log(counter()); // 2

// Callback function example: executed after a delay
function greet(name, callback) {
  console.log('Hello, ' + name + '!');
  callback();
}

greet('Basha Ram', function() {
  console.log('This is a callback function executing after greeting.');
});
          

This code demonstrates:

  • How closures preserve access to variables from the outer scope even after the outer function has finished execution.
  • Using functions as arguments (callbacks) to enable deferred or asynchronous code execution.
  • Practical use of callbacks for sequencing code operations.
  • Creating private state using closures for data encapsulation.

Description

Closures: A closure occurs when a function retains access to its lexical scope even when executed outside of that scope. This allows functions to maintain private variables and state.

Callback Functions: These are functions passed as arguments to other functions, which are then invoked (called back) at a certain point in time, often after an asynchronous operation or event.

  • Closures enable data privacy and function factories.
  • Callbacks are essential for asynchronous programming, event handling, and custom control flows.
  • Improves modularity and flexibility in code design.

Applications

  • Creating private variables and encapsulation in modules.
  • Handling asynchronous operations like API calls and timers.
  • Building event-driven architectures with callbacks and closures.
  • Implementing higher-order functions and function factories.
  • Managing state in UI components and frameworks.

Multiple Choice Questions

Q1: What does a closure allow a function to do?

  • A. Execute asynchronously
  • B. Access variables from its lexical scope even after the outer function has returned
  • C. Create global variables automatically
  • D. Pass functions as arguments

Answer: B. Access variables from its lexical scope even after the outer function has returned

Q2: A callback function is:

  • A. A function that returns another function
  • B. A function passed as an argument to be executed later
  • C. A function that cannot access outer scope
  • D. A function that runs immediately

Answer: B. A function passed as an argument to be executed later

Q3: Which of the following best describes a use case for closures?

  • A. Creating private variables
  • B. Making HTTP requests
  • C. Adding event listeners
  • D. Manipulating DOM elements

Answer: A. Creating private variables

Q4: In the callback example, when is the callback function executed?

  • A. Before greeting the user
  • B. After greeting the user
  • C. At the start of the program
  • D. It is never executed

Answer: B. After greeting the user