En mi código, creo botones que usan la variable i en el bucle declarado a través de la palabra clave var . Ahora cada botón registrará 10, es decir, el último valor de la variable. La pregunta es, ¿de dónde viene la variable en el controlador? ¿Lo recoge del alcance principal? Y en el caso de let , se crean 9 ámbitos y el controlador, al hacer clic, accede a i desde cada uno de ellos. Siempre pensé que el controlador i recuerda en cada paso del ciclo
<html> <head></head> <body> <h1>test</h1> <script> const start = () => { const body = document.querySelector('body'); for (var i = 1; i < 10; i++) { const button = document.createElement('button'); button.onclick = function() { console.log(i); } console.log(i) body.appendChild(button); } } start(); </script> </body> </html>En Javascript, las variables se escriben como referencia. Entonces, en el alcance del bucle for solo hay un i . Y se incrementa en cada iteración. Es por eso que cada botón imprime el último valor.
La respuesta simple se debe al alcance y los cierres. la variable definida con var tiene un alcance de función y dado que onClick es una función, los cierres entran en juego y al final del ciclo, el valor del cierre es 10.
las variables definidas con let tienen un alcance de bloque y, por lo tanto, se crea un nuevo alcance para cada ciclo con valor 1.
Es un problema js clásico causado por el alcance de la función de 'var'. Se resuelve desde ES6 a través de 'let' y 'const' porque tienen alcance de bloque (cada {} crea un alcance para las variables creadas a través de 'let' y 'const'). Si cambia la declaración del iterador de 'var' a 'let', funcionará como se esperaba.