Laços for em

Sobre Laços for

Sintaxe geral

O laço for é uma das instruções mais usadas para executar alguma lógica repetidamente. Em JavaScript, ele consiste na palavra-chave for, em um cabeçalho entre parênteses e em um bloco de código que contém o corpo do laço entre chaves.

for (initialization; condition; step) {
  // code that is executed repeatedly as long as the condition is
  // true
}

Cabeçalho

A inicialização normalmente cria uma variável contadora, a condição verifica se o laço deve continuar ou parar e o passo incrementa o contador ao final de cada repetição. As partes individuais do cabeçalho são separadas por ponto e vírgula.

const list = ['a', 'b', 'c'];
for (let i = 0; i < list.length; i++) {
  // code that should be executed for each item in the array
}

As três partes do cabeçalho são opcionais. Isso raramente é usado na prática. Você pode ler mais sobre isso na documentação da MDN.

Laços for aninhados

Laços for podem ser aninhados, por exemplo para iterar sobre arrays aninhados (multidimensionais). Certifique-se de criar uma variável contadora diferente para cada laço.

const coords = [
  [1, 2],
  [4, 7],
  [10, -3],
];

for (let i = 0; i < coords.length; i++) {
  for (let j = 0; j < coords[i].length; j++) {
    // do something with coords[i][j]
  }
}

Break, Continue e rótulos

Dentro do corpo de um laço, você pode usar a palavra-chave break para interromper completamente a execução do laço. Já a palavra-chave continue interrompe apenas a execução da iteração atual e passa para a próxima.

Ao trabalhar com laços aninhados, break e continue se aplicam sempre ao laço mais interno por padrão. Você pode usar rótulos para mudar esse comportamento. Um rótulo é um nome de identificador seguido de dois-pontos. Ele é colocado na frente (ou acima) do laço. Esse rótulo pode então ser combinado com break ou continue para definir a qual laço a instrução se aplica.

outer: for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 10; j++) {
    // ...
    if (j > 5) {
      continue outer;
    }
    // ...
  }
}

Contador do laço e código assíncrono

Você precisa tomar cuidado para declarar corretamente a variável contadora ao lidar com código assíncrono. Vamos ver um exemplo em que somamos a variável contadora de forma assíncrona com setTimeout depois de esperar 1s. Quando o contador é declarado com var ou com let, mas fora do cabeçalho, o código não produz o resultado esperado.

let sum = 0;
for (var i = 1; i < 4; i++) {
  setTimeout(function () { sum += i; }, 1000);
}
// eventually sum will be 12 instead of 6 (1+2+3)

let sum = 0;
let i;
for (i = 1; i < 4; i++) {
  setTimeout(function () { sum += i; }, 1000);
}
// same here, eventually sum will be 12 instead of 6 (1+2+3)

Nesses dois casos, i não fica no escopo de uma iteração específica do laço. Quando a soma é calculada, i já alcançou seu valor final 4, o que faz a soma ser 4 + 4 + 4 = 12.

Esse problema pode ser evitado declarando o contador com let dentro do cabeçalho. Isso tem o efeito especial de que cada iteração ganha sua própria variável let i, no escopo exatamente daquela execução do corpo do laço. Assim, quando a soma é calculada mais tarde, cada função callback se refere à sua própria variável i, que ainda guarda o valor correto.

let sum = 0;
for (let i = 1; i < 4; i++) {
  setTimeout(function () { sum += i; }, 1000);
}
// eventually sum will be 6 (1+2+3) as expected