¿Por qué al definir una variable de bucle con let, sin usar la técnica IFFE, podemos establecer un valor específico de esa variable en una función sin perderlo?

Leí páginas de MDN sobre const, let, var. El resumen de eso es que antes de ES2015 solo teníamos scope global y scope de función. En esta página de MDN hay un ejemplo de los beneficios del scope de bloque; muestra que en lugar de usar el concepto de cierre para guardar datos relacionados para una función, como el número de iteración del bucle for, se define la variable de bucle como let. Si la palabra clave let es solo para el ámbito de bloque, ¿cómo nos proporciona esta funcionalidad? ¿Existen otros lenguajes de programación que tengan este concepto?

let divClassX = document.querySelectorAll('.x');
for (let j = 0; j < 2; j++) {
divClassX[j].onclick = function (event) {
console.log('class x div\'s x ' + j)
}
}

El código anterior tiene la misma funcionalidad que:

let divClassX = document.querySelectorAll('.x');
for (var j = 0; j < 2; j++) {
divClassX[j].onclick = (function (j) {
return function (event) {
console.log('class x div\'s x ' + j)
}
})(j)
}

Supuse que alguna funcionalidad como esa existe, por lo que el siguiente código debe funcionar como el anterior, pero cuando hice clic en div1 o div2, ambas veces obtuve 2, pero esperaba uno cuando hacía clic en div1 y dos cuando hacía clic en div2.

        let div1 = document.querySelector('#div1');
        let div2 = document.querySelector('#div2');

<pre><code>    let i = 1;
    div1.onclick = function (event) {
        console.log(i);
    }
    i = i + 1;
    div2.onclick = function (event) {
        console.log(i);
    }
</code></pre>

¿Qué concepto existe que desconozco?