Aula 13: Destrave o Poder dos Arrays: Domine Filter, Map e Reduce

Hello, world!

E aí, devs! Estamos de volta com mais uma aula. Hoje vamos entrar em uma parte mais avançada de JavaScript e, pra começar, quero relembrar algo que já vimos rapidamente em uma aula bônus: os métodos de array. Dessa vez, vamos explorar melhor o map, o filter e o reduce, que são as famosas Higher-Order Functions.

Essas funções recebem outras funções como argumento (os famosos callbacks) e também podem retornar valores transformados. Elas são ferramentas poderosas para quem quer trabalhar com arrays de forma mais eficiente e escrever códigos mais limpos.

Então bora codar e aprender na prática como essas belezinhas funcionam!

Filter

A função filter é usada para criar um novo array contendo apenas os elementos que atendem a uma condição específica. Vamos comparar o uso do filter com um loop for:

Exemplo com for

Explicação:

• Criamos um array vazio pessoasMaioresDe20Anos.
• Usamos um loop for para iterar pelo array pessoas.
• A cada iteração, verificamos se a idade é maior que 20.
• Se a condição for verdadeira, adicionamos o item ao novo array.

Exemplo com filter

Explicação:

• O método filter realiza a mesma tarefa de forma mais concisa.
• Ele recebe uma função de callback que verifica se cada item atende à condição (idade > 20).
• Retorna um novo array com os itens que passam no teste.

Simplificando com Arrow Functions

Diferença principal:

• A Arrow Function torna o código mais curto e legível.

Map

A função map é usada para transformar elementos de um array, criando um novo array com os resultados.

Exemplo com for

Explicação:

• Iteramos pelo array pessoas.
• Extraímos apenas o atributo nome de cada objeto.
• Adicionamos os nomes ao novo array nomeDasPessoas.

Exemplo com map

Explicação:

• O método map transforma cada item do array original de acordo com o callback fornecido.
• Retorna um novo array com o resultado de cada transformação.

Simplificando com Arrow Functions

Diferença principal:

• Usamos Arrow Functions para tornar o código mais limpo.

Reduce

A função reduce é usada para “reduzir” um array a um único valor, acumulando os resultados.

Exemplo com for

Explicação:

• Iniciamos um acumulador quantidadeDeOrdens com valor 0.
• Usamos um loop for para somar a quantidade de cada objeto do array ordens.
• O acumulador contém o resultado final.

Exemplo com reduce

Explicação:

• O reduce recebe dois argumentos principais: o acumulador (ordemAnterior) e o valor atual (ordemAtual).
• Começa com um valor inicial (neste caso, 0).
• Itera por todos os itens do array, somando as quantidades.

Simplificando com Arrow Functions

Diferença principal:

• A Arrow Function simplifica o código, deixando-o mais compacto.

Resumo

• Filter: Filtra elementos de um array com base em uma condição. Retorna um array menor ou igual ao original.
• Map: Transforma cada elemento do array. Retorna um array do mesmo tamanho.
• Reduce: Acumula os valores do array, retornando um único resultado.

E é isso, devs! Mais uma aula concluída, com muito aprendizado e troca de conhecimento. Estou muito feliz em dar continuidade a esse projeto.

Confiram o link do repositório da nossa aula no GitHub: https://github.com/guilherme-silvam/js-aulas-guilhermemachadodev/tree/main/aula-13-guilhermemachadodev.

Fiquem ligados, porque na próxima semana já voltamos com um conteúdo novo de Javascript.

Bora codar!