domingo, 20 de noviembre de 2011

Javascript: Uso For( ... in)

Tomada de:
https://developer.mozilla.org/es/
Aunque debería iniciar con una introducción a Javascript, este tema lo trato, ya que apremía en el desarrollo de las actividades que nos han propuesto en el curso de especialización de Webmaster que estoy realizando.

El for(... in ...), es una estructura repetitiva(bucle), un poco incomprendida, ya que falta de aquel toque de lógica que le brindan las expresiones booleanas.  Es decir, esta estructura de bucle, a diferencia del for, while y do...while  carece de una expresión condicional para detener sus iteraciones.

Entonces, ¿que utiliza esta estructura para detenerse?.  El for(... in ) se vale del numero de elementos que tenga un arreglo(array), esto quiere decir, que el for(... in) nos facilita recorrer un array sin tener que recurrir a:
  1. La propiedad length.
  2. Un contador y, 
  3. una expresión condicional, 
como seguro lo haríamos con el for normal o con un while.

Hay que tener en cuenta que el for(... in), no solo funciona para arrays comunes, pero eso lo explicaré después en un nuevo artículo.  Por ahora centrémonos en el uso básico de esta estructura repetitiva; supongamos que tenemos el siguiente código, debidamente declarado dentro de las etiquetas html requeridas.

function recorrerArreglo () {
    //Declaración e inicialización del array
    var meses = new Array();
    
    //Carga de datos en el array
    meses.push( "Enero" );
    meses.push( "Febrero" );
    meses.push( "Abril" );
    meses.push( "Mayo" );
    meses.push( "Junio" );
    meses.push( "Julio" );
    meses.push( "Agosto" );
    meses.push( "Septiembre" );
    meses.push( "Octubre" );
    meses.push( "Noviembre" );
    meses.push( "Diciembre" );

    //Declaración de una variable 
    //auxiliar para mostrar texto
    var txt = "";

    //Iniciamos el for( ... in ...)
    //utilizando un nombre de variable arbitrario
    //que nos recuerde que tipo de información
    //estamos recorriendo en el array
    for(var mes in meses) {
        txt += mes +" : "+ meses[mes] +"\n";
    }

    alert(txt);
}

Para ver el código ejecutándose, pueden seguir el siguiente enlace:  jsFiddle: For...in

En el anterior código vemos que primero se declara un array llamado meses, al cual se le agregan elementos por medio del método push, los cuales son los nombres de los meses, como lo indica la variable. Seguidamente declaramos una variable auxiliar, que puede guardar cualquier tipo de recurso que nos permita mostrar el resultado del código.

Luego iniciamos el ciclo for ... in (literalmente: Para ... en),haciendo referencia a cada uno de los elementos que tiene el array que vamos a recorrer, donde "var mes", es la declaración de una variable de nombre arbitrario, preferiblemente mnemotécnico, que nos permita recordar que tipo de datos estamos observando.

Esta variable guardará los índices que hacen referencia a cada uno de los elementos en el array, es decir, cuando inicia el ciclo for ... in, la variable "mes" guardará el primer índice que encuentre, en este caso cero (0).  Es decir, que al iniciar su recorrido, si tenemos meses[mes], es totalmente equivalente a tener meses[0], y así sucesivamente, hasta que alcanza la última posición, o sea, cuando alcanza el valor de meses.length-1.  No olvidar que el atributo length devuelve la longitud real de un array, y al contrario de los índices, cero (0) es una posición significativa cuando hacemos referencia a los elementos de este array.

Algo para tener en cuenta, es que a pesar de referirnos a los índices de un array por medio de números enteros: array[0], array[1], array [2]; el ciclo for...in, nos demuestra que es perfectamente válido utilizar literales para acceder a los elementos de un array, así:  array['0'], array['1'], array['2'], lo cual se puede comprobar utilizando el operador typeof con la variable mes.

Con base en lo anterior, en el próximo artículo, explicaré sobre arrays asociativos, su declaración, uso e importancia, además haré un acercamiento a la notación popular de javascript.

Exitos y que les aproveche!

Cualquier pregunta, duda o comentario, no duden en dejarlo en la parte de abajo, con gusto los responderé apenas tenga tiempo.

2 comentarios:

  1. Interesante material, bien explicado y redactado. meses.push( "Enero", "Febrero" ); hace lo mismo que var meses = ["Enero", "Febrero"]; o que utilidad adicional tiene?

    ResponderEliminar
  2. Gracias Luis, de todos modos hago lo mejor que puedo, con lo que sé para que ustedes lo entiendan. Cualquier sugerencia es bienvenida.

    En cuanto a su pregunta, ambas sentencias tienen el mismo significado, si solo se tuvieran esos datos, pero a diferencia de push, la inicialización

    var meses = ['Enero', 'Febrero']

    Solo sirve a la hora de declarar e inicializar la variable, en cambio con push, podemos ingresar datos en cualquier momento durante la ejecución del código, como cuando se reciben datos de una fuente externa con ayuda de ajax o el usuario ingresa datos.

    Además push, cambia la longitud del array, cada vez que se ingresan datos por este método.

    Hay otro modo de ingresar valores sin necesidad de utilizar push, pero no se puede hacer con arrays normales, ya que estos no permiten referenciar posiciones(índices) que no existen, y por eso se utiliza un tipo especial de arrays con índices asociativos, los cuales explicaré luego en un nuevo artículo, ya que también este concepto se maneja en PHP.

    Saludos

    ResponderEliminar