Cómo usar for of con arrays en JavaScript

Contenido del curso

Introducción a JavaScript

Estructuras de Control y Lógica

Funciones y This

Manipulación de Arrays

Programación Orientada a Objetos

Asincronía en JavaScript

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:26

Cómo usar for of con arrays en JavaScript

Curso de Fundamentos de JavaScript

Clase 16 de 55

Clase 16 / 55

Recursos

Cuando trabajas con listas en JavaScript, necesitas una forma sencilla de recorrer cada elemento sin escribir condiciones complicadas. El bucle for of resuelve justo eso: itera objetos iterables como arrays y strings con una sintaxis tan clara que casi se lee en voz alta. Es ideal si estás aprendiendo loops y quieres código legible desde el primer día.

¿Qué es el bucle for of y para qué sirve?

El nombre lo dice todo: for cada elemento of esta lista, ejecuta este bloque de código. Es una herramienta pensada para recorrer estructuras que ya tienen una secuencia interna, sin que tú tengas que llevar la cuenta del índice manualmente.

¿Qué es un objeto iterable? Es cualquier estructura que contiene una lista de elementos recorribles uno por uno. En JavaScript, los más comunes son los arrays y los strings.

La idea central es que for of solo funciona sobre objetos iterables. Si intentas usarlo sobre algo que no lo sea, no vas a obtener el resultado esperado. Por eso conviene tener clara esta regla antes de escribir tu primer loop.

¿Cómo se escribe la estructura de un for of?

La sintaxis base sigue un patrón corto y predecible que vas a memorizar rápido. Empiezas con la palabra reservada for, abres paréntesis, declaras tu variable, usas la palabra of y apuntas al objeto iterable. Después, entre llaves, va el código a ejecutar.

javascript for (variable of objetoIterable) { // código a ejecutar }

En cada vuelta, la variable toma el valor del siguiente elemento de la lista. Cuando ya no quedan elementos, el loop se rompe automáticamente y deja de ejecutar el bloque. No necesitas escribir un break manual ni controlar contadores.

¿Cómo nombrar la variable del loop?

Una buena práctica es darle a la variable un nombre que describa el elemento individual. Si tu lista se llama canasta y contiene frutas, la variable lógica es fruta. Esto hace que el código se lea casi como una frase en español.

Lista en plural: canasta, usuarios, productos.
Variable en singular: fruta, usuario, producto.
El nombre claro evita comentarios extra.

¿Cómo iterar un array con for of paso a paso?

Vamos con un ejemplo concreto. Imagina que tienes una canasta con cuatro frutas y quieres imprimir cada una en la consola del navegador. Con for of, el código queda así de directo.

javascript let canasta = ["manzana", "pera", "naranja", "uva"];

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

Lo que sucede aquí es simple: por cada fruta de la canasta, ejecuta console.log y muestra esa fruta. La consola va a imprimir manzana, pera, naranja y uva, en ese orden. Cuando la lista se acaba, el loop termina solo.

¿Cuándo debo usar for of en lugar de otro loop? Úsalo cuando solo necesitas el valor de cada elemento de un array o string, sin importar la posición. Si necesitas el índice, considera otras opciones como for clásico o forEach.

Fíjate en algo importante: la canasta es una lista, y si le aplicas canasta.length, JavaScript te devuelve su longitud. Esa propiedad confirma que estás trabajando con un objeto iterable, justo el escenario donde for of brilla.

¿Qué objetos iterables puedes recorrer con for of?

Los dos casos más frecuentes que vas a encontrar al inicio son los arrays y los strings. Ambos comparten la característica de ser secuencias ordenadas de elementos.

Arrays: listas de cualquier tipo de dato, como frutas, números o usuarios.
Strings: cadenas de texto que se recorren carácter por carácter.
Cualquier estructura que represente una lista de elementos recorribles.

La regla mental que conviene fijar es esta: cada vez que tengas una lista de objetos iterables, puedes usar un for of. Si la estructura no genera una lista, este método no es el indicado y deberás buscar otra forma de iterar.

¿Ya probaste tu primer for of con una lista propia? Cuéntame en los comentarios qué array estás recorriendo y cómo lo nombraste.

Platzi Team

Hace 2 años

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.

Comentarios (40)40 comentarios

Pablo Luna Guzmán

David Elias Gatica Morales

Maria Jose Pacha Chichande

Hace un año

Raúl Adolfo Sánchez Rodríguez

Miguel David Isaac Leiva Cid

Juan Cruz Fuentes

Wilbort Encomenderos Ruiz

Juliana Rios

Miguel Angel Rodriguez Cano

Hace 9 meses

Daisy Ramirez

Juan Miguel Jimenez

Hace 10 meses

Brayan Cifuentes

Dymon Zamora

Miguel Jonathan Madrigal González

Ana Belen Chamba Mera

Miguel Herrera

Calvin Rafael Bobadilla Fernandez

Antonio José Alvarez Delgado

YESSENIA YAZMIN ORUE ALCARRAZ

Matias Ezequiel Rivero

Yessica Santiago Valdés

Julio Cardenas

Jafeth Jesús Sánchez Sánchez

Daniel Vergel

Hace 4 meses

Emilio Flor

David Rangel

Introducción a JavaScript

Fundamentos de JavaScript para Principiantes

Instalación y Configuración de JavaScript en Visual Studio Code

Instalación y configuración de Visual Studio Code y Node.js en Windows

Variables y Buenas Prácticas en JavaScript

Tipos de datos primitivos y complejos en JS

Manipulación de Strings en JavaScript: Escritura, Concatenación y Substrings

Números y Operaciones Matemáticas en JavaScript

Conversión de Tipos en JavaScript: Implícita y Explícita

Conversión de Tipos en JavaScript: Explícita e Implícita

Estructuras de Control y Lógica

Operadores de Comparación en JavaScript: Igualdad y Desigualdad

Operadores Lógicos en Programación: AND, OR y NOT

Estructuras Condicionales: Uso de IF, ELSE y ELSE IF en JavaScript

Juego de Adivinanza: Programación con Estructuras Condicionales

Cómo funciona switch en JavaScript

Ciclo For: Iteración de Listas y Uso de Console.log en JavaScript

Cómo usar for of con arrays en JavaScript

Iteración sobre Objetos con forIn en JavaScript

Uso del ciclo while para iteración en programación

Ciclos doWhile: Estructura y Diferencias con While

Funciones y This

Funciones en JavaScript: Cómo Calcular Precios con Descuentos

Diferencias entre Funciones y Métodos en JavaScript

Funciones Puras e Impuras en Programación: Conceptos y Ejemplos

Arrow functions y lexical binding en JS

Scope chain y contextos en JavaScript

Closures y Ámbito Léxico en JavaScript

Fundamentos del Desarrollo Web: Frontend y Backend

Manipulación de Arrays

Arrays: Propiedades, Acceso y Creación en Programación

Mutabilidad e inmutabilidad en arrays JS

Mutabilidad en arrays con push y pop

Métodos map y forEach en JavaScript: Uso y Ejemplos Prácticos

Métodos Filter y Reduce en JavaScript: Uso y Ejemplos Prácticos

Métodos find y findIndex en JavaScript: Uso y ejemplos prácticos

Uso del método slice para extraer porciones de un array en JavaScript

Uso del Spread Operator en JavaScript: Copia, Combinación y Más

Programación Orientada a Objetos

Objetos en JavaScript: propiedades y métodos

Creación y Manipulación de Objetos en JavaScript

Función constructora y gestión de instancias en JavaScript

Clases en JavaScript con sintaxis moderna

Herencia y prototipos en JavaScript

Prototipos y Herencia en JavaScript: Construcción y Uso Práctico

Métodos y herencia prototípica en JavaScript

Uso de "this" en Clases y Funciones Constructoras

Validación de Usuarios en una Red Social: Algoritmo Básico

Cómo el return false dentro del for rompe tu login

Asincronía en JavaScript

Programación Síncrona y Asíncrona en JavaScript

Promesas en JavaScript: estados y métodos

Uso de Async/Await para Promesas Asíncronas en JavaScript

Peticiones asíncronas con for await en JavaScript

Fundamentos de HTTP: Cliente-Servidor y Métodos de Petición

Peticiones HTTP en Frontend: Uso de Fetch y Análisis en Network

Función reutilizable para peticiones fetch

Enviar un POST con Fetch API y formularios

Cómo borrar posts con fetch y delegation pattern

Manejo de IDs en JavaScript para eliminar artículos del DOM

Actualizaciones y Nuevas Funciones en JavaScript

Cómo usar for of con arrays en JavaScript