Iteração em arrays com forEach, map, filter e reduce

Parabéns por chegar à última aula do módulo 4! Nesta etapa final, você dominará técnicas avançadas de iteração em arrays com JavaScript, utilizando métodos como forEach, map, filter e reduce.

Prepare-se para aprender como realizar tarefas complexas com maior eficiência e legibilidade, elevando seu nível de proficiência na linguagem.

forEach

O método forEach é uma forma prática de percorrer todos os elementos de um array e executar uma ação em cada um deles.

Ele é como um “inspetor” que visita cada casa de uma rua, verificando e fazendo algo em cada uma delas.

Imagine que temos um array chamado “casas” que contém várias casas em uma rua. Usando o forEach, podemos caminhar pela rua e visitar cada casa individualmente.

Em cada visita, podemos realizar uma ação, como bater na porta, entregar uma correspondência ou verificar se há alguém dentro.

No código, usamos o método forEach com uma função como argumento. Essa função será executada para cada elemento do array.

Dentro dessa função, podemos realizar as ações desejadas, como exibir o número da casa no console ou alterar alguma propriedade específica.

É importante ressaltar que o forEach não retorna um novo array, ele apenas percorre o array existente.

Se quisermos criar um novo array com base nas transformações feitas em cada elemento, devemos usar outros métodos, como o map.

Usando o forEach, podemos evitar o uso de loops “for” tradicionais e tornar nosso código mais legível e conciso.

É uma ferramenta útil para realizar operações em cada item do array sem precisar se preocupar com os detalhes da iteração.

Aqui está um exemplo simples de como usar o forEach:

const casas = ["Casa 1", "Casa 2", "Casa 3", "Casa 4"];
casas.forEach((casa, index) => {
  console.log(`Visitando a ${casa}`);
  console.log(`Índice: ${index}`);

});

Nesse exemplo, temos um array chamado casas com quatro elementos. Usamos o método forEach para percorrer cada elemento do array.

Dentro da função de callback passada para o forEach, recebemos dois parâmetros: casa e index.

A variável casa representa cada elemento do array à medida que é percorrido, e a variável index representa o índice desse elemento.

No corpo da função, estamos exibindo no console uma mensagem para cada casa visitada, juntamente com o seu índice.

Ao executar esse código, veremos a seguinte saída:

Visitando a Casa 1
Índice: 0

Visitando a Casa 2
Índice: 1

Visitando a Casa 3
Índice: 2

Visitando a Casa 4
Índice: 3

Podemos realizar diversas ações dentro da função de callback, como acessar propriedades específicas dos elementos do array, realizar cálculos ou modificar valores.

O forEach nos permite iterar sobre os elementos de forma simplificada, tornando o código mais legível e expressivo.

Portanto, pense no forEach como um inspetor que visita cada elemento do array, permitindo que você execute ações personalizadas em cada visita.

Ele simplifica a iteração em arrays e facilita o processamento dos dados.

Map

O método map é utilizado em arrays no JavaScript para criar um novo array com base em um array existente.

Ele percorre cada elemento do array original e aplica uma função de callback a cada um desses elementos, retornando um novo valor. O novo array resultante terá o mesmo tamanho do array original.

Podemos fazer uma analogia com um processo de produção em uma fábrica. Imagine que temos uma esteira com várias peças de madeira e precisamos transformar cada uma dessas peças em móveis.

O método map seria como um conjunto de ferramentas que usamos para moldar cada peça e transformá-las em móveis personalizados.

A função de callback que passamos para o map seria como as ferramentas que utilizamos nesse processo.

Ela recebe cada elemento do array original, realiza alguma operação ou transformação nele e retorna o resultado.

Vamos ver um exemplo para ilustrar melhor:

const numeros = [1, 2, 3, 4, 5];
const dobrados = numeros.map((numero) => {
  return numero * 2;

});

console.log(dobrados);

Nesse exemplo, temos um array chamado numeros com cinco elementos. Utilizamos o método map para criar um novo array chamado dobrados. A função de callback multiplica cada número por 2, retornando o resultado.

Ao executar esse código, a saída será:

[2, 4, 6, 8, 10]

Podemos ver que cada elemento do array original foi dobrado, resultando em um novo array com os valores dobrados.

O método map é útil quando precisamos transformar um array em outro com base em uma regra ou operação específica.

Ele nos permite trabalhar de forma mais concisa e expressiva, simplificando o código e tornando-o mais legível.

É importante lembrar que o map não altera o array original, mas sim cria um novo array com os resultados das transformações realizadas. Isso garante que não ocorram efeitos colaterais indesejados.

filter

O método filter é utilizado em arrays no JavaScript para criar um novo array contendo apenas os elementos que atendem a uma determinada condição.

Ele percorre cada elemento do array original e verifica se ele satisfaz a condição especificada em uma função de callback. Se a condição for verdadeira, o elemento é adicionado ao novo array resultante.

Podemos fazer uma analogia com uma seleção de frutas em uma feira. Imagine que temos uma cesta cheia de diferentes frutas e precisamos selecionar apenas as frutas maduras.

O método filter seria como um filtro mágico que analisa cada fruta e separa apenas as maduras em uma nova cesta.

A função de callback que passamos para o filter seria como a regra de maturidade que utilizamos nesse processo.

Ela recebe cada elemento do array original, verifica se ele atende à condição de maturidade e retorna um valor booleano (verdadeiro ou falso).

Vamos ver um exemplo para ilustrar melhor:

const frutas = ["maçã", "banana", "laranja", "uva", "abacaxi"];
const frutasMaduras = frutas.filter((fruta) => {
  return fruta === "banana" || fruta === "laranja";

});

console.log(frutasMaduras);

Nesse exemplo, temos um array chamado frutas com cinco elementos.

Utilizamos o método filter para criar um novo array chamado frutasMaduras. A função de callback verifica se cada fruta é igual a “banana” ou “laranja”.

Se a condição for verdadeira, a fruta é adicionada ao novo array.

Ao executar esse código, a saída será:

["banana", "laranja"]

Podemos ver que apenas as frutas “banana” e “laranja” foram selecionadas, já que são as únicas que atendem à condição de maturidade.

O método filter é útil quando precisamos filtrar os elementos de um array com base em uma condição específica.

Ele nos permite obter um subconjunto de elementos que são relevantes para nossa lógica ou necessidade.

É importante destacar que o filter não altera o array original, mas sim cria um novo array contendo os elementos filtrados. Isso preserva a integridade do array original e nos permite trabalhar com os resultados de forma segura.

reduce

O método reduce é utilizado em arrays no JavaScript para realizar uma redução dos elementos a um único valor.

Ele percorre cada elemento do array e, a cada iteração, combina o elemento atual com um acumulador, produzindo um único valor de saída.

O resultado final é esse valor acumulado ao percorrer todos os elementos do array.

Podemos fazer uma analogia com a contagem do número total de páginas de um livro.

Imagine que você tem um livro com várias páginas e deseja saber quantas páginas ele possui.

O método reduce seria como um contador que você utiliza para somar o número de páginas uma a uma.

A cada página que você passa, você vai adicionando o número da página ao contador. No final, você obtém o número total de páginas do livro.

No JavaScript, utilizamos uma função de callback que é executada em cada iteração do reduce.

Essa função recebe dois parâmetros: o acumulador e o elemento atual do array.

Ela combina esses valores de alguma forma e retorna o resultado dessa combinação, que será o novo valor do acumulador.

Vamos ver um exemplo para ilustrar melhor:

const numeros = [1, 2, 3, 4, 5];
const somaTotal = numeros.reduce((acumulador, numero) => {
  return acumulador + numero;

}, 0);

console.log(somaTotal);

Nesse exemplo, temos um array chamado numeros com cinco elementos. Utilizamos o método reduce para obter a soma total desses números.

A função de callback recebe o acumulador (que começa com o valor inicial de 0) e cada número do array. Ela retorna a soma do acumulador com o número atual.

Ao executar esse código, a saída será:

15

Podemos ver que a soma total dos números do array é 15. Isso ocorre porque o reduce percorreu cada elemento do array, somando-o ao acumulador.

O método reduce é útil quando precisamos realizar operações de redução em um array, como obter a soma, a média, o máximo ou o mínimo dos elementos.

Ele nos permite combinar os valores de forma personalizada, de acordo com nossa lógica, e obter um único resultado.

É importante mencionar que o reduce pode receber um valor inicial opcional como último argumento. Esse valor será o valor inicial do acumulador.

Caso não seja fornecido, o primeiro elemento do array será usado como valor inicial.

Lembre-se de que o reduce não altera o array original, mas sim produz um único valor resultante. Isso nos permite trabalhar com o resultado de forma segura e manter a integridade do array original.

Desafio:

1. Crie um script JavaScript que cria um array com os nomes dos produtos de uma loja e seus preços.
2. Utilize o método map para transformar os preços em números.
3. Utilize o método filter para selecionar apenas os produtos com preço acima de R$ 100,00.
4. Utilize o método reduce para calcular o total da compra dos produtos selecionados.

Parabéns por ter finalizado a aula e nela você aprendeu os conceitos de forEach, map, filter e reduce. Então, pratique o que você aprendeu nesse módulo para dominar o esse conceito.

Esse módulo contém um dos conteúdos mais usados no JavaScript, portanto revise as aulas até dominar o conteúdo. Depois de dominado o assunto, então pode ir para o próximo módulo.

Agora é hora de colocar em prática todo o conhecimento adquirido com um exercício do módulo.