Con var , tiene un alcance de función y solo un enlace compartido para todas sus iteraciones de bucle, es decir, la i en cada devolución de llamada setTimeout significa la misma variable que finalmente es igual a 6 después de que finaliza la iteración de bucle.

Con le let tener un alcance de bloque y cuando se usa en el bucle for obtiene un nuevo enlace para cada iteración, es decir, la i en cada devolución de llamada setTimeout significa una variable diferente , cada una de las cuales tiene un valor diferente: el primero es 0, el el siguiente es 1 etc

Así que esto:

 (function timer() { for (let i = 0; i <= 5; i++) { setTimeout(function clog() { console.log(i); }, i * 1000); } })();

es equivalente a esto usando solo var:

 (function timer() { for (var j = 0; j <= 5; j++) { (function () { var i = j; setTimeout(function clog() { console.log(i); }, i * 1000); }()); } })();

usando la expresión de función invocada inmediatamente para usar el alcance de la función de una manera similar a como funciona el alcance del bloque en el ejemplo con let .

Podría escribirse más corto sin usar el nombre j , pero tal vez no sería tan claro:

 (function timer() { for (var i = 0; i <= 5; i++) { (function (i) { setTimeout(function clog() { console.log(i); }, i * 1000); }(i)); } })();

Y aún más corto con funciones de flecha:

 (() => { for (var i = 0; i <= 5; i++) { (i => setTimeout(() => console.log(i), i * 1000))(i); } })();

(Pero si puede usar funciones de flecha, no hay razón para usar var ).

Así es como Babel.js traduce su ejemplo con let para ejecutarse en entornos donde let no está disponible:

 "use strict"; (function timer() { var _loop = function (i) { setTimeout(function clog() { console.log(i); }, i * 1000); }; for (var i = 0; i <= 5; i++) { _loop(i); } })();

Gracias a Michael Geary por publicar el enlace a Babel.js en los comentarios. Vea el enlace en el comentario para una demostración en vivo donde puede cambiar cualquier cosa en el código y ver la traducción que se lleva a cabo de inmediato. Es interesante ver cómo se traducen también otras características de ES6.

Técnicamente es como explica @rsp en su excelente respuesta. Así es como me gusta entender que las cosas funcionan bajo el capó. Para el primer bloque de código usando var

 (function timer() { for (var i=0; i<=5; i++) { setTimeout(function clog() {console.log(i)}, i*1000); } })();

Puedes imaginar que el compilador funciona así dentro del bucle for

 setTimeout(function clog() {console.log(i)}, i*1000); // first iteration, remember to call clog with value i after 1 sec setTimeout(function clog() {console.log(i)}, i*1000); // second iteration, remember to call clog with value i after 2 sec setTimeout(function clog() {console.log(i)}, i*1000); // third iteration, remember to call clog with value i after 3 sec

y así

dado que i se declara usando var , cuando se llama a clog , el compilador encuentra la variable i en el bloque de funciones más cercano que es timer y dado que ya hemos llegado al final del ciclo for , i el valor 6 y ejecuto clog . Eso explica que 6 se registre seis veces.