JavaScript está entre as linguagens de programação mais usadas. Os desenvolvedores que pretendem se tornar engenheiros de JavaScript devem aprender o básico sobre loops, seus tipos e como eles funcionam.
Um loop JavaScript é uma ferramenta usada para executar tarefas repetidas com base em uma determinada condição. Por outro lado, ‘iterar’ é um termo genérico, significando repetir no contexto do loop. Um loop continuará iterando até que uma condição de parada seja atendida.
Para entender melhor, você pode pensar nisso como um jogo de computador onde você é instruído a dar X passos para o norte e depois Y passos para a esquerda.
Você pode representar dar 7 passos para o norte como;
for (let step = 0; step < 7; step++) {
// Runs 7 times, with values of steps 0 through 6.
console.log("Walking northwards one step");
}
quando o bloco de código acima for executado, você terá isto;
últimas postagens
Por que os loops geralmente são usados?
- Execute tarefas repetitivas: você pode usar loops para executar instruções até que certas condições sejam atendidas.
- Iterar sobre objetos ou arrays: com loops, você pode iterar sobre propriedades de um objeto ou elementos de um array, permitindo que você execute certas ações para cada propriedade ou elemento.
- Filtrar dados: você pode usar um loop para filtrar dados com base em condições específicas.
Os loops de JavaScript vêm em diferentes formas; Para, enquanto, faça…enquanto, para…de e para…em. Vamos explorá-los em detalhes e demonstrar como cada um funciona.
For loop
Um loop for será repetido até que uma condição especificada seja avaliada como verdadeira. Um loop for tem três expressões opcionais, seguidas por um bloco de código.
for (initialization; condition; finalExpression) {
// code
}
- A expressão de inicialização vem antes do primeiro loop ser executado. Essa expressão geralmente inicializa um ou mais contadores.
- Uma expressão de condição é verificada todas as vezes antes da execução do loop for. O código no loop ou instrução é executado toda vez que a expressão é avaliada como verdadeira. Por outro lado, o loop para quando a expressão é avaliada como falsa. No entanto, se a expressão for omitida, a expressão será avaliada como verdadeira automaticamente.
- A finalExpression é executada após cada iteração do loop. A expressão é usada principalmente para incrementar um contador.
Você pode usar {}, instrução de bloco, para agrupar e executar várias instruções. Se você quiser sair do loop antes que a expressão de condição seja avaliada como falsa, use a instrução break.
Exemplos de loops for com código
for (let i = 0; i < 7; i++) {
console.log(i);
}
Neste bloco de código;
- A variável i é inicializada com zero (deixe i=0).
- A condição é que i deve ser menor que 7 (i=7).
- O loop repetirá repetidamente se o valor de i for menor que 7 (i<7>.
- A iteração adicionará 1 ao valor de i após cada iteração (++1).
for (let i = 1; i < 11; i += 2) {
if (i === 9) {
break;
}
console.log('Total developers: ' + i);
}
- O bloco de código itera de 1 a 10 (i<11).
- O loop inicializa uma variável i com um valor de 1 (deixe i = 1).
- A condição de loop continuará sendo executada se o valor de i for menor que 11 (i < 11).
- O valor de i aumenta em 2 após cada iteração (i += 2).
A instrução if avalia se o valor de i=9. Se a condição for verdadeira, a instrução break é executada e o loop termina.
(imagem)
Para… de loop
O loop for…of itera sobre objetos iteráveis, como Map, Array, Arguments e Set. Esse loop chama um gancho de iteração customizado com instruções que executam para o valor de cada propriedade distinta.
A estrutura básica de um for…loop é;
for (variable of object) statement
Exemplos de loop for…of em ação
const frontendLanguages = [ "HTML", "CSS", "JavaScript" , “React”];
for (let i of frontendLanguages) {
console.log(i);
}
Neste código;
- Definimos um array chamado frontendLanguages
- A matriz possui três elementos; “HTML”, “CSS”, “JavaScript” e “React”.
- O loop for…of itera sobre cada elemento em frontendLanguages.
- O i no bloco de código assume o valor de cada elemento durante cada iteração e os valores impressos no console.
const s = new Set();
s.add(2);
s.add("grey");
for (let n of s) {
console.log(n);
}
Neste bloco de código;
- Declaramos uma variável s, que atribuímos a um novo Set usando o construtor Set().
- Dois elementos são adicionados ao código usando o método add()
- O for….of itera sobre o objeto de elementos.
- O loop atribui o elemento atual a n antes de executar a instrução console.log(n).
const m = new Map();
m.set(4, "rabbit");
m.set(6, "monkey");
m.set(8, "elephant");
m.set(10, "lion");
m.set(12, "leopard");
for (let n of m) {
console.log(n);
}
Neste bloco de código;
- Usamos o construtor Map() para criar um novo objeto Map.
- Uma variável m é declarada.
- Usando o método .set(), adicionamos cinco pares chave-valor.
- Um loop for…of itera sobre os elementos do objeto Map m.
Para… em loop
Um loop for…in é usado para iterar sobre as propriedades de um objeto. A estrutura básica de um loop for…in é;
for (property in object) {
// code
}
Você pode usar o loop for…in para iterar sobre arrays e objetos semelhantes a arrays.
const shoppingList = { kales: 4, tomatoes: 2, cabbage: 0, lettuce:6, pumpkin:5 };
for (const vegetable in shoppingList) {
console.log(vegetable);
}
Neste bloco de código;
- Introduzimos um objeto JavaScript e o nomeamos shoppingList.
- Usamos o loop for para iterar cada propriedade na shoppingList usando o operador in.
- Em cada iteração, o loop atribui o nome da propriedade atual na shoppingList.
Enquanto
O loop while avalia uma condição, se ela for verdadeira, o bloco de código é executado. No entanto, se a condição for falsa, o loop termina e o bloco de código não será executado.
Esta é a estrutura básica de um loop while;
while (condition) Statement
A condição de teste deve ocorrer antes da execução da instrução no loop. Você pode executar várias instruções usando {} ou instruções de bloco.
Exemplo de loop while em ação
let n = 0;
while (n < 9) {
console.log(n);
n++;
}
Neste código;
- Uma variável n é inicializada com um valor zero (seja n=0).
- O loop será executado enquanto o valor de n for menor que 9 (n<9)
- O valor de n é exibido no console e aumentado em 1 após cada iteração (n++)
- O código parará de ser executado em 8.
Faça … Enquanto Loop
Um loop do…while itera até que uma condição específica seja avaliada como falsa.
A estrutura geral de uma instrução do…while é;
do statement while (condition);
A instrução é executada uma vez, mas antes de verificar a condição. A instrução será executada se a condição for verdadeira. No entanto, se a condição avaliada for falsa, a execução será interrompida e o controle passará para a instrução após o do..while. É garantido que o código em um loop do…while será executado pelo menos uma vez, mesmo se a condição for avaliada como verdadeira.
Exemplo de do…while
let n = 0;
do {
n += 1;
console.log(n);
} while (n < 7);
Neste código;
- Introduzimos uma variável n e definimos seu valor inicial como 0 (seja n=0).
- Nossa variável n entra em um loop do…while onde seu valor é incrementado em 1 após cada iteração (n+=1)
- O valor de n é registrado.
- O loop continuará a executar enquanto o valor de n for menor que 7 (n<7).
Ao executar esse código, o console mostrará valores de n começando de 1 a 7 enquanto o loop é executado 7 vezes.
Loop aninhado
Um loop aninhado é uma situação em que temos um loop dentro de um loop. Por exemplo, podemos ter um loop for aninhado dentro de outro loop for.
for (let outer = 0; outer < 5; outer += 2) {
for (let inner = 0; inner < 6; inner += 2) {
console.log(`${outer}-${inner}`);
}
}
- Existem duas variáveis; exterior e interior e ambos são inicializados com o valor zero.
- Ambas as variáveis são incrementadas em 2 após cada iteração
- Os loops externo e interno iteram três vezes cada.
Declarações de controle de loop
As instruções de controle de loop, às vezes conhecidas como “instruções de salto”, interrompem o fluxo normal de um programa. Break e continue são exemplos de instruções de controle de loop.
Declarações de quebra
As instruções break encerram um loop imediatamente, mesmo que a condição não tenha sido cumprida.
for (let n = 1; n <= 26; n++) {
if (n === 13) {
console.log("Loop stops here. We have reached the break statement");
break;
}
console.log(n);
}
O código renderizado aparecerá como;
Continuar declarações
As instruções Continue são usadas para pular um determinado bloco de código e executar a iteração para o novo loop.
for (let n = 0; n <= 10; n++) {
if (n === 5) {
continue;
}
console.log(n);
}
O código renderizado aparecerá como;
Conclusão
Acima estão os loops comuns que você encontrará no JavaScript vanilla e suas estruturas/bibliotecas. Conforme destacado, cada tipo de loop tem seu caso de uso e comportamentos diferentes. Se você escolher o tipo de loop errado, provavelmente terá bugs e seu código provavelmente exibirá um comportamento inesperado.
Se você estiver lidando com uma estrutura ou biblioteca JavaScript, sempre verifique sua documentação e use os loops integrados.