Um loop for...of é usado quando você precisa iterar sobre valores de um iterável. Exemplos de iteráveis seriam arrays e strings. Aqui está a sintaxe básica para um loop for...of:

for (variable of iterable) {
  // code block to be executed
}

A variável no exemplo representa o valor atual do iterável que está sendo percorrido. Se você tem um array de números, a variável seria o número atual no array. Se você tem uma string, a variável seria o caractere atual na string. Vamos dar uma olhada em alguns exemplos para que você possa entender melhor como o loop for...of funciona. Neste primeiro exemplo temos um array de números e queremos percorrer cada número e registrá-lo no console.

const numbers = [1, 2, 3, 4, 5];

for (const num of numbers) {
  console.log(num);
}

Criamos uma variável chamada num que representará o número atual no array. Para a iteração 1, num será 1, para a iteração 2, num será 2 e assim por diante. Dentro do loop, estamos registrando o número atual no console. Aqui está outro exemplo onde temos uma string e queremos iterar sobre cada caractere e registrá-lo no console.

const str = 'G.E.A.R ACADEMY';

for (let char of str) {
  console.log(char);
}

Neste exemplo, criamos uma variável chamada char que representará o caractere atual na string. A cada iteração, o loop registrará o caractere atual no console. É importante notar que você pode usar let ou const ao declarar a variável em um loop for...of. Se você for usar const, certifique-se de que o valor da variável não mude dentro do loop. Se isso acontecer, você receberá um erro. Aqui está um exemplo de uso de const que resulta em um erro:

const numbers = [1, 2, 3, 4, 5];

for (const num of numbers) {
  console.log(num);
  num = num + 1; // This will cause an error
}

Neste exemplo, estamos tentando alterar o valor de num dentro do loop. Como declaramos num com const, receberemos um erro. Então, se você precisar alterar o valor da variável dentro do loop, use let em vez disso. Vamos dar uma olhada em um último exemplo lidando com um array de objetos.

const people = [
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 },
  { name: 'Jim', age: 40 }
];

for (const person of people) {
  console.log(${person.name} is ${person.age} years old);
}

Neste exemplo, temos um array de objetos chamado people. Cada objeto tem uma propriedade name e age. Quando percorremos o array, criamos uma variável chamada person que representará o objeto atual no array. Dentro do loop, estamos exibindo uma mensagem no console. A primeira mensagem será John is 30 years old, a segunda mensagem será Jane is 25 years old e a terceira mensagem será Jim is 40 years old. Loops for...of são realmente úteis quando você precisa iterar sobre valores de um iterável como um array ou uma string. Eles também são fáceis de ler e podem tornar seu código mais conciso.