Como usar o laço for...of em JavaScript

A declaração for...of em JavaScript executa uma operação em laço que trabalha em uma sequência de valores de um objeto iterável. Objetos iteráveis incluem estruturas como Array, String, Map, Set, e mais.

A sintaxe funciona da seguinte forma:

for (let city of cities) {
  console.log(city);
}

Neste caso, city irá ser a variável que carregará o valor individual de cada item do iterável cities. Você pode usar let, const, var, variáveis previamente declaradas, ou ainda outras maneiras para se declarar a variável do loop.

cities precisa ser um iterável, como descrevemos anteriormente, caso contrário o laço não executará como esperado. Para entender melhor objetos iteráveis, consulte a seção específica “Built-in iterables” do artigo da MDN.

Descrevendo a operação

O laço ocorre individualmente, um a um, em ordem sequencial, como geralmente ocorre com outros tipos de loops no JavaScript.

Você pode interromper uma iteração usando o comando break, ou ainda pular uma iteração com o comando continue, assim como em geralmente outros laços no JavaScript.

Vamos agora iterar sobre uma String diretamente:

const word = "uau!";

for (const letter of word) {
  console.log(letter);
}
// "u"
// "a"
// "u"
// "!"

Iterando sobre Array

const umArray = ['a', 'b', 'c'];
for (let item of umArray) {
  console.log(item);
  // a
  // b
  // c
}

Iterando sobre Map

const sampleMap = new Map([
  ["1", "a"],
  ["2", "b"],
  ["3", "c"],
]);

for (const item of sampleMap) {
  console.log(item);
  // ["1", "a"]
  // ["2", "b"]
  // ["3", "c"]
}

Iterando sobre Set

const ourSet = new Set('LetterOccurrence');
for (let item of ourSet) {
  console.log(`${item} é uma das letras que aparecem na string 'LetterOccurrence'`);
  // "L é uma das letras que aparecem na string 'LetterOccurrence'
  // "e é uma das letras que aparecem na string 'LetterOccurrence'
  // "t é uma das letras que aparecem na string 'LetterOccurrence'
  // "r é uma das letras que aparecem na string 'LetterOccurrence'
  // "O é uma das letras que aparecem na string 'LetterOccurrence'
  // "c é uma das letras que aparecem na string 'LetterOccurrence'
  // "u é uma das letras que aparecem na string 'LetterOccurrence'
  // "n é uma das letras que aparecem na string 'LetterOccurrence'
}

O laço for...of no JavaScript possibilita que realizemos loops de maneira mais prática e concisa, aumentando a legibilidade e a clareza do nosso código. Você já conhecia e já usava esta funcionalidade?

Espero que este artigo tenha lhe ajudado e lhe encorajado a utilizar este tipo de loop com o JavaScript. Até a próxima! 👋