Bucle for in Javascript. Una alternativa al bucle for, para recorridos a propiedades de objetos en Javascript. Cómo iterar por las propiedades y los valores de las propiedades de un objeto, de manera genérica en Javascript con el bucle for ... in.

En Javascript no existen arrays asociativos y como sabes, éstos son siempre buenos aliados como recursos para la programación. Si queremos usar algo parecido a un array asociativo tendremos que utilizar las construcciones de objetos. De todos modos, con lo que nos ofrece el lenguaje somos capaces de realizar todas las cosas que en otros lenguajes haces con los arrays asociativos.

En este artículo pretendemos explicarte cómo realizar un recorrido genérico a todas las propiedades presentes en un objeto, con el bucle for in Javascript. Mediante esta estructura de control podremos obtener los nombres de las propiedades junto con sus valores. Ese recorrido es "genérico", es decir, es independiente del número de propiedades que se encuentre en el objeto que estamos recorriendo y es independiente también de sus nombres de propiedad o sus valores.

Bucle for ... in

En Javascript hay una construcción especial del bucle for de toda la vida, que te permite recorrer todas las propiedades de un objeto. Es parecido a lo que en otros lenguajes tenemos en el bucle foreach (Javascript también tiene el forEach pero es solo para arrays y no es un bucle sino un método de arrays, que sirve para iterar, pero no es una estructura de control como tal). Su sintaxis es la siguiente:

for (var propiedad in objeto){
	// código a repetir por el bucle.
	// dentro de este código la variable "propiedad" contiene la propiedad actual
    // actual en cada uno de los pasos de la iteración.
}

No hay mucho más que explicar sobre esta estructura del bucle for in, solo decir que de esta manera tal cual puedes acceder a los nombres de las propiedades del objeto. Gracias al bucle, el código que se incluye dentro del for se ejecutará una vez por cada una de las propiedades del objeto. Luego veremos algunos ejemplos de código para que quede suficientemente claro.

Habrás notado que hemos dicho que así podrás acceder a las propiedades. No te preocupes que para acceder a sus valores tendrás que usar un truquillo. Lo veremos también en este artículo, pero no nos adelantemos.

Bucle para acceder a las propiedades de un objeto

Veamos una aplicación de este bucle for in con un ejemplo sencillo que nos arroje algo de luz.

Tenemos un objeto creado a partir de un literal de objeto.

var diasMes = {
    enero: 31,
    febrero: 28,
    marzo: 31,
    abril: 30,
    mayo: 31
}

Son los meses del año y los días que tiene ese mes. Es verdad que febrero puede tener otros días y que me faltan meses, pero a fines didácticos es suficiente. Observarás que esta estructura en resumen es muy parecida a lo que sería un array asociativo. Si los necesitamos en nuestro programa la podemos usar como si lo fuera.

Pues para acceder a las propiedades de ese objeto (en este caso sería para acceder a los nombres de cada uno de los meses) usarías este bucle.

for (var mes in diasMes){
    console.log(mes);
}

Con esto conseguirás en la consola que aparezcan todos los nombres de los meses del año que tenemos en ese objeto diasMes.

Acceder a los valores de las propiedades

Una situación común es que no quieras acceder a los nombres de las propiedades, sino a los valores. Para ello podemos usar un pequeño truco que nos permite el lenguaje. Esto no es algo en concreto del bucle for in Javascript, sino del tratamiento que hace este lenguaje a los objetos. Se trata de que podemos acceder a las propiedades de los objetos como si fueran arrays, indicando como índice del array una cadena con el nombre de la propiedad.

alert(diasMes["mayo"]);

Eso nos mostrará en una caja de alerta el valor 31 que es el que está asociado a la propiedad "mayo" del objeto "diasMes".

Te habrás dado cuenta que esta sintaxis para acceder a los valores de las propiedades es justamente igual a la sintaxis que se usa para acceder a valores de casillas de un array asociativo.

Bueno, pues sabiendo esto podrás acceder a los valores del objeto, uno por uno, con un bucle for ... in muy parecido al que teníamos antes.

for (var mes in diasMes){
    console.log(diasMes[mes]);
}

Seguro que ahora te parece sencillo. Es que realmente lo es.

Todo junto, acceso a la propiedad y su valor

Esta parte ya seguro que ni te hace falta leerla. Simplemente quiero mostrar un mensaje en la consola más legible, accediendo en el mismo bucle a la propiedad y su valor.

for (var mes in diasMes){
    console.log("El mes " + mes + " tiene " + diasMes[mes] + " dias.");
}

Otro ejemplo puedes verlo en el código a continuación. Vamos a hacer un recorrido a este objeto, que tiene en sus propiedades otros objetos, es decir, es un objeto de objetos. Es algo como un array, pero realmente no es un array, sino una colección.Cada uno de los objetos tiene un identificador, que es su nombre y como valor tiene un objeto con otras propiedades. Esta construcción es muy común en Firebase, donde no podemos guardar arrays en la base de datos.

{
  "Miguel Angel Alvarez" : {
    "isFav" : true
  },
  "DesarrolloWeb.com" : {
    "isFav" : false
  },
  "EscuelaIT" : {
    "isFav" : true
  },
}

Ahora puedes ver el bucle for in Javascript, con el que realizamos el recorrido, comprobando para cada uno de los objetos de la colección si es favorito.

for(var usuario in usuarios) {
  if(usuarios[usuario].isFav) {
    console.log('El usuario con índice (usamos su nombre como índice) ' + usuario + ' es uno de tus favoritos');
  }
}

Eso es todo, con estos conocimientos ya no se te pueden escapar las posibilidades de recorridos a objetos y la construcción del útil bucle for in Javascript. Además, si necesitas arrays asociativos para construir tus programas sabrás la manera alternativa de implementarlos y usarlos, por medio de objetos, en Javascript. Seguro que te servirá de ayuda, incluso aunque ahora no sepas para qué.

Videotutorial de recorridos a las propiedades de objetos

Acabamos este artículo recomendando este videotutorial, en el que verás un par de ejemplos de recorridos a las propiedades de objetos con el bucle for...in. Espero que te guste y pueda complementar bien lo que acabas de aprender.