Aprenda a codificar com JavaScript: Parte 3, Loops

Enquanto Loops

Enquanto os loops executam um conjunto de instruções repetidamente enquanto alguma condição é avaliada como verdadeira. Quando a condição for falsa, o programa sairá do loop. Esse tipo de loop testa a condição antes de executar uma iteração. Uma iteração é uma execução do corpo do loop. Aqui está um exemplo básico de loop while:

let x = 10;

while(x > 0) {
   console.log(`x is now ${x}`);
   x -= 1;
}

console.log("Out of the loop.");

/* Outputs:
x is now 10
x is now 9
x is now 8
x is now 7
x is now 6
x is now 5
x is now 4
x is now 3
x is now 2
x is now 1
Out of the loop. */

No exemplo acima, começamos definindo x a 10. A condição x > 0 avalia para true neste caso, então o código dentro do bloco é executado. Isso imprime a declaração “x agora é 10” e diminui o valor de x em 1. Durante a próxima verificação, x é igual a 9, que ainda é maior que 0. Portanto, o loop continua. Durante a última iteração, x finalmente se torna 1 e imprimimos “x agora é 1”. Depois disso, x torna-se 0, então a condição que estamos avaliando não é mais válida true. Em seguida, começamos a executar a instrução fora do loop e imprimimos “Out of the loop”.

Esta é a forma geral de um loop while:

while (condition) {
    statement;
    statement;
    etc.
}

Uma coisa a lembrar ao usar loops while é não criar loops que nunca terminam. Isso acontece porque a condição nunca se torna false. Se isso acontecer com você, seu programa irá travar. Aqui está um exemplo:

let x = 10;

while(x > 0) {
   console.log(`x is now ${x}`);
   x += 1;
}

console.log("Out of the loop.");

Neste caso, estamos aumentando x em vez de diminuir, e o valor de x já está acima de 0, então o loop continuará indefinidamente.

Tarefa

Quantas vezes o corpo desse loop será executado?

let i = 0;

while (i < 10) {
    console.log("Hello, World");
    i += 1;
}

Loops Do-While

Um loop do-while executará primeiro o corpo das instruções e, em seguida, verificará a condição. Esse tipo de loop é útil quando você sabe que deseja executar o código pelo menos uma vez. O exemplo a seguir registrará o valor de x uma vez, mesmo que a condição seja avaliada como false Como x é igual a 0.

let x = 0;

do {
   console.log(`x is now ${x}`);
   x -= 1;
} while(x > 0);

console.log("Out of the loop.");

/* Outputs:
x is now 0
Out of the loop. */

Eu usei um loop do-while em meus próprios projetos muitas vezes para gerar valores aleatórios e, em seguida, continuar gerando-os, desde que não atendam a determinados critérios. Isso ajuda a evitar a duplicação devido à inicialização e reatribuição dentro do loop.

Esta é a forma geral de um loop do-while:

do {
    statement;
    statement;
    etc.
} while (condition);

Tarefa

Escreva um loop do-while que exibirá os números de 1 a 10.

Para Loops

Um loop for repetirá a execução de um bloco de código um número específico de vezes. O exemplo a seguir exibe os números de 1 a 10:

for (let i = 1; i <= 10; i++) {
    console.log(i);
}

Esta é a forma geral de um loop for:

for (initial; condition; step) {
    statement;
    statement;
    etc.
}

Inicial é uma expressão que define o valor de nossa variável ou variáveis. Esta é uma expressão opcional para fazer a inicialização.

Doença é uma expressão que deve ser verdadeira para que as instruções sejam executadas. As instruções dentro do bloco são executadas apenas se a condição for avaliada como true. Ignorar totalmente as condições resultará em que elas sempre serão verdadeiras, então você terá que sair do loop de alguma outra maneira.

E degrau é uma expressão que incrementa o valor da nossa variável. Isso também é opcional e é executado após a execução de todas as instruções dentro do bloco for. A expressão step é geralmente usada para aproximar as condições de fechamento do loop.

Você também pode escrever um loop for como um loop while equivalente. Tudo o que você precisa fazer é mover um pouco suas declarações e condições. O loop for acima pode ser reescrito como:

initial;

while(condition) {
    statement;
    statement;
    etc.
    step;
}

Um padrão de programação é usar um loop for para atualizar o valor de uma variável consigo mesma e com um novo valor. Este exemplo soma os números de 1 a 10:

let x = 0;

for (let i = 1; i <= 10; i++) {
    x += i;
}

// Outputs: 55
console.log(x);

Aqui está o loop while equivalente, que fornece a mesma saída:

let x = 0;
let i = 1;

while(i <= 10) {
  x += i;
  i += 1;
}

// Outputs: 55
console.log(x);

Você deve observar como fiz o incremento no final do bloco while em vez de no início. Incrementando a variável de loop i no início nos daria 65, o que não é o que pretendemos fazer aqui.

o += operator é um operador de atribuição que adiciona um valor de volta a uma variável. Esta é uma lista de todos os operadores de atribuição:

Tarefa

Escreva um loop for que calcule o fatorial de um número. O fator de um número n é o produto de todos os inteiros de 1 a n. Por exemplo, 4! (4 fatorial) é 1 x 2 x 3 x 4, que é igual a 24.

Matrizes

Uma matriz é um objeto que contém uma lista de itens, chamados elementos, que são acessados ​​por seu índice. O índice é a posição do elemento na matriz. O primeiro elemento está no índice 0.

Arrays têm uma propriedade chamada length que fornece o número total de elementos em uma matriz. Isso significa que você pode criar um loop for para iterar sobre os itens em uma matriz, conforme mostrado abaixo:

let arr = [1, 2, "Hello", "World"];

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

/*
Outputs:
1
2
Hello
World
*/

Uma matriz bidimensional é uma matriz cujos elementos são matrizes. Por exemplo:

let arr = [
    [1, 2],
    ["Hello", "World"]
];

É assim que você percorreria o array e exibiria cada elemento:

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

/*
Outputs:
1
2
Hello
World
*/

Como você reescreverá o loop acima para que a impressão dos elementos do array comece do final?

For-Of Loop

Um dos cenários mais comuns ao iterar sobre arrays é que você apenas começa do começo e, em seguida, repassa todos os elementos, um de cada vez, até chegar ao fim. Existe uma maneira mais curta de escrever loops for como loops for-of.

Um loop for-of nos permite percorrer os valores de objetos iteráveis, como arrays, mapas e strings. O loop for-of é basicamente usado para iterar sobre os valores de propriedade de um objeto. Aqui está o loop da seção anterior reescrito como um loop for-of.

let arr = [1, 2, "Hello", "World"];

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

/*
Outputs:
1
2
Hello
World
*/

Fazer loop em uma string:

let big_word = "Pulchritudinous";

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

/*
Outputs:
P
u
l
c
h
r
i
t
u
d
i
n
o
u
s
*/

For-In Loop

Esse tipo de loop nos permite percorrer as propriedades de um objeto. Um objeto é uma estrutura de dados que possui chaves mapeadas para valores. Arrays em JavaScript também são objetos, então podemos usar o loop for-in para fazer um loop nas propriedades do array também. Vamos primeiro ver como usar o loop for-in para iterar sobre as chaves ou propriedades do objeto.

Aqui está um exemplo de loop sobre as chaves de um objeto com o loop for-in:

let obj = {
    foo: "Hello",
    bar: "World"
};

for (let key in obj) {
    console.log(key);
}

/*
Outputs:
foo
bar
*/

Aqui está um exemplo de loop sobre um array com o loop for-in:

let arr = [1, 2, "hello", "world"];

for (let key in arr) {
    console.log(arr[key]);
}

/* Outputs:
1
2
hello
world */

Gostaria de acrescentar que, embora possamos fazer um loop sobre os elementos da matriz usando um loop for-in, você deve evitar fazê-lo. Isso ocorre porque o objetivo é fazer um loop nas propriedades de um objeto e, se você quiser apenas fazer um loop nos índices da matriz para obter valores da matriz, poderá obter resultados inesperados em determinadas situações.

Análise

Os loops nos permitem reduzir a duplicação em nosso código. Os loops while nos permitem repetir uma ação até que uma condição seja falsa. Um loop do-while será executado pelo menos uma vez. For loops permitem repetir uma ação até chegarmos ao final de uma contagem. O loop for-in é projetado para que possamos acessar as chaves em um objeto. O loop for-of é projetado para que possamos obter o valor de um objeto iterável.

Na próxima parte, você aprenderá sobre funções.

Este post foi atualizado com contribuições de Monty Shokeen. Monty é um desenvolvedor full-stack que também adora escrever tutoriais e aprender sobre novas bibliotecas JavaScript.