for...of

La declaración for...of crea un bucle que itera a través de los elementos de objetos iterables (Array, Map, NodeList, String, arguments, etc.), ejecutándose por cada iteración, usando el valor del elemento actual.

const elementsList = document.querySelectorAll(".element");

for(const element of elementsList) {
	element.addEventListener("click", () => {
    element.classList.toggle("active");
  })
}

Sintaxis

for(variable of iterable) { ... }

`variable`

Siempre que se empieza con for...of hay que declarar una variable, la cual va a representar un valor por cada elemento sobre el que se itere. Esta puede ser declarada con const, let o var.

Tip

Te recomiendo no utilizar var, he aquí las razones.

`iterable`

El objeto por el cual se va a realizar el ciclo. Y sus propiedades iterables se iteran.

Ejemplos

Como se puede ver for...of, es muy útil y facilita la limpieza y lectura del código, a continuación te presento diferentes ejemplos de sus usos.

Iterando en un array

El ejemplo más sencillo es iterar sobre un array. Con for...of este proceso es bastante simple.

const fruitList = ["🍓", "🍉", "🍎", "🍑"];

for(const fruit of fruitList) {
	console.log(fruit);
}

// 🍓
// 🍉
// 🍎
// 🍑

Iterando en un string

Los strings o cadenas también son un tipo de iterable. Es por ello por lo que también se puede usar for...of.

const word = "Hola";

for(const letter of word) {
  console.log(letter.toUpperCase());
}

// H
// O
// L
// A

Iterando en arguments

arguments es un objeto similar a un Array y representa a los argumentos de una función, for...of también permite iterar sobre este.

function printArguments() {
  for(const argument of arguments) {
    console.log(argument);
  }
}

printArguments("1", "2", "3");

// 1
// 2
// 3

Iterando sobre el DOM

Como se mostró al principio, con for...of se puede iterar sobre una colección del DOM. Permitiendo una fácil interacción con los elementos.

const imagesList = document.querySelectorAll("img");

for(const image of imagesList) {
  image.classList.add("lazy");
}

console.log(imagesList);

/*

NodeList(2) [img.lazy, img.logo.lazy]
  length: 2
	0: img.lazy
  1: img.logo.lazy

*/