Você sabe o que significa JavaScript for? Em JavaScript, assim como em outras linguagens de programação, existem diferentes tipos de estruturas de repetição. Trata-se de um recurso importante para facilitar a execução de loops, ou seja, quando um ou vários comandos precisam se repetir por diversas vezes enquanto uma condição for verdadeira, ou até que um comando de parada seja solicitado.

Existem diferentes situações em que essa estrutura pode ser aplicada, além de a linguagem disponibilizar algumas variações, como o loop for/in e o for/of. Por isso, é importante compreender como esse recurso funciona e de que forma ele ajuda a facilitar a vida de quem desenvolve programas. Pensando nisso, fizemos este post em que vamos mostrar:

• o que é e como funciona o loop for?
• Qual é a sintaxe do for em JavaScript?
• Como é JavaScript for na prática?
• Como funcionam os loops for/in e for/of?
• Qual a compatibilidade com os navegadores?

Vamos lá? Boa leitura!

O que é e como funciona o loop for?

Em primeiro lugar, vamos explicar o que significa uma estrutura de repetição. Imagine que você precise exibir na tela os números de um até dez. Sem esse recurso, seria preciso repetir o mesmo comando dez vezes. Já pensou quão inviável e trabalhoso é isso?

Para evitar isso, a própria linguagem de programação, que nesse caso é o JavaScript, oferece funções que, quando são interpretadas pelo navegador, fazem a repetição do comando ou de um conjunto de instruções por “x” vezes, o que facilita o trabalho de quem desenvolve programas e a manutenção dos códigos.

Vale ressaltar que existem diferentes categorias de estruturas de repetição além do for, entre elas o while, o forEach e o do..while. De maneira geral, o loop for é utilizado para a repetição de estruturas incrementais, ou seja, em que são adicionados ou diminuídos valores a um índice. Por isso, uma das suas aplicações é para a leitura de variáveis do tipo array.

For, que significa “para” em português, determina que uma ação deve ser executada a partir de uma condição inicial até que seja encontrada outra que interrompa o laço. O fluxo de repetição é controlado por uma variável, que é testada a cada repetição até que se encontre a condição de parada.

Qual é a sintaxe do for em JavaScript?

Basicamente, o loop for contém três expressões específicas seguidas da declaração do bloco de códigos que serão executados enquanto a condição for verdadeira. As expressões devem ser separadas por ponto e vírgula. A sintaxe da estrutura for em JavaScript é:

for ( [expressão inicial]; [expressão condicional]; [atualização da expressão inicial] ) {
	// um ou vários comandos a serem executados //
	declaração;
}


Onde:

• expressão inicial: corresponde à declaração da variável ou à atribuição de qual é o valor inicial utilizado. Vale dizer que também pode ser atribuída uma expressão para inicializar a variável;
• expressão condicional: é uma expressão em que é feito um teste para constatar se a condição é verdadeira para, então, executar o código correspondente ou sair da estrutura de repetição;
• atualização da expressão inicial: é a alteração da variável utilizada na primeira expressão;
• declaração: uma instrução específica ou um conjunto de instruções para executar determinada ação.

É importante dizer que a expressão inicial, a condicional e a atualização não são obrigatórias. Isso significa que é possível omitir uma ou até mesmo todas as expressões. Entretanto, é preciso atenção para evitar que a estrutura se torne um laço infinito, ou seja, sem uma condição de saída.

Como é JavaScript for na prática?

A melhor forma de compreender como funciona o for em JavaScript é por meio de exemplos. Vamos começar com a exibição na console do navegador dos números de 1 a 10 conforme o nosso exemplo inicial. Confira o código a seguir:

for (let i=1; i<=10; i++)  {
	console.log(i);
}
/*
Saída:
1
2
3
4
5
6
7
8
9
10
*/

Perceba que na expressão inicial é feita a declaração de uma variável i que é inicializada com o valor 1. Na expressão condicional é feito um teste para avaliar se o valor da variável i é maior ou igual ao valor desejado, que no nosso exemplo é 10.

Ao fazer a depuração do código, os comandos inseridos dentro das chaves serão executados enquanto a condição for verdadeira. No nosso exemplo, a expressão console.log(i) pede para exibir no navegador o conteúdo da variável i. Por fim, há a atualização da expressão inicial representada pelo comando i++, que significa adicionar 1 ao valor de i. 

Vamos para outro exemplo de algoritmo com o uso de variáveis do tipo array. Imagine um carrinho de compras com alguns itens de materiais escolares, e precisamos listar o nome do produto, o valor unitário, a quantidade comprada e calcular o valor total por item e o total do carrinho. Confira o código a seguir:

var carrinho = new Array();
	carrinho[0] = ["Livro", 100.0, 2];
	carrinho[1] = ["Caderno", 50, 3];
var totalItemCarrinho = 0;
var totalCompra = 0;
for ( let i = 0; i < carrinho.length; i++){
	//calcular o valor total de cada item do carrinho
    totalItemCarrinho = carrinho[i][1] * carrinho[i][2];
    console.log("Nome do produto: " + carrinho[i][0] +  "/ Valor unitário " + carrinho[i][1].toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' }) + "/ Quantidade: " + carrinho[i][2] + " / Valor total do item: " + totalItemCarrinho.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' }) + ".");
    totalCompra += totalItemCarrinho;
}
console.log("O valor total da compra é de " + totalCompra.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })); 
// saída:
/*
Nome do produto: Livro/ Valor unitário R$ 100.00/ Quantidade: 2 / Valor total do item: R$ 200.00.
Nome do produto: Caderno/ Valor unitário R$ 50.00/ Quantidade: 3 / Valor total do item: R$ 150.00.
O valor total da compra é de R$ 350.00
*/


Na primeira linha, foi declarada a array carrinho e adicionamos três elementos na variável, que correspondem a dois produtos no carrinho. Cada linha da array contém três valores, que representam o nome do produto, o valor unitário e a quantidade adicionada ao carrinho.

Perceba que esses valores são separados por vírgula, e a variável do tipo string está entre aspas. Também declaramos as variáveis totalItemCarrinho e totalCompra que serão utilizadas para calcular os valores. É importante dizer que, nesse exemplo, utilizamos a função .toLocaleString() para formatar os valores e apresentá-los com a formatação de moeda Real.

Ao executarmos o loop for, iniciamos a variável i que será utilizada para acessar o conteúdo do array e para incrementar o índice. A expressão condicional utiliza a propriedade length, que retorna qual a quantidade de elementos existentes na array e servirá como comparativo para determinar o final da estrutura de repetição.

Por fim, executamos a ação desejada, que no nosso exemplo é acessar cada elemento da array carrinho, seguido do índice referente à posição que desejamos acessar no item. Vale ressaltar que o índice de array é iniciado em 0, portanto, para chegar ao valor do produto livro, é preciso acessar carrinho[i][1], pois ele está na segunda posição.

Também fazemos o cálculo referente à quantidade comprada e armazenamos o seu conteúdo na variável totalCompra. A seguir, listamos as informações referentes a cada elemento. Quando terminar a execução do loop, será exibida a mensagem com o valor total da compra.

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

Existem outras formas de utilizar o JavaScript loop for, que inclusive tem uma sintaxe diferente da forma já apresentada. Confira, a seguir, como funcionam os loops for/in e o for/of.

O for/in é utilizado para acessar as propriedades de um objeto. A sintaxe utilizada nessa estrutura é:

for (variável in objeto) {
	//executar bloco de código
}


Na prática, em cada execução do loop é lida uma propriedade do objeto. Para exemplificar a forma de utilização desse recurso, vamos fazer um código para ler uma variável que contém as características de um veículo, entre elas, o nome, a marca e o ano de fabricação. Confira o código a seguir.

var carro = {modelo: 'A3 Sedan', marca: 'Audi', ano: 2020}
for (let caracteristica in carro){
    //exibe as propriedades do objeto carro
    console.log(caracteristica + ": " + carro[caracteristica]);
}
/* saída:
modelo: A3 Sedan
marca: Audi
ano: 2020
*/


A variável utilizada nesse exemplo é do tipo objeto, e cada característica do veículo corresponde a uma propriedade. Portanto, a declaração do loop for/in solicita o acesso a cada característica dentro do objeto carro.

O objeto contém um índice e o seu valor correspondente. No nosso exemplo, o índice é representado por: modelo, marca e ano. Dessa forma, para cada elemento no objeto será exibido na console o nome da propriedade e o conteúdo armazenado em cada uma.

É importante dizer que, apesar de funcionar para a manipulação de arrays, a utilização do loop for/in não é considerada ideal para acessar esse tipo de dado, pois ele retorna o valor do índice, não o conteúdo da propriedade.

Uma das formas para trabalhar com arrays é com a utilização da estrutura for/of. Para que você possa compreender a diferença, veja o exemplo a seguir, em que é feita a leitura das letras a, b e c armazenadas em uma array. Em primeiro lugar, vamos fazer a leitura com o loop for/in.

var letras = ['a', 'b', 'c'];
for (let i in letras) {
    console.log(i);
}
/*
saída:
0
1
2
*/


Perceba que a saída do código traz apenas a posição de cada conteúdo, ou seja, o índice do elemento na array. Agora, confira o mesmo exemplo com a utilização do loop for/of e veja que o resultado será o conteúdo armazenado em cada índice da array.

for (let i of letras) {
	console.log(i);
}
/*
saída:
a
b
c
*/

É importante dizer que a estrutura do loop for/of é:

for ( variável of iterável) {
	//	Executar bloco de códigos
}


Na qual:

• variável: pode ser declarada como var, let ou const;
• iterável: objetos que contêm propriedades iteráveis, como string, arrays, maps, sets etc.

Qual a compatibilidade com os navegadores?

Ao utilizar os recursos do JavaScript, é importante verificar a compatibilidade com os navegadores. Isso porque há situações em que determinado comando ou função pode não funcionar da maneira esperada e causar falhas durante o acesso à página.

A estrutura de repetição for e for/in são compatíveis com os principais navegadores, inclusive com os utilizados em dispositivos móveis. Já a estrutura for/of não é suportada pelo navegador Internet Explorer, por exemplo.

Como você pôde ver, existem diferentes variações para as estruturas de repetições JavaScript for, como os loops for/in e o for/of. É importante conhecer cada uma delas e para quais tipos de dados elas são mais indicadas. Esse entendimento é essencial para que você possa desenvolver aplicações que utilizem os recursos adequados e com as boas práticas de programação.

Gostou do nosso conteúdo sobre como utilizar o loop JavaScript for? Então, aproveite que está por aqui e veja o que é função callback e como utilizar esse recurso!