Javascript For: saiba como funciona e como usar esse loop no JS

Existem diversos momentos no desenvolvimento das nossas aplicações onde sentimos a necessidade de executar o mesmo comando diversas vezes ou para diferentes elementos. Para que isso ocorra, é necessário utilizar uma estrutura de repetição. 

No JavaScript, existem diversos recursos que podem ser utilizados como uma estrutura de repetição. Nesse artigo, iremos abordar sobre o loop for, sua sintaxe e como usá-lo de maneira eficiente em nossos códigos.

O que é e como funciona o for no JavaScript?

Para podermos entender melhor o funcionamento do for na programação, precisamos compreender o que é uma estrutura de repetição. Imagine a seguinte situação: você está criando um sistema e, em determinado momento da aplicação, precisa colocar em tela todos os nomes dos usuários cadastrados. Para não ter que executar uma função para cada usuário, repetindo o mesmo comando diversas vezes, é possível utilizar uma estrutura de repetição.

É exatamente dessa forma que o loop for funciona. Ele é uma estrutura de repetição nativa do JavaScript, capaz de percorrer diversos itens de uma lista e, para cada item, executar uma determinada ação.

Quando se usa o for?

Como vimos anteriormente, o loop for é utilizado quando há a necessidade de executar o mesmo comando para diferentes itens. Dessa forma, tornamos o nosso código mais enxuto e legível, aumentando a nossa produtividade e o desempenho das nossas aplicações.

Qual é a sintaxe do for em JavaScript?

Para utilizarmos essa estrutura de repetição, é necessário passarmos três parâmetros fundamentais, separados por ponto e vírgula: a expressão inicial, a expressão condicional e a atualização da expressão inicial. Feito isso, abriremos o escopo do loop e colocaremos a declaração da ação que será executada.

Expressão inicial:

A expressão inicial representa o valor inicial a ser utilizado na estrutura de repetição. Geralmente, representamos esse valor pela letra i ou pela palavra index, fazendo referência ao índice inicial da lista que será percorrida.

Expressão condicional:

Como o próprio nome sugere, nessa expressão inserimos a condição para que o loop seja executado. Ou seja, a estrutura de repetição irá acontecer até que essa condição se torne falsa.

Atualização da expressão inicial:

Nesse parâmetro, definimos como iremos atualizar o valor inicial da primeira expressão. Geralmente, utilizamos o incremento (++) ou decremento (–). É importante ficar atento para não gerar um loop infinito na sua máquina.

Declaração:

Nesse bloco de código, inserimos uma ação, ou um conjunto se ações, a ser executada para cada item percorrido pela estrutura de repetição.

Como é JavaScript for na prática?

Nada melhor do que a prática para fixarmos o conteúdo e compreendermos a utilização dessa estrutura de repetição. Como primeiro exemplo, vamos criar um loop for que irá exibir em nosso console os números de 1 a 20.

Vamos entender o que estamos fazendo: em nossa expressão inicial, definimos o valor inicial em 1, ou seja, nosso loop for começará a partir desse valor. Já na expressão condicional, criamos a condição para a estrutura de repetição ser executada, enquanto o valor presente em i for menor ou igual a 20. Enquanto na atualização do valor inicial, estamos incrementando, ou seja, somando mais 1, cada vez que o loop acontece. Por fim, criamos a ação de trazer os valores no console para cada item.

No próximo exemplo, vamos percorrer um array contendo diversos nomes e, para cada item, traremos no console uma saudação. 

Repare que a nossa expressão inicial e a sua atualização permanece a mesma do exemplo anterior, o que mudamos agora foi a expressão condicional. Nesse caso, estamos criando uma condição para o loop ser executado enquanto o i, que representa o valor dos índices, for menor que a quantidade de itens dentro do array. Já na declaração, criamos uma template string, executando no console a saudação para cada item do array na estrutura de repetição.

Como funcionam os loops for/in e for/of?

Existem diversas outras estruturas de repetições no JavaScript. Uma das principais é o for in, utilizado para percorrer objetos. Sua sintaxe é um pouco diferente do loop for. Veja a seguir:

Dessa forma, a cada loop percorrido, conseguimos acessar uma propriedade do objeto. Para o entendimento ficar mais claro, vejamos o exemplo a seguir:

Repare que temos um objeto pessoa contendo diferentes propriedades. Em nosso loop for in, estamos percorrendo cada uma dessas propriedades presentes no objeto e executando uma ação de trazê-las no console.

Outra estrutura de repetição bem conhecida e utilizada é o for of. Veja a seguir a sua sintaxe:

Nesse caso, a variável represente o valor atual do item a ser percorrido na estrutura de repetição. Pode ser representada por let, const ou var. Já o iterável representa o objeto que contêm propriedades iteráveis, como string, arrays, entre outros. Vejamos, a seguir, um exemplo, na prática:

Conclusão

Nesse artigo, vimos a importância de utilizarmos as estruturas de repetições para criarmos códigos mais limpos, performáticos e legíveis. Porém, assim como diversos outros recursos do JavaScript, é importante praticar bastante para se habituar e compreender melhor a sua utilização.

Aqui na Kenzie Academy Brasil, ensinamos aos nossos estudantes com diversos exercícios práticos e uma metodologia que coloca você como o centro do seu sucesso. Não perca mais tempo e venha aprender com uma equipe qualificada. Faça já a sua inscrição na próxima turma da nossa formação de Desenvolvimento Web Full Stack.