Understanding JavaScript closure and where it can be used

Save state in asynchronous programming

function createIncrementer() {
  let count = 0;

  function increment() {
    count++;
    console.log(`Count: ${count}`);
  }

  return {
    incrementAsync() {
      setTimeout(() => {
        increment();
      }, 1000);
    }
  };
}

const incrementer = createIncrementer();

incrementer.incrementAsync(); // Count: 1
incrementer.incrementAsync(); // Count: 2
incrementer.incrementAsync(); // Count: 3

In the code above, we defined a function createIncrementer() that returns an object containing a method incrementAsync(). This method will call an internal increment() function after 1 second. The increment() function accesses the variable count defined in the outer function createIncrementer() through closure, so it can continue to keep track of the count between multiple calls to the incrementAsync() method. We created an incrementer object and called its incrementAsync() method multiple times, and each time it will output the current count value after 1 second. Note that we did not explicitly pass any parameters in this process, but instead used closure to maintain the count state, thus avoiding the hassle of manually passing state in asynchronous programming.

Implementing Function Currying

Implement the curry function of below code.

function sum(a, b, c) {
  return a + b + c;
}

const curriedSum = curry(sum);

curriedSum(1, 2, 3); // 6
curriedSum(1)(2, 3); // 6
curriedSum(1, 2)(3); // 6
curriedSum(1)(2)(3); // 6

Answer

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function(...args2) {
        return curried.apply(this, args.concat(args2));
      };
    }
  };
}

function sum(a, b, c) {
  return a + b + c;
}

const curriedSum = curry(sum);

console.log(curriedSum(1, 2, 3)); // 6
console.log(curriedSum(1)(2, 3)); // 6
console.log(curriedSum(1, 2)(3)); // 6
console.log(curriedSum(1)(2)(3)); // 6

Implement higher-order functions

Higher-order function for calculating execution time

function timingDecorator(fn) {
  return function() {
    console.time("timing");
    const result = fn.apply(this, arguments);
    console.timeEnd("timing");
    return result;
  };
}

const add = function(x, y) {
  return x + y;
};

const timingAdd = timingDecorator(add);
console.log(timingAdd(1, 2));

Higher-order function for caching return result

function memoizeDecorator(fn) {
  const cache = new Map();
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key);
    }
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

const fibonacci = function(n) {
  if (n < 2) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
};

const memoizeFibonacci = memoizeDecorator(fibonacci);
console.log(memoizeFibonacci(10));

Implementing a deferred execution function

function delayDecorator(fn, delay) {
  return function() {
    const args = arguments;
    setTimeout(function() {
      fn.apply(this, args);
    }, delay);
  };
}

const sayHello = function(name) {
  console.log(`Hello, ${name}!`);
};

const delayedHello = delayDecorator(sayHello, 1000);
delayedHello("John");

Implementing generator

function makeGenerator(array) {
  let index = 0;
  return function() {
    if (index < array.length) {
      return { value: array[index++], done: false };
    } else {
      return { done: true };
    }
  };
}

const generator = makeGenerator([1, 2, 3]);

let result = generator();
while (!result.done) {
  console.log(result.value);
  result = generator();
}

In this example, we define a function called makeGenerator, which takes an array as its parameter and returns a new function. This new function uses closure to save the array index internally and returns each element of the array in sequence based on the index, until all elements are returned. We pass the array [1, 2, 3] to the makeGenerator function and assign the returned function to the variable generator. Then, we call the generator function to retrieve each element of the array one by one and output them to the console. In this way, we can easily use closure to implement generators and generate values one by one in a lazy manner, avoiding the performance and memory consumption issues caused by calculating all values at once. At the same time, using closure can maintain the state and scope of the function, avoiding problems such as global variable pollution and variable conflicts.

Implementing event listener

function createEventListener(element, eventName, handler) {
  element.addEventListener(eventName, handler);
  return function() {
    element.removeEventListener(eventName, handler);
  };
}

const button = document.getElementById("myButton");
const onClick = function() {
  console.log("Button clicked!");
};

const removeEventListener = createEventListener(button, "click", onClick);

setTimeout(function() {
  removeEventListener();
}, 5000);

In this example, we define a createEventListener function that takes a DOM element, an event name, and an event handler function as arguments and returns a new function. This new function uses closure to save the DOM element, event name, and event handler function internally and adds an event listener to the DOM element when executed. We pass a button element, a click event handler function, and the event name "click" to the createEventListener function and assign the returned function to removeEventListener. Then, we manually remove the event listener by calling the removeEventListener function after a certain time period to stop responding to button click events. This way, we can easily implement event listeners using closures and control their lifecycle in a flexible way, avoiding memory leaks and performance issues. Using closure also allows us to maintain the function's state and scope, avoiding global variable pollution and variable conflicts.

Reference: js闭包的理解 - 掘金 (juejin.cn)