Iteración con for-of en JavaScript para arrays y strings

Clase 16 de 55 • Curso de Fundamentos de JavaScript

Resumen

¿Qué es el método loop for-of y cómo funciona?

El método loop for-of es una herramienta poderosa en programación que te permite iterar sobre objetos iterables. Aunque puede parecer complicado al principio, su aplicación se vuelve intuitiva una vez que entiendes su funcionamiento y sus aplicaciones prácticas. El nombre "for-of" ya es bastante descriptivo: se trata de recorrer elemento por elemento de una colección. En este contenido, te enseñaré a usarlo de manera efectiva.

¿Sobre qué tipo de objetos se utiliza for-of?

El for-of se utiliza sobre objetos iterables, como los arrays y strings. Estos son elementos que, por su naturaleza, están dispuestos en forma de lista que podemos recorrer o iterar. Gracias a su estructura, el for-of nos permite ejecutar código de manera repetitiva para cada elemento presente en estas colecciones.

¿Cuál es la estructura de for-of?

Para implementar un for-of, debes seguir una estructura básica:

Comienza con la palabra reservada for.
Añade paréntesis (), donde se define una variable que representa cada elemento.
El uso del término of seguido del objeto iterable que estás recorriendo.
Finalmente, abre llaves {} para incluir el bloque de código que se ejecutará para cada elemento.

Aquí tienes un ejemplo en código:

let canasta = ['manzana', 'pera', 'naranja', 'uva'];

for (let fruta of canasta) {
    console.log(fruta);
}

En este caso, el for-of recorrerá cada elemento de la lista canasta e imprimirá "manzana", "pera", "naranja" y "uva" en la consola del navegador, una por una.

¿Cuáles son las ventajas de usar for-of?

Simplicidad y legibilidad: Su sintaxis es clara y directa, facilitando el seguimiento del código.
Versatilidad: Puede ser utilizado para cualquier objeto iterable, permitiendo un amplio rango de aplicaciones.
Evita errores comunes: Al manejar automáticamente los índices que controlan la iteración, se minimizan los errores potenciales en comparación con métodos más manuales.

¿Cuáles son los aspectos importantes a recordar?

Limitaciones a objetos iterables: Solo los objetos iterables como arrays y strings pueden ser utilizados, no aplica para objetos no iterables.
Uso práctico y específico: Recuerda que el for-of es ideal para casos donde quieres acceder a los valores directamente, y no a los índices como ocurre con for-in.

Comprender y utilizar el for-of es una habilidad valiosa que puede mejorar significativamente la eficiencia y claridad de tu código. ¡Sigue practicando y domina su uso para convertirte en un experto en iteraciones!

Pablo Luna Guzmán

student•

El ciclo for... of permite operar sobre un objeto iterable, es posible que en algún momento te encuentres con un error del estilo TypeError: 'x' is not iterable, que nos indica que la estructura que estamos tratando de utilizar en nuestro ciclo no es iterable, es por esto que debemos tener claro lo que hace que un objeto sea iterable.

En esencia, un objeto iterable es aquel que tiene un protocol de iteración definido, los más comunes que encontramos son los Arrays y las Strings. (En lenguaje técnico si el objeto tiene un Symbol.iterator, entonces este es iterable)

OJO 👀 lo que llamamos comunmente en JS como objetos, esas variables que tienen una estructura {}, NO son iterables, para explorar estos objetos, podemos usar el método for... in el cual vemos en la siguiente clase!

💡 Aquí encuentras la documentación sobre el ciclo for... of

David Elias Gatica Morales

student•

Muchas Gracias

Maria Jose Pacha Chichande

student•

graciassss

Raúl Adolfo Sánchez Rodríguez

student•

Miguel David Isaac Leiva Cid

student•

muy buenos ejemplos

Wilbort Encomenderos Ruiz

student•

Los maps y sets también son objetos iterables, por lo que se podrían usar también el for of en esos tipos de datos.

Juan Cruz Fuentes

student•

no queda claro como se usa, falta explicación

Juliana Rios

student•

Platzi Team

student•

Loop For of

El bucle for...of en JavaScript es una estructura de control introducida en ECMAScript 6 (ES6) que simplifica la iteración sobre elementos iterables como arrays, strings, sets, maps, entre otros.

A diferencia del bucle for tradicional que se basa en índices numéricos, for...of recorre cada elemento del iterable directamente, proporcionando una sintaxis más simple y legible.

Sintaxis del Bucle for...of

La sintaxis básica de for...of es la siguiente:

for (variable of iterable) { // Código a ejecutar para cada elemento }

variable: Una variable que se asigna al valor de cada elemento en cada iteración.
iterable: Un objeto iterable como un array, string, set, map, etc.

Ejemplo Básico con Array

let colores = ["rojo", "verde", "azul"];

for (let color of colores) { console.log(color); }

Este ejemplo imprimirá cada color del array colores en cada iteración.

Limitaciones

No Accede a Índices Directamente: A diferencia del bucle for tradicional, for...of no proporciona acceso directo a los índices del iterable. Si necesitas los índices, puedes usar el método entries() en conjunción con for...of.

Brayan Cifuentes

student•

ES COMO UN FOR EACH EN JAVA NO?

Dymon Zamora

student•

(ignorantemente) creo que también hay un for each en javascript...

Miguel Jonathan Madrigal González

student•

Wow, no conocia que se podia iterar en strings. Aquí les va un ejemplo:

let abecedario = 'abcdefghijklmnñopqrstuvwxyz';

for (letra of abecedario) {
  console.log(letra);    
};

Ana Ch

student•

//Declaración de la lista 'canasta' -> array que contiene 5 elementos
let canasta = ["manzana","pera","naranja","uva", "kiwi"];

//Inicialización del contador: se inicializa en 1, se enumera las frutas
let i = 1;

//Este bucle 'for...of' recorre cada elemento del array en cada iteración 
for(fruta of canasta){
        console.log(`${i}. ${fruta}`);
        i++; //Después de imprimir cada fruta 'i' se incrementa en 1 en la siguiente iteración 
}
``````js
1. manzana
2. pera
3. naranja
4. uva
5. kiwi

Miguel Herrera

student•

Aquí el i esta completamente de más. Porque cuando decimos fruta of canasta ya le estamos diciendo que recorra todos los elementos de la lista, y el bucle no parará hasta terminar de recorrer todos.

Miguel Jonathan Madrigal González

student•

Existe una alternativa a for of, y es forEach().

Su estructura es la siguiente, aplicaré el mismo ejemplo de la clase pero adaptado a forEach()...

let canasta = ['manzana', 'pera', 'naranja', 'uva'];

canasta.forEach((fruta) => {
  
  console.log(fruta);  
});

Miguel Jonathan Madrigal González

student•

Leyendo el siguiente post de forEach vs For Of:

https://stackoverflow.com/questions/50844095/should-one-use-for-of-or-foreach-when-iterating-through-an-array

He aprendido que forEach() no puede iterar en strings, solo en arrays.

Calvin Rafael Bobadilla Fernandez

student•

APUNTES:

YESSENIA YAZMIN ORUE ALCARRAZ

student•

¿En qué momento se definió a los elementos como "frutas"? Es decir, se asume por default: javascrip sabe que son frutas o, en qué parte del código se determina??

Matias Ezequiel Rivero

student•

Hola, si te refieres a fruta dentro del for of -> fruta hace referencia a una variable temporal que se genera, puede ser cualquier nombre (element - item - product) etc. En la clase se le pone fruta porque el array de la canasta contiene elementos relacionados con frutas. Espero que te sirva.

Yessica Santiago Valdés

student•

Tenía la misma duda, y encontré que JavaScript crea una variable llamada global no declarada. Esto genera una advertencia estricta de JavaScript.

Asimismo, esto representa una mala práctica, por lo que, lo conveniente sería escribir el código de la siguiente forma:

let canasta = ['manzana', 'pera', 'naranja', 'uva'];

for (let fruta of canasta) {
    console.log(fruta);
}

En donde se declara let fruta.

Te dejo mis referencias directas de la documentación:

Grammar and types - JavaScript | MDN (en la parte de Declaración de variables)
for...of - JavaScript | MDN

Julio Cardenas

student•

Aqui mi prueba con un objeto:

Jafeth Jesús Sánchez Sánchez

student•

La sentencia sentencia for...of ejecuta un bloque de código para cada elemento de un objeto iterable, como lo son: String, Array, objetos similares a array.

Ejemplo:

//for of    
let menu = ['pambazo','quesadilla','pizza','tacos']
for (comida of menu){
    console.log(comida);
}

Emilio Flor

student•

Resumen de For-of:

Sirve para iterar sobre objetos iterables como los arrays y los strings, con for of obtenemos el valor de ese objeto.

let canasta = ['manzana', 'pera', 'naranja', 'uva'];

for (let fruta of canasta) {
    console.log(fruta);
}

Como vimos en esta clase, for of nos permite obtener la fruta(valor) del objeto iterable (array) "canasta".

etonces For-of:

objetivo > iterar sobre los valores de un objeto

devuelve > el valor del elemento en la posición actual

uso > arrays,strings, set, map y otras estructuras que implementen el protocolo de iteración de js.

David Rangel

student•

Para Octubre del 2025, al menos con Typescript se debe de declarar la variable que mapea de forma individual cada elemento del objeto como una "const":


let canasta = ['manzana', 'pera', 'naranja', 'uva'];

for (const fruta of canasta) {
  console.log(fruta);
}

ALEJANDRO OLGUIN

student•

El for-of es efectivamente una forma simplificada de iterar sobre elementos de arrays y otros objetos iterables, como strings. Su sintaxis permite recorrer cada elemento sin necesidad de manejar índices, lo que lo hace más legible y fácil de usar en comparación con un for tradicional. En el contexto de JavaScript, es ideal cuando se desea realizar una acción con cada elemento de un array o string, como imprimirlo o modificarlo.

Daisy Ramirez

student•

No es estrictamente necesario usar let en la variable del for-of, pero es una buena práctica. Al usar let, cada iteración del bucle tiene su propia copia de la variable, evitando problemas de alcance. Si usas var, todas las iteraciones comparten la misma variable, lo que puede llevar a comportamientos inesperados. Así que, aunque puedes omitir let, es recomendable usarlo para mayor claridad y control en el código.

Johan Sebastian

student•

let jugadores = ['cristiano', 'messi', 'Dimaria', 'pogba', 'james rodriguez']
let nombre = 'churo';
let encontrado = false;

for (jugador of jugadores) {
    if (jugador === nombre) {
        console.log(`El jugador ${jugador} ha sido seleccionado`);
        encontrado = true;
        break;
    }
}

if (!encontrado) {
    console.log(`El jugador ${nombre} no fue seleccionado`)
}

Jorge López

student•

En el video, let canasta se maneja como un array. Se define como una lista que contiene elementos (frutas en este caso) y se puede iterar utilizando el bucle for-of. Los arrays en JavaScript son objetos iterables, lo que permite utilizar este tipo de bucles para acceder a sus elementos de manera sencilla. La estructura y el uso del array son fundamentales para trabajar con colecciones de datos en programación.