Guia Prático da Função For no JavaScript: codando uma tabuada do zero!

Olá Devs, no artigo de hoje iremos abordar sobre a linguagem de programação JavaScript, com foco em uma função própria da linguagem, o for, com exemplos práticos e demonstrações das variações possíveis dentro da função, além de um programa completo de uma tabuada simples implementada apenas usando esta função citada acima.

Sumário:

Introdução
Função For
Definição
Sintaxe
Fluxo de execução do For
Exemplos com números
Exemplos com arrays
For aninhado
Expressões For opcionais
Documentação
Tabuada
Conclusão
Referências

1. Introdução

O JavaScript é uma linguagem de programação amplamente utilizada, conhecida por sua versatilidade e capacidade de criar interações dinâmicas em páginas web. Como uma linguagem de programação, sabe-se que existem dois tipos de funções: as criadas pelo desenvolvedor e as funções próprias da linguagem.

Dessa forma, a função For se encaixa na categoria de funções próprias da linguagem, também conhecidas como funções embutidas ou funções nativas. São funções que já fazem parte da linguagem de programação, sendo funções pré-definidas e que oferecem funcionalidades específicas.

No caso do JavaScript, as funções próprias da linguagem são chamadas de métodos, e nesse artigo falaremos sobre o tema “Guia prático da função For no JavaScript: codando uma tabuada do zero”, explicando mais afundo sobre o método For, seu objetivo, quando é usado, variações, exemplos práticos e por último, um código completo de uma tabuada para você ver na prática como funciona e o quão grandiosa é essa função!

2. Função For

2.1 Definição:

A estrutura de controle For em JavaScript é usada para criar loops, ou seja, para executar um conjunto de instruções repetidamente enquanto uma condição específica for verdadeira. Nesse sentido, ela é útil quando deseja-se executar um bloco de código um número de vezes ou enquanto uma condição específica for atendida.

2.2 Sintaxe:

for(<inicialização>; <condição>; <expressão final>){

// Bloco de código a ser repetido

}

Inicialização: É a expressão que é executada antes do início do loop. Geralmente, ela é usada para definir uma variável de controle que determina quantas vezes o loop será executado. A inicialização é executada apenas uma vez.
Condição: É uma expressão booleana que é avaliada antes de cada iteração do loop. Se a condição for verdadeira, o bloco de código dentro do loop é executado. Se for falsa, o loop é encerrado.
Expressão Final: É uma expressão que é avaliada após cada iteração do loop, geralmente usada para atualizar a variável de controle. Isso permite que você altere o comportamento do loop a cada iteração

2.3 Fluxo de execução do For:

A inicialização é executada.
A condição é avaliada. Se for verdadeira, o bloco de código dentro do loop é executado; caso contrário, o loop é encerrado.
Após a execução do bloco de código, a expressão final é avaliada.
A condição é novamente avaliada. Se for verdadeira, o bloco de código é executado novamente; caso contrário, o loop é encerrado.

2.4 Exemplos com números:

2.4.1) Imprimir os números de 1 a 10

O loop for no código dado executará o bloco de código dentro das chaves 10 vezes, começando com i valendo 1 e incrementando seu valor a cada iteração até que i seja igual a 10. Durante a execução, o console exibirá os números de 1 a 10, um por linha.

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

let i = 1: uma variável i é declarada e inicializada com o valor 1.
i <= 10: enquanto a condição i for menor ou igual a 10, o loop continuará a ser executado.
i++: é uma abreviação para incrementar o valor de i em 1 a cada iteração.

Saída:

> 1
> 2
> 3
> 4
> 5
> 6
> 7
> 8
> 9
> 10

2.4.2) Imprimir os números de 10 a 1

O loop for no código dado executará o bloco de código dentro das chaves enquanto i for menor que 0, diminuindo o valor de i em 1 a cada iteração. Isso resultará na impressão dos números de 10 a 1, um por linha, no console.

for (let i = 10; i > 0; i--) {
  console.log(i);
}

let i = 10: uma variável i é declarada e inicializada com o valor 10.
i > 0: enquanto a condição i for maior que 0, o loop continuará a ser executado.
i--: é uma abreviação para diminuir o valor de i em 1 a cada iteração.

Saída

> 10
> 9
> 8
> 7
> 6
> 5
> 4
> 3
> 2
> 1

2.4.3) Utilizando multiplicação no incremento

O loop for no código dado executará o bloco de código dentro das chaves enquanto x for menor que 100. A cada iteração de x será multiplicado por 3, o que fará com que os números impressos no console sejam uma sequência de múltiplos de 3 a partir de 5, até que o valor de x se torne maior ou igual a 100.

for (let x = 5; x < 100; x *= 3) {
  console.log(x);
}

Saída

> 5
> 15
> 45

2.4.4) Verificando se um número é primo

O loop for que começa a contar a partir de 2 (já que o número primo é definido como um número maior do que 1) até um número anterior ao número que estamos verificando (numero). A cada iteração, verifica-se se numero é divisível por i. Se for, isso significa que numero não é um número primo, então primo é definido como false e o loop é interrompido com break.

const numero = 17;
let primo = true;

for (let i = 2; i < numero; i++) {
  if (numero % i === 0) {
      primo = false;
      break;
  }
}

if (primo) {
  console.log(numero + " é primo.");
} else {
  console.log(numero + " não é primo.");
}

Saída

> "17 é primo."

2.4.5) Calculando fatorial

O loop for começa a contar a partir de 1 até o número que estamos calculando o fatorial (numero). A cada iteração, o valor de i é multiplicado pelo valor atual de fatorial. Isso calcula o produto de todos os números de 1 até numero.

const numero = 5;
let fatorial = 1;

for (let i = 1; i <= numero; i++) {
  fatorial *= i;
}

console.log("O fatorial de " + numero + " é " + fatorial);

Saída

> "O fatorial de 5 é 120"

2.5 Exemplos com arrays:

2.5.1) Percorrendo os elementos de um Array

O loop for que começa a contar a partir de 0 (índice inicial de um array) e vai até o comprimento do array (numeros.length). O loop percorre cada elemento do array, um por um.

const numeros = [1, 2, 3, 4, 5];

for (let i = 0; i < numeros.length; i++) {
  console.log(numeros[i]);
}

Saída

> 1
> 2
> 3
> 4
> 5

2.5.2) Somando elementos de um Array

O loop for percorre cada elemento do array valores, começando do índice 0 até o índice igual ao comprimento do array (valores.length). Dentro do loop, a linha adiciona o valor do elemento atual (no índice i) à variável soma. Isso acumula os valores dos elementos do array.

const valores = [10, 20, 30, 40, 50];
let soma = 0;


for (let i = 0; i < valores.length; i++) {
  soma += valores[i];
}


console.log("A soma dos valores é: " + soma);

Saída

> "A soma dos valores é: 150"

2.5.3) Encontrando o maior número de um Array

O loop for percorre cada elemento do array numeros, começando do segundo elemento (índice 1), já que o primeiro elemento foi usado para inicializar maiorNumero. Dentro do loop, verifica se o valor do elemento atual (no índice i) é maior do que o valor atual de maiorNumero. Se for verdade, o valor de maiorNumero é atualizado para o valor do elemento atual.

const numeros = [8, 14, 2, 33, 6];
let maiorNumero = numeros[0];

for (let i = 1; i < numeros.length; i++) {
  if (numeros[i] > maiorNumero) {
      maiorNumero = numeros[i];
  }
}

console.log("O maior número é: " + maiorNumero);

Saída

> "O maior número é: 33"

2.6 For Aninhado:

Aninhar um For consiste em colocar esse loop dentro de outro. O aninhamento de loops é necessário para fazer determinados processamentos um poucos mais complexos, veremos um exemplo quando fizermos a tabuada.

2.7 Expressões For Opcionais:

Todas as três expressões na condição do loop for são opcionais. Por exemplo, no bloco de inicialização, não é necessário inicializar variáveis:

var i = 0;
for (; i < 9; i++) {
console.log(i);
}

Assim como ocorre no bloco de inicialização, a condição também é opcional. Se você está omitindo essa expressão, você certificar-se de quebrar o loop no corpo para não criar um loop infinito.

for (var i = 0; ; i++) {
console.log(i);
if (i > 3) break;
}

Também podemos omitir todos os três blocos. Novamente, certifique-se de usar uma instrução break no final do loop e também modificar (incrementar) uma variável, para que a condição do break seja verdadeira em algum momento.

var i = 0;

for (;;) {
if (i > 3) break;
console.log(i);
i++;
}

3. Documentação

Para buscar mais informações sobre a função For no JavaScript, indico 2 sites:

4. Tabuada

O resultado do código exibe uma tabela de multiplicação de 1 a 10!

for (let i = 1; i <= 10; i++) {
  for (let j = 1; j <= 10; j++) {
      console.log(`${i} x ${j} = ${i * j}`);
  }
	console.log();
}

O primeiro loop "for" (for (let i = 1; i <= 10; i++)) começa a contar de 1 até 10. Isso representa o multiplicando, ou seja, o número que será multiplicado pelos valores de 1 a 10.

Dentro desse primeiro loop, há um segundo loop "for" aninhado (for (let j = 1; j <= 10; j++)). Esse loop interno começa a contar de 1 até 10. Isso representa o multiplicador, ou seja, o número pelo qual o multiplicando será multiplicado.

Dentro do loop interno, a linha console.log(${i} x ${j} = ${i * j}); calcula e exibe o resultado da multiplicação de i (multiplicando) e j (multiplicador). Isso cria uma linha da tabela de multiplicação formatada.

Após cada iteração do loop interno (ou seja, para cada multiplicador de 1 a 10), há um console.log(); vazio. Isso insere uma linha em branco para separar as diferentes linhas da tabela de multiplicação.

Saída

> "1 x 1 = 1"
> "1 x 2 = 2"
> "1 x 3 = 3"
> "1 x 4 = 4"
> "1 x 5 = 5"
> "1 x 6 = 6"
> "1 x 7 = 7"
> "1 x 8 = 8"
> "1 x 9 = 9"
> "1 x 10 = 10"
> 
> "2 x 1 = 2"
> "2 x 2 = 4"
> "2 x 3 = 6"
> "2 x 4 = 8"
> "2 x 5 = 10"
> "2 x 6 = 12"
> "2 x 7 = 14"
> "2 x 8 = 16"
> "2 x 9 = 18"
> "2 x 10 = 20"
> 
> "3 x 1 = 3"
> "3 x 2 = 6"
> "3 x 3 = 9"
> "3 x 4 = 12"
> "3 x 5 = 15"
> "3 x 6 = 18"
> "3 x 7 = 21"
> "3 x 8 = 24"
> "3 x 9 = 27"
> "3 x 10 = 30"
> 
> "4 x 1 = 4"
> "4 x 2 = 8"
> "4 x 3 = 12"
> "4 x 4 = 16"
> "4 x 5 = 20"
> "4 x 6 = 24"
> "4 x 7 = 28"
> "4 x 8 = 32"
> "4 x 9 = 36"
> "4 x 10 = 40"
> 
> "5 x 1 = 5"
> "5 x 2 = 10"
> "5 x 3 = 15"
> "5 x 4 = 20"
> "5 x 5 = 25"
> "5 x 6 = 30"
> "5 x 7 = 35"
> "5 x 8 = 40"
> "5 x 9 = 45"
> "5 x 10 = 50"
> 
> "6 x 1 = 6"
> "6 x 2 = 12"
> "6 x 3 = 18"
> "6 x 4 = 24"
> "6 x 5 = 30"
> "6 x 6 = 36"
> "6 x 7 = 42"
> "6 x 8 = 48"
> "6 x 9 = 54"
> "6 x 10 = 60"
> 
> "7 x 1 = 7"
> "7 x 2 = 14"
> "7 x 3 = 21"
> "7 x 4 = 28"
> "7 x 5 = 35"
> "7 x 6 = 42"
> "7 x 7 = 49"
> "7 x 8 = 56"
> "7 x 9 = 63"
> "7 x 10 = 70"
> 
> "8 x 1 = 8"
> "8 x 2 = 16"
> "8 x 3 = 24"
> "8 x 4 = 32"
> "8 x 5 = 40"
> "8 x 6 = 48"
> "8 x 7 = 56"
> "8 x 8 = 64"
> "8 x 9 = 72"
> "8 x 10 = 80"
> 
> "9 x 1 = 9"
> "9 x 2 = 18"
> "9 x 3 = 27"
> "9 x 4 = 36"
> "9 x 5 = 45"
> "9 x 6 = 54"
> "9 x 7 = 63"
> "9 x 8 = 72"
> "9 x 9 = 81"
> "9 x 10 = 90"
> 
> "10 x 1 = 10"
> "10 x 2 = 20"
> "10 x 3 = 30"
> "10 x 4 = 40"
> "10 x 5 = 50"
> "10 x 6 = 60"
> "10 x 7 = 70"
> "10 x 8 = 80"
> "10 x 9 = 90"
> "10 x 10 = 100"
>

5. Conclusão

Em conclusão, a função for é uma ferramenta fundamental na linguagem JavaScript que oferece a capacidade de criar iterações controladas e repetitivas em seus programas. A função for permite que os desenvolvedores percorram tarefas com eficiência, manipulando variáveis de controle e estabelecendo condições para determinar o momento de encerrar o loop.

Isso permite que os programadores realizem uma ampla variedade de tarefas, desde a iteração simples sobre elementos de um array até a criação de algoritmos complexos, como a geração de sequências matemáticas ou a aplicação de operações em várias etapas.

Neste artigo, vimos exemplos práticos simples e mais complexos, finalizando com o código de uma tabuada simples.

6. Referências

Documentação Oficial (ECMA)

Documentação Famosa (MDN)

Webmasters Online

DevDocs

Hora de Codar