No entiendo como funciona este bucle en javascript. ¿alguien puede explicarlo ?

[cibermanu]

Estoy siguiendo un tutorial de animación de objetos en javascript, pero me quedé atascado en la comprensión de un bucle que está implementado en dicho código. El bucle en cuestión es este:

for (var i=0;efectos[i];i++){
// acciones
}

siendo efectos un array de objetos como el que sigue:

[
{'inicio':0,'fin':350,'u':'px','propCSS':'width'},
{'inicio':0,'fin':350,'u':'px','propCSS':'height'} ,
{'inicio':0,'fin':1,'u':'','propCSS':'opacity'}
]


¿Alguien puede explicarme que significa, dentro de la cabecera del bucle for, efectos[i] ? No debe ser esta la condición de parada ? En cuyo caso, ¿cómo puede ser la condición de parada dependiente de una variable i que se va modificando en el transcurso del bucle for? ¿No implicaría esto que el bucle nunca pararía ?

Para quien le interese, el tutorial de animación que estoy siguiendo, y que parece bastante bueno, es el siguiente:

http://www.disegnocentell.com.ar/notas2.php?id=239

Gracias de antemano, espero vuestras opiniones y respuestas.

[Panino5001]

La segunda expresión dentro del paréntesis del for siempre se convierte a Boolean. De manera tal que lo que ocurre es esto:

Código PHP:

  <script type="text/javascript"> 
var o=[  
{'inicio':0,'fin':350,'u':'px','propCSS':'width'},  
{'inicio':0,'fin':350,'u':'px','propCSS':'height'} ,  
{'inicio':0,'fin':1,'u':'','propCSS':'opacity'}  
]; 
alert(Boolean(o[0]));//true 
alert(Boolean(o[3]));//false 
</script>  
  

[marlanga]

Esa forma de recorrer un array es más eficiente que usar la típica variable N=array.length. Pero solo puede usarse si se cumplen dos condiciones:
1-arrays que no sean asociativos (es decir, con índice numérico, y sin posiciones intermedias vacías.
2-Que el valor que contenga el array no sea un "falsy value", es decir, que no sea un valor que al conbertilo en boolean sea falso. Por ejemplo, el valor cero, es falso. O la cadena vacía "".

En ese caso, como el array contiene "objetos", se puede usar perfectamente. Cuando el índice apunte a una posición que no exista, devolverá un "undefined", que javascript interpreta como "false" si se usa como condición.

[cibermanu]

Gracias por todo compañeros!!

[Aijoona]

@marlanga

En JavaScript no existen los arrays asociativos (al menos no de manera nativa). Luego, que tenga posiciones intermedias vacías no afecta:

Código Javascript:

var arr = Array(5);
 
arr.push(1);
 
arr; // [undefined, undefined, undefined, undefined, undefined, 1]
 
for(var i = 0, l = arr.length; i < l; i++) {
    console.log(i, arr[i]);
}
 
/*
0 undefined
1 undefined
2 undefined
3 undefined
4 undefined
5 1
*/
 

Muy sutilmente, combertilo => convertilo :)

[marlanga]

Las posiciones vacías me refería al array con índice de entero.
http://jsfiddle.net/nRTdx/

En cuanto al array asociativo... bueno, en javascript, si nos ponemos finos, TODO son objetos (incluso el function).

[Aijoona]

Ah, no habia entendido la forma que planteabas de iterar. En dicho caso los falsy values si son molestos.

Con respecto a lo del array asociativo, un Array es un Object, pero no al revés. Y hago enfasis en esto, ya que es bastante común tratar a los Objects como arrays.

[cristian_cena]

- @aijoona: En JavaScript no existen los arrays asociativos ...
- @marlanga: ... bueno, en javascript, si nos ponemos finos, TODO son objetos ...
- @aijoona: ...un Array es un Object, pero no al revés...

Los muchos, que como yo, intentamos aprender javascript a fuerza de tutorial y precisamente con la guía de librosweb.es nos habremos encontrado con que definen a los objetos como arrays asociativos, cita textual:
"Técnicamente, un objeto de JavaScript es un array asociativo formado por las propiedades y los métodos del objeto. Así, la forma más directa para definir las propiedades y métodos de un objeto es mediante la notación de puntos de los arrays asociativos."

Mi pregunta es:
Si con paises['str'] añadimos propiedades a un objeto y no elementos a un array ¿entonces porque length devuelve 0 o undefined según se trate de un array o de un objeto y en todo caso no devueve undefined para ambos?

Código Javascript:

var paises = new Array();
paises['ur'] = 'Uruguay';
paises['ch'] = 'Chile';
paises['co'] = 'Colombia';
// parecería que añadimos valores al array
 
var provincias = new Object();
provincias["sf"] = "santa fe";
provincias["bs"] = "buenos aires";
provincias["ch"] = "chaco";
//añadimos propiedades al objeto
 
window.onload = function(){
    console.log(paises.co);     //pero en realidad añadimos propiedades al objeto.
    console.log(paises.length); // 0 
    console.log(provincias.length); // undefined 
    console.log(paises['co']);  //colombia
}
 

Desde ya agradecido, cualquier link es bienvenido

[zerokilled]

¡buenas!

@cena, honestamente no se que explicación más allá de la provista estás tratando de buscar. intentaré compartir mis ideas según como siempre he entendido el concepto. lo primero, hay que quitarse de la cabeza que los arrays asociativos existen en javascript. si fuera el caso, entonces debería ser posible tratar un array asociativo de la misma forma que un array indexado. uno de los ejemplos ya lo haz mostrado, la propiedad length se mantiene en cero en un objeto array o devuelve undefined en un objeto genérico. otro ejemplo que demuestra los arrays asociativos no existen es la carencia ‒ o la inhabilidad ‒ de los métodos para operar con array asociativos: push, shift, slice, splice, etc.

entonces, ¿por qué los tutoriales hacen mención de algo que no existe? en mi opinión se me ocurre dos cosas: primero, el autor desconoce de lo que habla (poco conocimiento en la materia o está desinformado); y segundo, el autor utiliza dicho vocabulario como una forma de ayudar al lector asociar las ideas y conceptos que se aplican en otros lenguajes. adicionalmente, pienso que la forma de la sintaxis introduce confusión de conceptos a algunos lectores. por ejemplo, en php $array['key'] denota que se trata de un array asociativo. como puedes ver, la sintaxis es exactamente igual a la de javascript. no obstante, tiene un significado completamente distinto, significa accesar/crear una propiedad de un objeto en particular. hay que tener en cuenta que la sintaxis de corchetes no es nada más que una forma alterna a la sintaxis de punto. en el caso de los arrays, si javascript determina que el valor dentro de los corchete no forma un índice válido, entonces lo considera como un accesor de propiedades.

[cristian_cena]

Hola zerokilled, lamento incurrir en un tema que seguro ya han tratado muchas veces, mi confusión pasaba por la sintaxis de corchetes y su similitud con los arrays asociativos en otros lenguajes.

Tal como dices, uso php y por alguna razón asocié que debía trabajar del mismo modo en javascript.

Dos modos de hacer lo mismo me parecía raro (usar sintaxis de corchetes o de punto para añadir/acceder a una propiedad), sumado a que librosweb fue el material con el que me formé, me costaba entender porque el autor hacía semejante afirmación.

Tu exposición es muy clara y despeja mis dudas. Gracias.

[zerokilled]

Dos modos de hacer lo mismo me parecía raro (usar sintaxis de corchetes o de punto para añadir/acceder a una propiedad)...

mírale el lado útil. con la sintaxis de corchete puedes crear propiedades al vuelo, cosa que no puedes hacer con la sintaxis de punto. adicionalmente, con la sintaxis de corchete no estás limitado a la norma de identificadores válidos. es decir, la norma de que los identificadores (nombre de variables o funciones) deben comenzar por A-Za-z_$. de hecho, incluso puedes hacer cosas más bizarra como usar valores distinto a los strings.

Código:

var literal = {'0cero': 'comienza por 0'};
literal["(*)"] = 'una propiedad extraña usando simbolos';
console.log(literal["0cero"], literal["(*)"]);

var weird = {};
weird[literal] = "el key o nombre de propiedad es un objeto";
console.log(weird[literal]);

recuerdo que por ahí hay un tema en que señale esta característica y creo tiene más ejemplos... pero no recuerdo cual tema fue. no obstante, aclarar que funciona porque en realidad lo que sucede es que javascript convierte el dato a string y utiliza ese string como nombre para la propiedad. por ejemplo, en lugar literal intenta pasarle otro objeto genérico.

[cristian_cena]

Gracias nuevamente zerokilled, la verdad desconocía la posibilidad de crear identificadores "fuera de regla" con la sintaxis de corchetes.
Con sintaxis de punto también podemos añadir propiedades al vuelo:

Código Javascript:

var obj = {bool:true,number:5};
obj.str = "str";
obj["arr"] = [0,false,""];
for(p in obj){
    console.log(p);
}
//bool
//number
//str
//arr
 

[furoya]

Interesante debate. Yo tampoco sé si lo hablaron antes; seguro que sí, pero no recuerdo.

Muchas veces puse eso de "array asociativo". Seguramente fue una burrada.
¿Se lo podrá llamar "pseudo array asociativo", como vi en alguna parte? Sería una forma de ser más precisos, y no afectaríamos tanto a los que usan buscadores ni confundiríamos con algún nombre totalmente distinto a los que estén aprendiendo.

Digo, si a nadie le parece mal la sugerencia.

[cristian_cena]

No me parece una buena idea. Supongo Javier Eguíluz hace una analogía entre los objetos de javascript y los arrays asociativos de php (estimo porque también escribió unas guías de symfony) puesto que ambos son contenedores de pares clave/valor. Esta manera de explicar el tema es a mi parecer mala, ya que aporta confusión al instalar la duda de si los arrays asociativos existen en javascript o no. Tal vez dicha analogía pueda servir para desarrolladores experimentados pero para casos como el mío, diseñadores que se meten al mundo de la programación, lo veo mal, es decir, explicar un lenguaje desde las características de otro y no desde sus propias características.

[Aijoona]

En JavaScript un Array es una lista y un Object es un mapa.

Mal por PHP que hace uso de los arrays para ambos tipos de colecciones (lista y mapa)