Ese bucle for es una forma un poco fea de hacer un "for each", vamos a verlo en detalle:
var aBalloon = document.queryselectorAll(".balloon");
Tenemos que aBalloon es una lista de elementos del documento
for(var i=0,item;item = aBalloon[i++];){
Esto es un bucle for
, que cumple la sintaxis siguiente:
for (estado_inicial ; condicion a cumplir ; instruccion) {
Las condiciones iniciales son:
var i=0,item;
Es decir, declara dos variables, i
con el valor 0 e item
con valor no definido (undefined
).
Ahora tenemos la condición que debe ser "verdadera" cada vez que se ejecuta el bucle:
item = aBalloon[i++]
Esto es bastante denso, así que voy explicar todo lo que ocurre aquí paso a paso:
- La variable
i
tiene un valor al inicio de cada iteración, que en la primera será 0 (cero).
- A la variable
item
se le asigna en la primera iteración el valor aBalloon[0]
i
se incrementa en 1 después de esta asignación.
- lo que valga
item
, se devuelve como valor de la condición. Si item
fuese undefined
(no existe un elemento en la posición aBalloon[i]
), Javascript lo interpretará como "falso", en otro caso será "verdadero" y podremos seguir con la ejecución.
Tras el último punto y coma no se ha añadido ninguna instrucción, por lo que se cierra el paréntesis sin más.
Una forma más clara de escribir este código habría sido alguna de las siguientes:
for(var i=0, item; item = aBalloon[i]; i++){
...
}
o
for (let i =0; i < aBalloon.length; i++) {
let item = aBalloon[i];
...
}
De este modo hacemos uso de la tercera parte de la sintaxis del bucle for
.
Pero podríamos hacer esto aún más bonito y claro:
for (let item of aBalloon) {
item.style.top = item.offsetTop - 10 + "px";
}
O, sin usar un bucle for:
aBalloon.forEach(item => {
item.style.top = item.offsetTop - 10 + "px";
});
En resumidas cuentas, el código de ese tutorial no es todo lo claro y elegante que podría y debería ser si queremos enseñar algo a gente sin demasiada experiencia.