Explore Estruturas de Loop em JavaScript

Introdução

Neste laboratório, os alunos mergulharão profundamente nas estruturas de loop do JavaScript, explorando várias técnicas de iteração que são fundamentais para a lógica de programação. O laboratório cobre tipos de loop essenciais, incluindo loops while, loops do-while, loops for e loops for-in, proporcionando experiência prática com cada estrutura por meio de exemplos de codificação práticos e aprendizado incremental.

Os participantes começarão entendendo a sintaxe básica dos loops while, aprendendo como criar iterações controladas e realizar tarefas como contagem e busca condicional. À medida que progridem, eles praticarão a implementação de diferentes estruturas de loop, comparando suas características e casos de uso exclusivos, o que ajudará a desenvolver uma compreensão abrangente de como os loops podem ser usados para manipular dados, iterar em arrays e criar soluções de programação dinâmicas em JavaScript.

Entenda a Sintaxe do Loop While e Uso Básico

Nesta etapa, você aprenderá sobre a sintaxe básica e o uso de loops while em JavaScript. Loops while são estruturas de controle fundamentais que permitem repetir um bloco de código enquanto uma condição especificada for verdadeira.

Vamos começar criando um novo arquivo JavaScript para explorar loops while. Abra o WebIDE e crie um arquivo chamado whileLoop.js no diretório ~/project.

// Crie um loop while simples para contar de 1 a 5
let count = 1;

while (count <= 5) {
  console.log(`Contagem atual: ${count}`);
  count++;
}

Agora, execute o arquivo JavaScript usando Node.js para ver a saída:

node ~/project/whileLoop.js

Exemplo de saída:

Contagem atual: 1
Contagem atual: 2
Contagem atual: 3
Contagem atual: 4
Contagem atual: 5

Vamos detalhar a sintaxe do loop while:

• let count = 1; inicializa uma variável de contador antes do loop
• while (count <= 5) define a condição que deve ser verdadeira para continuar o loop
• console.log() imprime o valor atual de count
• count++ incrementa o contador em cada iteração

Agora, vamos criar um exemplo mais prático que demonstra um loop while com uma condição mais complexa:

// Crie um loop while para encontrar o primeiro número divisível por 3 e 5
let number = 1;

while (!(number % 3 === 0 && number % 5 === 0)) {
  number++;
}

console.log(`Primeiro número divisível por 3 e 5: ${number}`);

Execute o arquivo novamente:

node ~/project/whileLoop.js

Exemplo de saída:

Primeiro número divisível por 3 e 5: 15

Este exemplo mostra como os loops while podem ser usados para procurar condições específicas ou realizar tarefas iterativas.

Pratique o Loop Do-While com Iteração Incremental

Nesta etapa, você aprenderá sobre loops do-while em JavaScript, que são semelhantes aos loops while, mas com uma diferença fundamental: o bloco de código é executado pelo menos uma vez antes de verificar a condição.

Crie um novo arquivo chamado doWhileLoop.js no diretório ~/project usando o WebIDE:

// Demonstre um loop do-while com simulação de entrada do usuário
let attempts = 0;
let secretNumber = 7;
let guess;

do {
  // Simule um palpite aleatório entre 1 e 10
  guess = Math.floor(Math.random() * 10) + 1;
  attempts++;

  console.log(`Tentativa ${attempts}: Adivinhou ${guess}`);

  if (guess === secretNumber) {
    console.log(`Parabéns! Você adivinhou o número em ${attempts} tentativas.`);
  }
} while (guess !== secretNumber);

Execute o arquivo JavaScript para ver como o loop do-while funciona:

node ~/project/doWhileLoop.js

Exemplo de saída:

Tentativa 1: Adivinhou 3
Tentativa 2: Adivinhou 9
Tentativa 3: Adivinhou 7
Parabéns! Você adivinhou o número em 3 tentativas.

Características principais dos loops do-while:

• O bloco de código é executado pelo menos uma vez antes de verificar a condição
• A condição é verificada no final de cada iteração
• Útil quando você deseja garantir que o código seja executado pelo menos uma vez

Vamos criar outro exemplo para ilustrar ainda mais o loop do-while:

// Demonstre a iteração incremental com loop do-while
let total = 0;
let i = 1;

do {
  total += i;
  console.log(`Total atual: ${total}, Número atual: ${i}`);
  i++;
} while (total < 10);

console.log(`Total final: ${total}`);

Execute o arquivo novamente:

node ~/project/doWhileLoop.js

Exemplo de saída:

Total atual: 1, Número atual: 1
Total atual: 3, Número atual: 2
Total atual: 6, Número atual: 3
Total atual: 10, Número atual: 4
Total final: 10

Este exemplo mostra como os loops do-while podem ser usados para iteração incremental, garantindo que o bloco de código seja executado pelo menos uma vez antes de verificar a condição de terminação.

Implemente o Loop For para Iterações Controladas

Nesta etapa, você aprenderá sobre loops for em JavaScript, que fornecem uma maneira concisa de realizar iterações controladas com um início, fim e mecanismo de incremento/decremento claros.

Crie um novo arquivo chamado forLoop.js no diretório ~/project usando o WebIDE:

// Loop for básico para imprimir números de 1 a 5
console.log("Loop de contagem básico:");
for (let i = 1; i <= 5; i++) {
  console.log(`Número atual: ${i}`);
}

// Loop for para calcular o fatorial de um número
console.log("\nCálculo do fatorial:");
let number = 5;
let factorial = 1;

for (let j = 1; j <= number; j++) {
  factorial *= j;
}

console.log(`Fatorial de ${number} é: ${factorial}`);

// Loop for para iterar em um array
console.log("\nIteração de array:");
let fruits = ["maçã", "banana", "cereja", "tâmara"];

for (let k = 0; k < fruits.length; k++) {
  console.log(`Fruta no índice ${k}: ${fruits[k]}`);
}

Execute o arquivo JavaScript para ver os diferentes exemplos de loop for:

node ~/project/forLoop.js

Exemplo de saída:

Loop de contagem básico:
Número atual: 1
Número atual: 2
Número atual: 3
Número atual: 4
Número atual: 5

Cálculo do fatorial:
Fatorial de 5 é: 120

Iteração de array:
Fruta no índice 0: maçã
Fruta no índice 1: banana
Fruta no índice 2: cereja
Fruta no índice 3: tâmara

Vamos detalhar a sintaxe do loop for:

• for (inicialização; condição; incremento/decremento) é a estrutura padrão
• let i = 1 inicializa o contador do loop
• i <= 5 define a condição de continuação
• i++ incrementa o contador após cada iteração

Crie outro exemplo demonstrando o uso mais complexo do loop for:

// Loop for aninhado para criar uma tabela de multiplicação
console.log("Tabela de multiplicação:");
for (let row = 1; row <= 5; row++) {
  let rowOutput = "";
  for (let col = 1; col <= 5; col++) {
    rowOutput += `${row * col}\t`;
  }
  console.log(rowOutput);
}

Execute o arquivo novamente:

node ~/project/forLoop.js

Exemplo de saída:

Tabela de multiplicação:
1 2 3 4 5
2 4 6 8 10
3 6 9 12 15
4 8 12 16 20
5 10 15 20 25

Este exemplo mostra como os loops for aninhados podem ser usados para criar padrões de iteração mais complexos.

Use o Loop For-In para Iterar Através dos Elementos de um Array

Nesta etapa, você aprenderá sobre o loop for-in em JavaScript, que fornece uma maneira fácil de iterar pelas propriedades de um objeto ou pelos elementos de um array.

Crie um novo arquivo chamado forInLoop.js no diretório ~/project usando o WebIDE:

// Iterando por um array usando o loop for-in
let fruits = ["maçã", "banana", "cereja", "tâmara"];

console.log("Iterando pelos Índices do Array:");
for (let index in fruits) {
  console.log(`Índice: ${index}, Fruta: ${fruits[index]}`);
}

// Iterando por um objeto usando o loop for-in
let student = {
  name: "John Doe",
  age: 22,
  major: "Ciência da Computação",
  gpa: 3.8
};

console.log("\nIterando pelas Propriedades do Objeto:");
for (let property in student) {
  console.log(`${property}: ${student[property]}`);
}

// Exemplo prático: Calculando o preço total dos itens
let shoppingCart = [
  { name: "Laptop", price: 1000 },
  { name: "Headphones", price: 100 },
  { name: "Mouse", price: 50 }
];

console.log("\nCalculando o Preço Total:");
let totalPrice = 0;
for (let index in shoppingCart) {
  totalPrice += shoppingCart[index].price;
}
console.log(`Preço Total: $${totalPrice}`);

Execute o arquivo JavaScript para ver o loop for-in em ação:

node ~/project/forInLoop.js

Exemplo de saída:

Iterando pelos Índices do Array:
Índice: 0, Fruta: maçã
Índice: 1, Fruta: banana
Índice: 2, Fruta: cereja
Índice: 3, Fruta: tâmara

Iterando pelas Propriedades do Objeto:
name: John Doe
age: 22
major: Ciência da Computação
gpa: 3.8

Calculando o Preço Total:
Preço Total: $1150

Pontos-chave sobre os loops for-in:

• Funciona com arrays e objetos
• Itera pelos índices (para arrays) ou propriedades (para objetos)
• Fornece uma maneira simples de acessar elementos sem usar loops tradicionais baseados em índice
• Tenha cuidado ao usar com arrays, pois ele itera por todas as propriedades enumeráveis

Vamos explorar outro exemplo para demonstrar sua flexibilidade:

// Usando o loop for-in para filtrar e transformar dados
let grades = {
  math: 85,
  science: 92,
  english: 78,
  history: 88
};

console.log("Filtrando Notas Acima de 80:");
for (let subject in grades) {
  if (grades[subject] > 80) {
    console.log(`${subject}: ${grades[subject]}`);
  }
}

Execute o arquivo novamente:

node ~/project/forInLoop.js

Exemplo de saída:

Filtrando Notas Acima de 80:
math: 85
science: 92
history: 88

Compare e Contraste Diferentes Estruturas de Loop

Nesta etapa, você explorará as diferenças entre várias estruturas de loop em JavaScript e aprenderá quando usar cada tipo de loop de forma eficaz.

Crie um novo arquivo chamado loopComparison.js no diretório ~/project usando o WebIDE:

// Demonstrando diferentes estruturas de loop para a mesma tarefa

// 1. While Loop: Melhor para um número desconhecido de iterações
console.log("Exemplo de While Loop:");
let whileCounter = 1;
while (whileCounter <= 5) {
  console.log(`While Loop: ${whileCounter}`);
  whileCounter++;
}

// 2. Do-While Loop: Garante pelo menos uma execução
console.log("\nExemplo de Do-While Loop:");
let doWhileCounter = 1;
do {
  console.log(`Do-While Loop: ${doWhileCounter}`);
  doWhileCounter++;
} while (doWhileCounter <= 5);

// 3. For Loop: Melhor para um número conhecido de iterações
console.log("\nExemplo de For Loop:");
for (let forCounter = 1; forCounter <= 5; forCounter++) {
  console.log(`For Loop: ${forCounter}`);
}

// 4. For-In Loop: Iterando pelas propriedades do objeto
console.log("\nExemplo de For-In Loop:");
let student = {
  name: "John Doe",
  age: 22,
  major: "Ciência da Computação"
};

for (let property in student) {
  console.log(`${property}: ${student[property]}`);
}

// 5. Comparando o desempenho do loop
console.log("\nComparação de Desempenho do Loop:");
const iterations = 1000000;

console.time("While Loop");
let a = 0;
while (a < iterations) {
  a++;
}
console.timeEnd("While Loop");

console.time("For Loop");
for (let b = 0; b < iterations; b++) {}
console.timeEnd("For Loop");

Execute o arquivo JavaScript para ver a comparação:

node ~/project/loopComparison.js

Exemplo de saída:

Exemplo de While Loop:
While Loop: 1
While Loop: 2
While Loop: 3
While Loop: 4
While Loop: 5

Exemplo de Do-While Loop:
Do-While Loop: 1
Do-While Loop: 2
Do-While Loop: 3
Do-While Loop: 4
Do-While Loop: 5

Exemplo de For Loop:
For Loop: 1
For Loop: 2
For Loop: 3
For Loop: 4
For Loop: 5

Exemplo de For-In Loop:
name: John Doe
age: 22
major: Ciência da Computação

Comparação de Desempenho do Loop:
While Loop: 2.345ms
For Loop: 1.876ms

Principais diferenças:

1. While Loop:

   • Use quando o número de iterações é desconhecido
   • Condição verificada antes de cada iteração
   • Pode não ser executado se a condição for falsa inicialmente

2. Do-While Loop:

   • Garante pelo menos uma execução
   • Condição verificada após cada iteração
   • Útil quando você deseja executar o código pelo menos uma vez

3. For Loop:

   • Melhor para um número conhecido de iterações
   • Sintaxe compacta com inicialização, condição e incremento
   • Mais comumente usado para iteração de array e contagem

4. For-In Loop:

   • Especificamente para iterar pelas propriedades do objeto
   • Funciona com objetos e arrays
   • Fornece nomes de índice ou propriedade

Vamos criar um exemplo final para demonstrar a escolha do loop certo:

// Escolhendo o loop certo para diferentes cenários
let numbers = [10, 20, 30, 40, 50];

// While loop para pesquisa condicional
console.log("\nEscolhendo o Loop Certo:");
let searchValue = 30;
let index = 0;
while (index < numbers.length && numbers[index] !== searchValue) {
  index++;
}
console.log(`Encontrou ${searchValue} no índice: ${index}`);

// For loop para iteração simples
console.log("Números ao quadrado:");
for (let i = 0; i < numbers.length; i++) {
  console.log(`${numbers[i]} ao quadrado: ${numbers[i] * numbers[i]}`);
}

Execute o arquivo novamente:

node ~/project/loopComparison.js

Exemplo de saída:

Escolhendo o Loop Certo:
Encontrou 30 no índice: 2
Números ao quadrado:
10 ao quadrado: 100
20 ao quadrado: 400
30 ao quadrado: 900
40 ao quadrado: 1600
50 ao quadrado: 2500

Resumo

Neste laboratório, os participantes exploraram várias estruturas de loop em JavaScript, com foco na compreensão e implementação de diferentes tipos de loops. O laboratório começou com um exame abrangente dos loops while, demonstrando sua sintaxe básica e aplicações práticas por meio de exemplos que contam iterações e buscam condições numéricas específicas. Os participantes aprenderam a inicializar variáveis de loop, definir condições de loop e usar operadores de incremento para controlar a execução do loop.

O laboratório progrediu para cobrir tipos de loop adicionais, incluindo loops do-while, loops for e loops for-in, proporcionando experiência prática com cada estrutura. Ao comparar e contrastar esses mecanismos de loop, os alunos obtiveram insights sobre a seleção de estruturas de loop apropriadas para diferentes cenários de programação, aprimorando suas habilidades de programação em JavaScript e a compreensão dos mecanismos de fluxo de controle.