Estruturas de repetição For, For ... in e For ... of Javascript - Programando Soluções
Front-end>
Estruturas de repetição For, For … in e For … of Javascript
Post category:Javascript / Front-end
for … of
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.
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:
//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.
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:
for (const elemento of array1) {
//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.
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.
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:
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.
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.
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 🙂