Lexical Declarations in Javascript for loop initialization block

In the mdn docs it gives an example in which functions are initialized in the for loop initialization block

for (
  let i = 0, getI = () => i, incrementI = () => i++;
  getI() < 3;
  incrementI()
) {
  console.log(i);
}
// Logs 0, 0, 0

It gives the following explanation of why this occurs:
> This logs "0, 0, 0", because the i variable in each loop evaluation is actually a separate variable, but getI and incrementI both read and write the initial binding of i, not what was subsequently declared.

For each iteration we get a new i in the for loop body. The i variable in the initialization block is also in the scope of the for loop body.

I am hoping someone can explain this a bit better than what mdn did, I am having a bit of a hard time grasping what is going on here since there is a closure here, the i variable belongs to the scope of the for loop body, and when I add a debugger statement to getI or incrementI everything looks as one might expect, just inside the for loop body it doesn't seem to see it and it logs 0 each iteration.

Each iteration of your loop creates a new scope that has its own binding for i. In addition, before your loop begins iterating, a separate scope is created that initializes your i, getI, and incrementI variables. For each iteration that follows, the new bindings that are created in the new scopes are initialized to the values of the variables created in the previous scope created.

Your functions are initially created in the initial scope before your loop beings executing and have visibility over the i created in that initial scope, and so that's the version of i that your functions update/read, and is also why the loop is eventually able to terminate.

Your for-loop body however has access to the i defined in the new scope created at that particular iteration of the loop that’s executing, which is 0 as the incrementer expression does not update that particular i binding, it only updates the initial binding created at the beginning of all the iterations.

To put things into perspective, you could think of your loop flattening out to something like below for the first two iterations, where i_0 and i_1 represent your i variable at different iteration stages:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// Initial scope, created before iterations occur
let i, incrementI, getI;
i = 0;
incrementI = () => i++;
getI = () => i;

// First iteration scope (new bindings for `i`, `incrementI` and `getI` are created. 
let i_0, incrementI_0, getI_0;
i_0 = i;
incrementI_0 = incrementI;
getI_0 = getI;

if(getI_0() < 3)
  console.log(i_0);


// Second iteration scope (new bindings for `i`, `incrementI` and `getI` are created)
let i_1, incrementI_1, getI_1; // new declarations are created for new iteration
i_1 = i_0; // 0, as i_0 is 0
incrementI_1 = incrementI_0;
getI_1 = getI_0;

incrementI_1(); // increments i_0, not i_1. i_0 is now 1

if(getI_1() < 3) // checks i_0 (now 1) is less than 3.
  console.log(i_1); // logs i_1, still 0

<!-- end snippet -->

> the i variable belongs to the scope of the for loop body

Indeed, but the thing is (as mdn wrote it):

> This is because getI is not re-evaluated on each iteration — rather, the function is created once and closes over the i variable, which refers to the variable declared when the loop was first initialized. Subsequent updates to the value of i actually create new variables called i, which getI does not see.

It's a quote but i could honestly not explain it better.
You could maybe see it as : 3 i variable are created and your getI() is only binded to the first one basically.