4

Estoy haciendo un tutorial de Javascript para aprender el lenguaje, el caso es que normalmente en otros lenguajes de programación el for se compone por una declaración seguida de un condicional y un aumento o devaluación del iterador, en este caso no lo usa de esa forma y tampoco entiendo que es lo que hace, alguien me podría echar una mano?

Os dejo la función en cuestión:

function move(){
    var aBalloon = document.queryselectorAll(".balloon");
    for(var i=0,item;item = aBalloon[i++];){
        item.style.top = item.offsetTop - 10 + "px";
    }
}
1
  • Bienvenido a Stack Overflow en español, te sugiero que hagas el recorrido de bienvenida y, de paso, ganar tu primera medalla. También es importante que leas Cómo preguntar y ejemplo mínimo verificable para poder mejorar tus preguntas y que sean bien recibidas por la comunidad, de esta manera favoreces a que los usuarios las respondan y te ayuden Commented el 9 may. 2019 a las 11:06

3 respuestas 3

12

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:

  1. La variable i tiene un valor al inicio de cada iteración, que en la primera será 0 (cero).
  2. A la variable item se le asigna en la primera iteración el valor aBalloon[0]
  3. i se incrementa en 1 después de esta asignación.
  4. 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.

6

Acá cree un ejemplo imitando el que nos compartes, el ciclo for de javascript se puede utilizar como especie de un "ciclo while" también.

El ciclo for espera 3 expresiones: for(declaraciones; condicional; ejecución al terminar cada ciclo);

Entonces, se le esta pasando lo siguiente:

for (var i = 0, item; item = lista[i++];)

declaraciones = i = 0 y item (inicializamos las dos variables)

condicional = item = lista[i++] (el condicional ejeculta el ciclo siempre que el mismo devuelva "true", es decir, item = lista[1] es true, pero item = lista[5] es undefined y por ende acá ya se deja de ejecutar el ciclo.

ejecución al terminar cada ciclo = acá no le estamos pasando nada porque no queremos que se haga nada más al finalizar el ciclo.

var lista = [{
            "nombre": "test1",
            "propiedad": "propiedad de 1"
        },
        {
            "nombre": "test2",
            "propiedad": "propiedad de 2"
        },
        {
            "nombre": "test3",
            "propiedad": "propiedad de 3"
        },
        {
            "nombre": "test4",
            "propiedad": "propiedad de 4"
        }

    ]
    for (var i = 0, item; item = lista[i++];) {
        console.log(item.propiedad);
    }

1
  • Muchas gracias @Yohangel Ramos, gran respuesta y muy útil, un saludo.
    – Pedrouzo
    Commented el 9 may. 2019 a las 11:28
4

Ese for es equivalente a esto:

function move(){
    var aBalloon = document.queryselectorAll(".balloon");
    var i;
    var item;

    for( i = 0; item = aBalloon[i++]; ) {
      item.style.top = item.offsetTop - 10 + "px";
    }

Como ves, lo único que ha hecho es aprovechar el var para declarar ahí 2 variables en lugar de 1. Como está usando var y las variables así declaradas tienen scope de función, el código se comporta como el que muestro.

2
  • 1
    Si puedes, separa i++ en el tercer elemento de bucle for, gracias. Commented el 9 may. 2019 a las 11:22
  • Vale gracias Trauma, me queda claro
    – Pedrouzo
    Commented el 9 may. 2019 a las 11:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.