PDF de programación - El uso de JavaScript for in vs for of

El uso de JavaScript for in vs for of

JavaScript for in vs for of es una pregunta muy habitual hoy en día . Poco a poco vamos
usando cada día más JavaScript ES6 y estos tipos de bucles son muy habituales. Vamos a
explicarlo un poco las diferencias entre ambos . Normalmente cuanto trabajamos con
JavaScript es muy habitual utilizar colecciones de objetos, en este caso partiremos de una
lista de personas.

var listaPersonas= [

{"nombre":"pepe","apellidos":"perez"},
{"nombre":"ana","apellidos":"gomez"},
{"nombre":"almudena","apellidos":"blanco"}
];

La forma más común de imprimir todos los datos por pantalla es recorrer la lista con un
bucle for.

for (var i=0;i< listaPersonas.lentgh;i++ ) {

console.log(listaPersonas[i].nombre);
console.log(listaPersonas[i].apellidos);
}

El resultado es:

El uso de JavaScript for in vs for of

Recordemos que tambien podríamos haber utilizado programación funcional y forEach

JavaScript For in vs For of

Ahora bien a partir de JavaScript ES6 existe otra forma de recorrer las colecciones de
objetos. Podemos usar un bucle for of que tiene una sintaxis mucho más natural.

for (var persona of listaPersonas) {

console.log(persona.nombre);
console.log(persona.apellidos);
}

El resultado será idéntico. De esta forma lo estaremos recorriendo como si fuera una
estructura forEach de otros lenguajes de programación .

El uso de JavaScript for in vs for of

Hemos tenido que esperar hasta JavaScript ES6 para tenerlo a nuestra disposición. Ahora
bien ¿Para que sirve el bucle for in?.El bucle for in es el encargado de recorrer la colección
de propiedades de un objeto.

Podríamos modificar el código del principio para hacerlo más flexible utilizando esta
estructura que esta disponible desde JavaScript ES5.

for ( var persona of listaPersonas) {

for(var propiedad in persona) {

console.log(persona[propiedad]);
}
}

El uso de JavaScript for in vs for of

La ventaja que tiene este anidamiento de bucles es que nos permite sacar por pantalla las
propiedades de cualquier lista de objetos que pasemos y no solo las de la persona. Hemos
ganado en flexibilidad y claridad usando for in y for of.

Otros artículos relacionados : Introducción a JavaScript ES6 , JavaScript console time y
rendimiento , JavaScript Promise y la programación asíncrona