Hoisting and Execution Context

How do separate closures maintain independent state?

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

const counter1 = createCounter();
const counter2 = createCounter();

counter1();
counter1();
counter2();

1, 2, 3
1, 2, 1
The output will be `1, 2, 1`. This example demonstrates closures and how separate function instances maintain their own enclosed environments. Here's what happens: 1. `createCounter()` is called twice, creating two separate execution contexts, each with its own `count` variable initialized to 0. 2. Each call to `createCounter()` returns a new function that has access to its own enclosed `count` variable through closure. 3. `counter1` and `counter2` are different functions, each with their own separate closure over different instances of the `count` variable. 4. When `counter1()` is called the first time, it increments its enclosed `count` from 0 to 1 and logs 1. 5. When `counter1()` is called a second time, it increments the same enclosed `count` from 1 to 2 and logs 2. 6. When `counter2()` is called, it increments its own separate enclosed `count` variable from 0 to 1 and logs 1. This demonstrates how closures maintain separate state for different function instances, even if they were created from the same function definition. Each closure has its own environment with its own variables. This behavior enables patterns like creating multiple independent counters, each with its own state.
1, 1, 1
undefined, undefined, undefined

Next Question (16/20)