Day 6: Closures in JavaScript

What is a Closure?

A closure is created when a function is defined within another function, allowing the inner function to access the variables, parameters, and even other functions of its outer function, even after the outer function has completed execution...

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

  function innerFunction() {
    console.log(message);
  }

  return innerFunction;
}

const myClosure = outerFunction();
myClosure(); // Output: Hello

This behavior is possible because JavaScript has lexical scoping, which means variables defined in an outer scope are accessible within an inner scope.

Understanding Lexical Scope:

To understand closures better, we need to grasp the concept of lexical scope. Lexical scope means that variables are resolved based on their position in the source code, at the time the code is written, rather than at runtime. This static scoping mechanism allows inner functions to access variables from their enclosing function, creating closures.

Use Cases for Closures:

• Data Encapsulation: Closures enable encapsulating data and providing controlled access through functions. This helps in building modular and reusable code.
• Function Factories: Closures can be used to create specialized functions based on a shared template, with each function having its own private state.
• Event Handlers: Closures are widely used in event-driven programming to preserve the context of an event handler and maintain access to relevant data.

Examples

Module design pattern

function createCounter() {
  let count = 0;

  function increment() {
    count++;
    console.log(count);
  }

  function decrement() {
    count--;
    console.log(count);
  }

  return {
    increment,
    decrement
  };
}

const counter = createCounter();
counter.increment(); // Output: 1
counter.increment(); // Output: 2
counter.decrement(); // Output: 1

Function Factories

function createMultiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = createMultiplier(2);
console.log(double(5)); // Output: 10

const triple = createMultiplier(3);
console.log(triple(5)); // Output: 15

Callbacks and Asynchronous Operations

function fetchData(url, callback) {
  // Simulating asynchronous data fetching
  setTimeout(function() {
    const data = { /* fetched data */ };
    callback(data);
  }, 1000);
}

function processAndDisplay(data) {
  // Process the data and display it
  console.log(data);
}

fetchData('https://api.example.com/data', processAndDisplay);

Memoization

function memoize(fn) {
  const cache = {};

  return function(...args) {
    const key = JSON.stringify(args);

    if (cache[key]) {
      return cache[key];
    }

    const result = fn(...args);
    cache[key] = result;

    return result;
  };
}

function fibonacci(n) {
  if (n <= 1) {
    return n;
  }

  return fibonacci(n - 1) + fibonacci(n - 2);
}

const memoizedFibonacci = memoize(fibonacci);
console.log(memoizedFibonacci(10)); // Output: 55 (computed)
console.log(memoizedFibonacci(10)); // Output: 55 (cached)

Best Practices and Caveats:

• Be mindful of memory usage: Closures retain the entire lexical environment, including variables and functions, even if they are no longer needed. Be cautious when using closures in long-lived or recursive functions, as they can lead to memory leaks if not managed properly.
• Minimize shared mutable state: Closures that share mutable state can introduce unexpected bugs and make your code harder to reason about. Whenever possible, strive for immutability and minimize shared mutable state within closures.
• Understand scoping and variable lifetime: Closures can cause variables to live longer than expected if they are referenced by an active closure. Be aware of variable lifetimes and ensure that your code behaves as intended.