Hoisting and Execution Context

How do closures maintain persistent variable references between calls?

function outer() {
  var x = 10;
  function inner() {
    var y = 5;
    console.log(x + y);
    x = x + 1;
  }
  return inner;
}

var closureFn = outer();
closureFn(); // First call
closureFn(); // Second call

15, 15
15, 16
The output will be `15, 16`. This code demonstrates how closures maintain references to variables in their outer lexical environment, not just copies of their values. Here's what happens: 1. The `outer()` function is called and creates a local variable `x` with value 10. 2. It defines an inner function that accesses both its own local variable `y` and the outer variable `x`. 3. The inner function is returned and assigned to `closureFn`. 4. Even though `outer()` has finished executing, the `inner()` function maintains access to the environment where it was created, including the variable `x`. 5. When `closureFn()` is called the first time, it accesses `x` (which is 10) and `y` (which is 5), logs their sum (15), and increments `x` to 11. 6. When `closureFn()` is called the second time, it creates a new `y` with value 5, but accesses the same `x` which is now 11, logs their sum (16), and increments `x` to 12. This demonstrates that the closure maintains a reference to the variable `x` itself, not just its value at the time of closure creation. Changes to `x` persist between function calls because it's the same variable being accessed each time. This behavior is fundamental to understanding how closures work in JavaScript and enables patterns like data encapsulation and stateful functions.
Error: x is not defined
undefined, undefined

Next Question (17/20)