Artigo básico sobre loops em Javascript. Conceitos, tipos de ciclos, comportamentos e exemplos.

rotações

Os loops são um recurso de programação que nos ajuda a executar uma instrução de código repetidamente ou percorrer uma estrutura de dados, entre outros casos.

A maioria dos loops é controlada por variáveis ​​e condições. Essas condições nos ajudarão a ter um melhor controle sobre o loop e evitar possíveis loops infinitos (um fator a considerar).

Entendendo os loops

Para entender melhor os ciclos, podemos vê-lo no fluxograma a seguir, onde uma expressão será avaliada e repetida várias vezes de acordo com os critérios estabelecidos.

No exemplo, será impresso na tela um número, que por sua vez será somado pela unidade a cada iteração, chegando ao número 100.

Observando que a maioria dos loops avalia uma condição que deve ser atendida para executar a instrução. Essas avaliações são disparadas por booleanos, onde se a condição for verdadeira executa a instrução e se for falsa o loop é fechado.

Declarações de loops

Em Javascript existem várias maneiras de definir um loop, observando que ao longo dos anos mais e mais recursos foram adicionados em torno deles.

Aqui estão as diferentes maneiras de usar loops em Javascript:

• por.
• para dentro
• para de.
• para cada.
• enquanto

Por

O loop “for” é um loop que repete um bloco de código dependendo de 3 expressões definidas no momento em que é declarado.

for (expression 1; expression 2; expression 3) {
  // code block to be executed
}

• Expressão 2 : Define a condição para executar o bloco de código. Se a condição for satisfeita, o bloco é executado, caso contrário, o ciclo é interrompido.
• Expressão 3 : Executa sempre após a execução do bloco de código. Essa expressão é comumente usada para atualizar as variáveis ​​definidas na expressão 1.

for (let i = 1; i <= 5; i++) {
  console.log("the number is " + i);
}

// -- Result --
// the number is 1
// the number is 2
// the number is 3
// the number is 4
// the number is 5

const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}
// -- Result --
// a: 1
// b: 2
// c: 3

O loop “for of” é um loop que itera sobre tipos de dados que pertencem à categoria de iteráveis, como objetos, arrays ou conjuntos, obtendo seu valor.

let iterable = [10, 20, 30];

for (const value of iterable) {
  console.log(value);
}
// -- Result --
// 10
// 20
// 30

O loop “for each” é um loop simplificado que é expresso de forma declarativa e funcional. Ele funciona por meio de retornos de chamada e pertence ao conjunto de ferramentas de array.

const array1 = ['a', 'b', 'c'];

array1.forEach(function(element){
  console.log(element);
});
// -- Result --
// "a"
// "b"
// "c"

O loop “while” é um loop que itera enquanto uma condição for verdadeira.

let count = 1;

while (count <= 5) {
  console.log(count);
  count++;
}
// -- Result --
// 1
// 2
// 3
// 4
// 5

As instruções “break” e “continue” são ferramentas fornecidas pela linguagem para interromper ou continuar a execução de um loop. Estas frases cumprem o papel de suporte para determinados casos em que devemos intervir no ciclo na sua execução.

Parar

A instrução “break” interrompe o loop e encerra sua execução.

let fruits = ["apple", "orange", "lemon"];
let fruitToSearch = "orange";

for (let index = 0; index < fruits.length; index++) {
  const fruit = fruits[index];
  if (fruit === fruitToSearch) {
    console.log(`has been found the ${fruit}`);
    break;
  }
  console.log(`The fruit ${fruit} don't match with ${fruitToSearch}`)
}
// -- Result --
// The fruit apple don't match with orange
// has been found the orange

A instrução “continue” ignora o código subsequente dentro do loop, passando para a próxima iteração.

let fruits = ["apple", "orange", "lemon"];

for (let index = 0; index < fruits.length; index++) {
  const fruit = fruits[index];
  console.log(`The fruit is ${fruit}`);
  continue;
  console.log('this is not execute!!!');
  console.log('this is not execute!!!');
  console.log('this is not execute!!!');
  console.log('this is not execute!!!');
  console.log('this is not execute!!!');
  console.log('this is not execute!!!');
}
// -- Result --
// The fruit is apple
// The fruit is orange
// The fruit is lemon

Existem algumas recomendações para usar diferentes tipos de ciclos dependendo da casuística a ser abordada. Mas as recomendações gerais podem ser as seguintes:

• Se soubermos exatamente o número de elementos e instruções para iterar, é recomendável usar o loop “for”. Caso contrário, use o loop “while”.
• Se você precisa conhecer as propriedades de um determinado objeto, use o loop “for in”.
• Se você precisar realizar alguma operação extra com base em uma entrada de função já definida, é uma opção muito boa usar “For each”.
• Casuística geral e simplicidade para usar “For of”.

Recursos de loops em javascript

• Guia geral para loops
• Guia geral para
• Guia geral para em
• Guia geral de
• Guia geral para cada
• Guia geral enquanto

Se precisar de ajuda adicional, entre em contato comigo .

• ✉️ Envie-me um e-mail
• Entre em contato comigo no LinkedIn
• Entre em contato comigo no Twitter