javascript
  1. javascript-closures
PreviousNext

JavaScript Closures

Closures are a fundamental concept in JavaScript, often described as one of its key features. They are created whenever a function is defined, capturing the values of any variables in the surrounding scope at that time. This allows for powerful and flexible programming techniques, such as factory functions and partial application.

Syntax

A closure is created whenever a function is defined inside another function:

function outerFunction() {
  const outerVariable = 'Hello';

  function innerFunction() {
    const innerVariable = 'World';
    console.log(outerVariable + ', ' + innerVariable);
  }

  innerFunction();
}

outerFunction(); // Output: "Hello, World"

In the above example, innerFunction is defined inside outerFunction, and it can access outerVariable even after outerFunction has returned.

Example

Here is an example of a factory function that uses closures to create new objects:

function createCounter() {
  let count = 0;
  
  return function() {
    count++;
    console.log(count);
  };
}

const counter1 = createCounter();
counter1(); // Output: 1
counter1(); // Output: 2

const counter2 = createCounter();
counter2(); // Output: 1

The createCounter function returns a new function that has access to the count variable. Each time the returned function is called, it increments the counter and logs its value to the console.

In this way, we can create multiple instances of the counter function that each have their own independent count.

Output

Hello, World
1
2
1

Explanation

Closures allow JavaScript functions to access and manipulate variables that are not in their own scope. When a function is defined inside another function, it captures its surrounding variables and keeps a reference to them, even if they are no longer in scope.

This is what allows us to create powerful and flexible programming techniques, such as factory functions and partial application.

Use

Closures are used in a wide variety of contexts in JavaScript programming, such as:

  • Creating private variables and methods in object-oriented programming
  • Creating iterators and generators
  • Using currying and partial application to create higher-order functions
  • Building event listeners and callbacks

Important Points

  • Closures are created whenever a function is defined inside another function.
  • They can access variables in the surrounding scope, even after that scope has returned.
  • Closures are used to create powerful and flexible programming techniques, such as factory functions and partial application.
  • Closures can be used to create private variables and methods in object-oriented programming.
  • They are also used in creating iterators and generators, event listeners and callbacks.

Summary

Closures are a fundamental concept in JavaScript programming, allowing functions to access variables in their surrounding scope. They can be used to create powerful and flexible programming techniques, such as factory functions and partial application. Understanding closures is essential for effective JavaScript programming.

callbackDate Difference
Published on: