What is a closure in JavaScript, and how/why would you use one?

In the book "You Don't Know JS" (YDKJS) by Kyle Simpson, a closure is defined as follows:

Closure is when a function is able to remember and access its lexical scope even when that function is executing outside its lexical scope

In simple terms, functions have access to variables that were in their scope at the time of their creation. This is what we call the function's lexical scope. A closure is a function that retains access to these variables even after the outer function has finished executing. It is as if the function has a memory of its original environment.

function outerFunction() {
  const outerVar = "I am outside of innerFunction";

  function innerFunction() {
    console.log(outerVar); // `innerFunction` can still access `outerVar`.
  }

  return innerFunction;
}

const inner = outerFunction(); // `inner` now holds a reference to `innerFunction`.

inner(); // "I am outside of innerFunction"
// Even though `outerFunction` has completed execution, `inner` still has access to variables defined inside `outerFunction`.

Key points to remember:

• Closure occurs when an inner function has access to variables in its outer (lexical) scope, even when the outer function has finished executing.
• Closure allows a function to remember the environment in which it was created, even if that environment is no longer present.
• Closures are used extensively in JavaScript, such as in callbacks, event handlers, and asynchronous functions.