Javascript – o comando FOR

Olá, devs!

A linguagem Javascript foi criada, em 1995, com o objetivo de tornar dinâmica a visualização, no navegador Netscape Navigator, dos sites da web.

Como toda linguagem de programação. O Javascript oferece estruturas de repetição de comandos, como o comando for, while e do-while.

Este artigo vai tratar de um dos comandos mais básicos de qualquer linguagem de programação, incluindo Javascript: o comando FOR.

Conteúdo

1.   Introdução

2.   A linguagem Javascript

3.   Um pouco de história

4.   Comandos de Repetição

5.   O comando FOR do Javascript

6.   Considerações Finais

7.   Referências

1 – Introdução

No início da web, os sites eram criados apenas com HTML e figuras GIF.

A linguagem Javascript foi criada para o navegador Netscape Navigator com o objetivo de tornar os sites dinâmicos e ajudar na validação de dados de formulários do lado do cliente.

Rapidamente, ela foi crescendo e tornando as páginas verdadeiros sistemas dinâmicos, e até com características gráficas impressionantes.

Atualmente, não se cria uma só página da web sem usar algum comando do Javascript.

Além do comportamento dinâmico, essa linguagem é usada também no backend, por meio do framework Node.js, e implementações em robôs, IOT (Internet of Things), aplicativos mobile e jogos.

Este artigo vai tratar de um dos comandos mais básicos de qualquer linguagem de programação: o comando FOR.

Ele é um dos principais comandos de repetição, usado em praticamente todas as linguagens de programação.

2 – A linguagem Javascript

Segundo Isaac [1], Javascript (também conhecida por JS; lê-se “dgei-es”) é uma linguagem de programação de computadores utilizada, principalmente, para o desenvolvimento web (juntamente com HTML e CSS), no lado do cliente (client side), mas ela também é usada no lado do servidor (server side), com o framework Node.js. Além disso, o Javascript também é usado para o desenvolvimento de aplicativos (mobile), de jogos, de dispositivos IoT (Internet of Things) e robótica.

Suas características principais são:

• Interpretada – linguagem não compilada, que não precisa passar por um processo de compilação. Isso permite que sejam realizados testes rápidos no código sem precisar gerar um programa executável, via compilação;

• Orientada a objetos – o programador pode modelar os dados como classes e usa todo o poder dos objetos e seus métodos;

• Multiparadigma – é uma linguagem orientada a objetos, mas também pode ser codificada nos paradigmas procedural e funcional;

• Tipagem fraca (mutável) – as variáveis podem mudar de tipos ao longo do programa - por exemplo, uma variável inicializada com um valor inteiro pode receber um dado real (float) ou uma cadeia de caracteres (string)

3 – Um pouco de história

O artigo [4] informa que a linguagem Javascript foi criada em 1995, por Brendan Eich, um programador da empresa Netscape, em apenas 10 dias!

Primeiro, ela foi chamada de Mocha, depois renomeada para Livescript e, por fim, Javascript. O nome dela sugere alguma relação com Java, linguagem contemporânea que fez muito sucesso à época e até hoje é muito utilizada.

Embora as duas linguagens sejam bem diferentes e tenham aplicações diferentes, a relação entre elas se dá porque a sintaxe do Javascript derivou da linguagem Java. A semelhança entre os nomes deve ter sido mais uma estratégia de marketing, aproveitando o sucesso da linguagem Java.

Naquela época, a web estava apenas no começo, e havia apenas um navegador com interface gráfica - Mosaic, criado em 1993 - (ver figura), que dominava o mercado, mesmo com as limitações de sites baseados apenas em HTML e figuras GIF.

Os desenvolvedores líderes do Mosaic fundaram a empresa Netscape e criaram um novo navegador chamado de Netscape Navigator (figura), melhor do que o Mosaic. Atualmente, a Netscape se chama Mozilla, e ela é responsável pela evolução da linguagem Javascript.

No início da web, os sites eram estáticos e a Netscape decidiu incorporar o Javascript para dar aos sites um comportamento dinâmico e interatividade.

Inicialmente, o Javascript era muito usado para validar campos de formulários HTML, que eram tratados por códigos executáveis (.cgi), geralmente escritos em C ou Perl. O próximo passo foi a criação de menus dinâmicos e outros elementos de interface gráfica.

Os sites logo se popularizaram e receberam vários reforços técnicos, como o uso de applets (programas curtos feitos em Java), que permitiam a animação de figuras.

A Microsoft também tinha criado o seu navegador próprio, o Internet Explorer (IE) (ver figura), e a sua linguagem de script, o JScript.

Cada navegador criava, então sua própria linguagem de script, resultando numa tremenda incompatibilidade entre eles. Após um tempo de conflitos, foi acordado que apenas uma linguagem de script seria usada por todos, justamente o Javascript.

A Netscape submeteu o Javascript à associação ECMA (European Computer Machinery Association) e ela foi padronizada, com o nome de ECMAScript. Outras linguagens também foram baseadas neste padrão ECMAScript, como ActionScript (usado no programa Flash, da Adobe) e o JScrip, da Microsoft.

Algumas versões depois, em 2015, chegamos à versão atual do Javascript, ECMAScript 6, (ou ES6), hoje suportada pelos principais navegadores da web (Chrome, Firefox, Edge, Opera, Safari), desde 2016 (ver figura).

É importante frisar que ECMAScript e Javascript não são a mesma coisa, pois Javascript é a soma da padronização ECMAScript com as APIs fornecidas pelos seus hosts principais: navegadores e node.js

Atualmente, a linguagem Javascript é usada em praticamente todo site da web e é uma das linguagens mais usadas e populares do mundo, segundo pesquisas recentes dos últimos anos!

4 – Comandos de Repetição

Como já foi informado, a linguagem Javascript apresenta uma sintaxe semelhante à da linguagem Java, só que ela também pode ser codificada no paradigma procedural.

Toda linguagem de programação é baseada em comandos básicos como:

• Declaração de variáveis;
• Atribuição de valores;
• Comandos de seleção;
• Comandos de repetição;
• Funções;
• Operadores diversos (aritméticos, condicionais e lógicos).

Os comandos básicos da linguagem são bem semelhantes a outras linguagens, possuindo comandos de estruturas de repetição como:

For – itera uma quantidade de vezes definida;

While – itera enquanto uma condição testada, antes do ciclo, é verdadeira, parando quando ela for falsa;

Do...while - igual ao while, só que o teste é feito no final do ciclo;

Todos estes comandos podem ser usados de acordo com a vontade do programador, mas alguns são mais adequados do que outros, dependendo do problema e do teste (ou fluxo) que se deseja realizar.

Além disso, qualquer um deles pode ser simulado por um dos outros, dependendo apenas dos valores atribuídos para os atributos de valor inicial, incremento e da condição do teste de continuidade.

5 – O Comando FOR do Javascript

De acordo com Paldisey [5], dentre os comandos de repetição, o comando FOR é extremamente importante no fluxo de execução do programa. Existem algumas variações dele na linguagem Javascript:

• FOR convencional;
• FOI... IN;
• FOR... OF.

O comando FOR convencional

Este comando é utilizado para iterar um bloco de comandos um número conhecido de vezes. Sua sintaxe básica é a seguinte:

for( valor inicial; teste, incremento )

onde:

• valor inicial – valor inicial da contagem da variável de controle do for;
• teste - condição testada para decidir se uma nova iteração será realizada;
• incremento – valor que será usado para atualizar a variável de controle do for para o próximo valor dela.

Exemplo 1: escreve o valor de uma variável um determinado número de vezes.

for( let i = 1; i < 5; i++ ) {
         console.log( i );
 }

Onde:

• A variável i precisa ser declarada no início do programa;
• O comando i++ equivale a i = i + 1 (incrementa variável i de 1 unidade);
• Console.log(i) apresenta o valor de i na tela.

Neste caso, a variável de controle (i) iniciará com o valor 1, o teste será feito ( i < 5? ); como essa condição é verdadeira, será impresso o valor de i ( 1 ) como saída.

Na próxima iteração, o valor da variável de controle ( i ) será adicionada a 1, resultando em 2 e o ciclo se repete, conforme a tabela abaixo:

Na última linha da tabela, é mostrado que o teste deu resultado falso (5 não é menor do que 5; é igual!), portanto, a ação do bloco não é realizada e o comando for é encerrado, passando a execução para o primeiro comando após o bloco do for.

Uma das utilizações deste comando é realizar uma varredura por todos os elementos de um array ou string, conforme mostrado no exemplo a seguir:

Exemplo 2: escreve o valor armazenado em cada posição de um vetor

 var notas = [6.8, 9.0, 7.2, 10.0];

 for( let i = 0; i < notas.length; i++ ) {

           console.log( notas[ i ] );

  }

Onde:

• A variável notas é um array contendo 4 notas, em valores reais (float);
• O comando notas.length rertorna o número de elementos do array (4);
• O índice de um array em Javascript inicia em 0 (zero), ao invés de 1;

Neste caso, a variável de controle (i) iniciará com o valor 0 e o teste será feito (i < 4 ?); como essa condição é verdadeira, será mostrado o valor do primeiro elemento de notas (notas[ 0 ] = 6.8) na saída.

Na próxima iteração, o valor da variável de controle ( i ) será adicionada a 1, resultando em 1 e o ciclo se repete, conforme a tabela abaixo:

Na última linha da tabela, é mostrado que o teste deu resultado falso (4 não é menor do que 4; é igual!), portanto, a ação do bloco não é realizada e o comando for é encerrado, passando a execução para o primeiro comando após o bloco do for.

Mais uma utilização bem comum do comando for é para varrer todos os elementos de uma matriz, como mostra o exemplo a seguir.

Para a matriz de dados acima, de tamanho 2 x 3 (2 linhas e 3 colunas, vamos escrever um trecho de programa para o seguinte exemplo.

Exemplo 3: declara os valores e varre todos eles, escrevendo cada um na tela.

var matriz = [ [ 15, 20, 25 ],
             [ 30, 35, 40 ]
           ];

let numLinhas = 2;
let numColunas = 3;
 
for( let i = 0; i < numLinhas; i++ ) {
  for( let j = 0; j < numColunas; j++ ) {
      console.log( notas[ i, j ] );
      }
  }

Onde:

• A variável matriz é um array com 2 linhas e 3 colunas de valores inteiros;
• A variável numLinhas define o número de linhas da matriz (2);
• A variável numColunas define o número de colunas da matriz (3);
• A variável i itera o índice de cada uma das 2 linhas, de 0 a 1;
• A variável j itera o índice de cada uma das 3 colunas, de 0 a 2;

Ou seja, para cada valor do índice de uma linha, a variável coluna percorre cada um dos 3 índices das colunas.

Neste caso, iniciando pelo primeiro comando for, externo, a variável de controle (i) iniciará com o valor 0 (primeira linha), o teste será feito ( i < 2 ? ); como essa condição é verdadeira, o fluxo executará o segundo comando for.

Agora, no segundo comando for, interno, a variável de controle ( j ) iniciará com o valor 0 (primeira coluna), o teste será feito (j < 3 ?); como essa condição é verdadeira, o comando console.log(matriz[ i ][ j ]) será executado, mostrando o valor ( 15 ) do elemento da primeira linha ( i = 0 ) e da primeira coluna ( j = 0 ) na saída.

A execução segue com a próxima iteração do segundo comando for, e o valor da variável de controle ( j ) será adicionada a 1, resultando em 1 e o ciclo do parágrafo anterior se repete, varrendo todas as colunas da primeira linha, conforme a tabela abaixo:

O comando FOR...IN

Segundo a referência [6], este comando é uma variação do comando FOR que itera sobre todas as propriedades enumeráveis de um objeto, incluindo propriedades enumeráveis herdadas. Veja um exemplo do seu uso:

Exemplo 4: varre todos os valores de um objeto com propriedade enumerável

const objeto = { a: 10, b: 20, c: 30 };
   
for ( const prop in objeto ) {
  console.log(`${prop}: ${objeto[prop]}`);
}

A saída esperada é:

 "a: 10"

 "b: 20"

 "c: 30"

           É importante reforçar que qualquer um dos 3 parâmetros do comando for (valor inicial; teste, incremento) é opcional, podendo o comando ser executado sem qualquer um deles ou até todos, desde que o valor inicial seja atribuído antes de entrar no comando for, o incremento seja atualizado dentro do comando for e a condição seja sempre verdadeira (True) e haja uma maneira de sair do comando for, com o comando break, por exemplo.

O comando FOR...OF

Este comando é outra variação do comando FOR que opera sobre objetos iteráveis (incluindo Array, Map, Set), com instruções a serem executadas para o valor de cada propriedade distinta. Veja um exemplo do seu uso:

Exemplo 5: varre todos os valores de um objeto iterável

const vetor = [10, 20, 30];
vetor.indice = "olá";
 
for (const i in vetor) {
console.log(i);
}
 

A saída esperada é:

10

20

30

Comando BREAK

O comando break usado dentro do bloco de um comando FOR causa o imediato encerramento da execução do loop, passando o fluxo para o próximo comando após o bloco do for.

Tomando como base o exemplo 1 acima:

Exemplo 6: escreve os valores armazenado em um vetor, com BREAK 

 var notas = [6.8, 9.0, 7.2, 10.0];
 for( let i = 0; i < notas.length; i++ ) {
         if( i == 2) break;
         console.log( notas[ i ] );
 }
console.log(“fim”)

O comando break (que faz parte do comando if) vai causar a saída do comando for no momento em que o índice i for igual a 2, impedindo a impressão dos valores notas[2] (7.2) e notas[3] (10.0), passando diretamente para o comando de impressão da palavra “fim”.

Comando CONTINUE

O comando continue é usado dentro do bloco de um comando FOR causa o salto da variável de contagem para o seu próximo valor.

Tomando como base o exemplo 6 acima:

Exemplo 7: escreve os valores armazenado em um vetor, com CONTINUE 

 var notas = [6.8, 9.0, 7.2, 10.0];
 for( let i = 0; i < notas.length; i++ ) {
         if( i == 2) continue;
         console.log( notas[ i ] );
 }
console.log(“fim”)

O comando continue (que faz parte do comando if) vai impedir a impressão do valor notas[2] (7.2), continuando com a impressão do valor notas[3] (10.0).

6 – Considerações Finais

Este artigo tratou da linguagem Javscript, uma das mais importantes linguagens para que os sites da web alcançassem o sucesso atual.

Ela foi criada para o navegador Netscape Navigator com o objetivo de tornar os sites dinâmicos e ajudar na validação de dados de formulários do lado do cliente.

Além do comportamento dinâmico, essa linguagem é usada também no backend, por meio do node.js, e implementações em robôs, IOT, aplicativos mobile e jogos.

Este artigo mostrou os detalhes do comando FOR, um dos comandos de repetição mais básicos, usado em praticamente todas as linguagens de programação.

Foram mostradas as variações deste comando na linguagem Javascript, com exemplos de utilização e outros comandos associados, como o break e continue. 

As linguagens de programação se tornaram muito complexas atualmente, mas saber os comandos básicos de uma linguagem de programação, como o comando FOR, uma das base de qualquer linguagem de programação, é obrigação de qualquer programador, seja ele iniciante ou experiente.

7 – Referências

[1] Isaac, O que é Javascript? História, cronologia e curiosidades. Disponível em: <https://viuu.com.br/2023/01/28/o-que-e-javascript-historia-cronologia-e-curiosidades/>. Acesso em: 15/08/2023.

[2] Eduardo Mustafa, JavaScript – 20 anos de história e construção da web. Disponível em: <https://imasters.com.br/front-end/javascript-20-anos-de-historia-e-construcao-da-web>. Acesso em: 15/08/2023.

[4] Boateng Dickson, A Brief History of JavaScript. Disponível em: <https://dev.to/dboatengx/history-of-javascript-how-it-all-began-92a>. Acesso em: 16/08/2023.

[5] James Padolsey, Clean Code in JavaScript, Packet Publishing Ltd. Birmingham, 2020.

[6] JavaScript, Disponível em: <https://developer.mozilla.org/pt-BR/docs/Web/JavaScript>. Acesso em: 17/08/2023.