Loops JavaScript explicados: For Loop, While Loop, Do...while Loop e muito mais

Os loops são usados ​​em JavaScript para executar tarefas repetidas com base em uma condição. As condições geralmente retornam trueou false. Um loop continuará em execução até que a condição definida retorne false.

for Loop

Sintaxe

for (initialization; condition; finalExpression) {
// code
}

O forloop consiste em três expressões opcionais, seguidas por um bloco de código:

• initialization- Essa expressão é executada antes da execução do primeiro loop e geralmente é usada para criar um contador.
• condition- Esta expressão é verificada cada vez antes da execução do loop. Se for avaliado como true, o statementcódigo ou no loop será executado. Se for avaliado como false, o loop será interrompido. E se essa expressão for omitida, ela será avaliada automaticamente como true.
• finalExpression- Esta expressão é executada após cada iteração do loop. Isso geralmente é usado para incrementar um contador, mas pode ser usado para decrementá-lo.

Qualquer uma dessas três expressões ou o código no bloco de código pode ser omitido.

forloops são comumente usados ​​para executar o código um determinado número de vezes. Além disso, você pode usar breakpara sair do loop mais cedo, antes que a conditionexpressão seja avaliada como false.

Exemplos

1. Iterar por inteiros de 0 a 8:

for (let i = 0; i < 9; i++) {
console.log(i);
}

// Output:
// 0
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8

2. Use breakpara sair de um forloop antes conditionde false:

for (let i = 1; i < 10; i += 2) {
if (i === 7) {
  break;
}
console.log('Total elephants: ' + i);
}

// Output:
// Total elephants: 1
// Total elephants: 3
// Total elephants: 5

Armadilha Comum: Exceder os Limites de um Array

Ao iterar em uma matriz, é fácil exceder acidentalmente os limites da matriz.

Por exemplo, seu loop pode tentar referenciar o 4º elemento de um array com apenas 3 elementos:

const arr = [ 1, 2, 3 ];

for (let i = 0; i <= arr.length; i++) {
console.log(arr[i]);
}

// Output:
// 1
// 2
// 3
// undefined

Existem duas maneiras de corrigir esse código: defina conditioncomo i < arr.lengthou i <= arr.length - 1.

for...inLoop

Sintaxe

for (property in object) {
// code
}

O for...inloop itera sobre as propriedades de um objeto. Para cada propriedade, o código no bloco de código é executado.

Exemplos

1. Repita as propriedades de um objeto e registre seu nome e valor no console:

const capitals = {
a: "Athens",
b: "Belgrade",
c: "Cairo"
};

for (let key in capitals) {
console.log(key + ": " + capitals[key]);
}

// Output:
// a: Athens
// b: Belgrade
// c: Cairo

Armadilha comum: comportamento inesperado ao iterar em uma matriz

Embora você possa usar um for...inloop para iterar em uma matriz, é recomendável usar um loop normal forou um for...ofloop.

O for...inloop pode iterar sobre matrizes e objetos semelhantes a matrizes, mas nem sempre pode acessar os índices de matriz em ordem.

Além disso, o for...inloop retorna todas as propriedades e propriedades herdadas de uma matriz ou objeto semelhante a uma matriz, o que pode levar a um comportamento inesperado.

Por exemplo, este loop simples funciona como esperado:

const array = [1, 2, 3];

for (const i in array) {
console.log(i);
}

// 0
// 1
// 2

Mas se algo como uma biblioteca JS que você está usando modifica o Arrayprotótipo diretamente, um for...inloop irá iterar sobre isso também:

const array = [1, 2, 3];

Array.prototype.someMethod = true;

for (const i in array) {
console.log(i);
}

// 0
// 1
// 2
// someMethod

Embora modificar protótipos somente leitura como Arrayou Objectvá diretamente contra as melhores práticas, pode ser um problema com algumas bibliotecas ou bases de código.

Além disso, como o for...iné destinado a objetos, é muito mais lento com arrays do que com outros loops.

Resumindo, lembre-se de usar apenas for...inloops para iterar sobre objetos, não arrays.

for...ofLoop

Sintaxe

for (variable of object) {
// code
}

O for...ofloop itera sobre os valores de muitos tipos de iteráveis, incluindo arrays e tipos de coleção especiais como Sete Map. Para cada valor no objeto iterável, o código no bloco de código é executado.

Exemplos

1. Iterar em uma matriz:

const arr = [ "Fred", "Tom", "Bob" ];

for (let i of arr) {
console.log(i);
}

// Output:
// Fred
// Tom
// Bob

2. Iterar sobre um Map:

const m = new Map();
m.set(1, "black");
m.set(2, "red");

for (let n of m) {
console.log(n);
}

// Output:
// [1, black]
// [2, red]

3. Iterar sobre um Set:

const s = new Set();
s.add(1);
s.add("red");

for (let n of s) {
console.log(n);
}

// Output:
// 1
// red

whileLoop

Sintaxe

while (condition) {
// statement
}

O whileloop começa avaliando condition. Se for conditionavaliado como true, o código no bloco de código será executado. Se for conditionavaliado como false, o código no bloco de código não será executado e o loop terminará.

Exemplos:

1. Enquanto uma variável for menor que 10, registre-a no console e incremente-a em 1:

let i = 1;

while (i < 10) {
console.log(i);
i++;
}

// Output:
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9

do...whileLoop

Sintaxe:

do {
// statement
} while (condition);

O do...whileloop está intimamente relacionado ao whileloop. Em um do...whileloop, conditioné verificado no final de cada iteração do loop, em vez de no início antes da execução do loop.

Isso significa que do...whileé garantido que o código em um loop seja executado pelo menos uma vez, mesmo que a conditionexpressão já seja avaliada como true.

Exemplo:

1. Enquanto uma variável for menor que 10, registre-a no console e incremente-a em 1:

let i = 1;

do {
console.log(i);
i++;
} while (i < 10);

// Output:
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9

2. Empurre para uma matriz, mesmo que conditionavalie true:

const myArray = [];
let i = 10;

do {
myArray.push(i);
i++;
} while (i < 10);

console.log(myArray);

// Output:
// [10]