Estrutura de loops em JavaScript


As estruturas de iteração são fundamentais no mundo da programação. Os Loops clássicos são parte de praticamente toda linguagem de programação: For, While e Do…While. Todo curso introdutório em estruturas de programação aborda o tópico e em JavaScript, eles são tão importantes como em qualquer outra linguagem.

Nesse texto vamos aprender todos os principais tipos de estruturas de loop presentes no javaScript.
Loops em JavaScript

Apesar de a sintaxe variar de linguagem para linguagem, o conceito de loop permanece o mesmo. Trata-se de repetir um bloco de código de acordo com um parâmetro de avaliação. JavaScript possui vários tipos de loops, e é uma linguagem que os executa de forma eficiente.

Existem 7 tipos de loops no JavaScript. Para ter uma visão clara, vamos listar todos os sete e, em seguida, explicar como cada qual funciona, na mesma ordem da listagem. Durante a leitura, atente-se para compreender a diferença entre um e outro, pois eles são mais eficientes dentro de situações específicas.

Os sete tipos de loops em JS são:

  • while
  • do-while
  • for
  • forEach()
  • map()
  • for…in
  • For…of

1 – Loop While em JS

Você provavelmente já conhece o “While”. De fato, em JS não é diferente das outras linguagens. O while statement cria um loop que é executado repetidamente desde que a condição do while seja verdadeira. A condição é avaliada sempre antes de o código ser executado. Veja o exemplo abaixo:

var i=0;
while (i<10){
console.log(“Valor de i: “+ i);
i++;
}

No código acima, o loop imprime o valor de i, que vai de zero até 9, que são todas as iterações para as quais a condição i<10 permanece verdadeira. 2 – Do-While em JS O Do-while funciona de forma semelhante ao While tradicional. A diferença é que no Do-While, a condição é avaliada depois que o bloco de código é executado. Dessa forma, o bloco de código sempre seŕá executado pelo menos uma vez. Veja o exemplo: var i=0; do{ console.log(“O valor de i e:” + i); i++; } while(i>0 && i<10);

Nesse exemplo, o valor de i será impresso na tela variando de 0 até 9. Perceba que na primeira vez que o bloco de código é executado a condição do while é falsa. Mas como dentro do bloco o valor de i é iterado na primeira execução, quando a condição é avaliada ela já se tornou verdadeira.
3 – Loop For em JS

O For funciona exatamente da mesma forma que o While. A pergunta que muita gente se faz é: Qual então a necessidade de ter esses dois loops se eles fazem a mesma coisa? Na verdade, é uma questão de legibilidade e clareza de código. No loop for, a inicialização e a forma de iteração da variável que determina a condição são feitas na mesma linha. Veja no exemplo:

for (var i=0; i<10; i++){
console.log(“O valor de i e: ” + i);
}

Veja que no exemplo nós não precisamos de inicializar a variável i com uma linha separada, como fizemos para o while. E também não é preciso uma linha adicional dentro do bloco de código do loop para iterar a variável i. Tudo é feito na mesma linha, tornando o código de compreensão mais imediata e intuitiva.
4 – forEach() em JS

O forEach() é um método de variáveis Array(e também Map e Set). O forEach() chama uma função para cada elemento de um array, de acordo com o índice definido na sua chamada. Esse método é mais facilmente compreendido diretamente pelo exemplo, vamos a ele:

var vetor=[1, 3, “E ai” ,”Ola”];

vetor.forEach(function(item, index){
console.log(‘ vetor[‘+index+’] is ‘+ item);
});

No exemplo acima, a saída será:

vetor[0] e 1
vetor[1] e 2
vetor[2] e E ai
Vetor[4] e Ola

Ou seja, o loop forEach() funciona para iterar arrays e estruturas de dados. Isso poderia ser feito com um for ou qualquer outra estrutura de loop, mas ter uma estrutura específica torna mais fácil e dispensa o programador de ter que declarar e usar variáveis de controle.
5 – Loop map() em JS

O map() também é um método do tipo Array. Ele é usado com o objetivo específico de criar novos arrays a partir de uma regra para determinar seus valores. Vamos entender pelo exemplo, veja:

Example

var vetor = [1, 5, 10, 15];
var vetorTriplo = vetor.map(function(x) {
return x * 3;
});

No exemplo acima, estamos criando um novo Array, e esse novo array será preenchido segundo a regra instituída no bloco de código do map(), que nesse caso é multiplicar cada elemento do array vetor. O novo array, chamado vetorTripo, terá como elementos: [3, 15, 30, 45].
6 – For..in em JS

O for…in foi desenvolvido especialmente para iterar sob as propriedades de um objeto, mais especificamente, ele itera sob as propriedades enumeráveis de um objeto. Vamos usar o exemplo para entender:

var pessoa = {nome:”Pedro”, sobrenome:”Augusto”, idade:32};

var texto = “”;
var x;
for (x in person) {
texto += pessoa[x] + ” “;
}

No exemplo acima, o for…in está iterando nas propriedades do objeto pessoa. No bloco de código, a cada iteração nós concatenamos manualmente o valor de cada propriedade com um espaço vazio. No final, a saída será: Pedro Augusto 32. Entendeu?
7 – For…of em JS

Por fim, temos o for…of, que é o loop mais recente adicionado ao JavaScript. Essa é uma estrutura bem genérica e pode ser usada para iterar vários tipos de objetos, como arrays, maps, sets e vários outros. Vamos para o último exemplo:

var NovaString= ‘Leo’;
for (var value of NovaString) {
console.log(value);
}

No exemplo acima, estamos iterando sob a variável NovaString. A saída será: L E O, com cada letra sendo impressa separadamente.

Para fechar, vamos explicar a diferença entre esses dois últimos loops, o for…in e o for…of. Bem, o for…in itera sob propriedades de um objeto, enquanto o for…of itera sob os valores dados,e não sob as propriedades. Tenha isso em mente sempre que for programar seus loops.

Fique atento aos próximos posts, vamos continuar a falar sobre os principais elementos de programação e sintaxe do JavaScript. Até a próxima!