Estruturas de repetição For, For ... in e For ... of Javascript

Veja nesse artigo

Introdução

As estruturas de repetição, são utilizadas para percorrer estruturas de dados como arrays ou objetos.

Praticamente todos os sistemas tem essas estruturas, e saber trabalhar com estruturas de repetição é essencial.

O Javascript tem algumas estruturas de repetição que podem ser utilizadas, com o tempo novas foram surgindo para atender mais necessidades.

Hoje vamos ver sobre as estruturas de repetição for, for … in e for … of.

for

A instrução for, cria uma estrutura de repetição, aceita três parâmetros que são separados por ponto e vírgula, os parâmetros são (valor de inicialização, condição e iteração).

É uma estrutura muito versátil e pode ser utilizada para percorrer qualquer tipo de estrutura de dados, veja sua sintaxe:

for (let i = 0; i < 9; i++) {
   console.log(i);
}
//resultado: 0 1 2 3 4 5 6 7 8

O valor de inicialização é o (let i = 0), a condição é (i < 9), e o iterador é (i++). O for cria uma variável I e coloca o valor 0, e enquanto I for menor que 9, o for ficará executando, e para cada vez que ele executa, ele incrementa mais 1 para I, fazendo assim uma hora ele ser 9 e não entrar mais no loop.

Outra forma bem utilizada é para percorrer arrays, veja este outro exemplo:

let numeros = [1, 2, 3];
for (let i = 0; i < numeros.length; i++) {
   console.log(numeros[i]);
}
//resultado: 1 2 3

Nesse caso, para percorrer todo o array, a condição indica que enquanto I for menor que o tamanho total do array, ele deve continuar percorrendo e mostrando o resultado na tela.

for … of

Outra forma um pouco mais nova em relação as outras estruturas de repetição e mais elegante de se percorrer arrays, é utilizando a instrução for … of.

Essa instrução cria um loop assim como o for, porém a a diferença são os parâmetros passados para a função.

Para o for … of, você passará diretamente o array no qual será percorrido, e também uma variável que conterá o valor de cada posição do array.

Ele sempre percorrerá o array por completo, sem você precisar fazer nenhuma verificação de tamanho do array ou colocar alguma condição específica:

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

for (const elemento of array1) {
  console.log(elemento);
}
//resultado: "a" "b" "c"

Essa forma tem uma escrita mais simples e mais limpa, e tem o mesmo resultado do for convencional.

Repare que o primeiro parâmetro “elemento” receberá todas as posições do array, uma de cada vez, primeiro foi o “a”, depois “b” e depois “c”, ele sempre receberá todas as posições, ao final de todas instruções para uma posição, ele pula para a próxima posição e faz tudo de novo.

Nesse caso, a instrução para cada posição foi só o console.log, porém poderia ter mais instruções.

for … in

O for … in é bem parecido com o for … of, porém a diferença é que ele é utilizado principalmente para percorrer sobre objetos.

Isso ocorre porque o for … in acessa as propriedades, já o for … of acessa os valores de uma estrutura de dados.

let array = ['a', 'b', 'c'];
for (const propriedade in array) {
  console.log(propriedade);
}
//resultado: 0 1 2

No caso acima, caso fosse utilizado o of, na variável propriedade teria os valores “a”, “b” e “c”, porém como o in acessa os índices, o resultado é o índice de cada posição do array.

Então sabendo que ele acessa os índices e não os valores, percorrer um objeto é bem mais fácil com o for … in:

let pessoa = {
    nome: 'João Silva',
    idade: 23,
    profissao: 'Programador'
};

for (const propriedade in pessoa) {
  console.log(`${propriedade}: ${pessoa[propriedade]}`);
}
//resultado => nome: João Silva
//resultado => idade: 23
//resultado => profissao: 'Programador'

Agora a variável propriedade conteve os valores das chaves do objeto pessoa que são (nome, idade e profissao) e com as chaves do objeto, é possível acessar os seus valores fazendo objeto[chave], que no caso foi pessoa[propriedade].

Dessa forma é possível percorrer e exibir dinamicamente todos os valores de um objeto.

Nesse caso a intenção foi apenas exibir, mas você pode utilizar essa estrutura para realizar qualquer tratativa com o objeto, seja manipular, filtrar e etc.

Vídeo sobre o assunto

Código fonte

O código fonte dos exemplos estão no meu CodeSandbox

Para ver outros canais onde o posto conteúdo e meu Github, veja os Links do Programando Soluções.

Conclusão

As estruturas de repetição são muito utilizadas em todos os sistemas, e saber trabalhar com elas é essencial. O Javascript tem as suas estruturas de repetição que podem ser bem utilizadas para cada caso. Até o próximo post 🙂

Aprenda a testar Aplicações Javascript