Utilizando Array.map para Transformar Dados em #JavaScript

 

Este documento explora o uso do método Array.map em JavaScript para transformar elementos de um array, criando um novo #array com os resultados da transformação. Demonstraremos como converter uma lista de nomes para letras maiúsculas utilizando map, e compararemos com uma abordagem utilizando forEach para ilustrar as diferenças e vantagens do map.

 

Utilizando o `Array.map`

 

O método Array.map é uma função de alta ordem que itera sobre cada elemento de um array, aplica uma função de transformação a cada elemento e retorna um novo array contendo os resultados dessas transformações. O array original não é modificado.

 

No exemplo abaixo, temos um array de nomes e queremos criar um novo array onde todos os nomes estejam em letras maiúsculas.

 

const nomes = ["Gilberto", "Maria", "João", "Ana", "Pedro"];

const nomesMaiusculos = nomes.map((nome) => nome.toUpperCase());

console.log(nomesMaiusculos);
// saída esperada
// [ 'GILBERTO', 'MARIA', 'JOÃO', 'ANA', 'PEDRO' ]

 

Neste código:

 

  • nomes é o array original contendo os nomes.

  • nomes.map((nome) => nome.toUpperCase()) aplica a função nome.toUpperCase() a cada nome no array nomes.

  • A função (nome) => nome.toUpperCase() é uma função anônima (arrow function) que recebe um nome como argumento e retorna o mesmo nome em letras maiúsculas.

  • nomesMaiusculos é o novo array criado pelo map, contendo os nomes transformados.

 

O resultado é um novo array nomesMaiusculos que contém todos os nomes do array original, mas em letras maiúsculas.

 

Passo a Passo com `forEach`

 

Para entender melhor como o map funciona e compará-lo com outras abordagens, podemos implementar a mesma transformação utilizando o método forEach. O#forEach itera sobre cada elemento de um array, mas não retorna um novo array automaticamente. Em vez disso, precisamos criar um novo array e adicionar os resultados da transformação manualmente.

 

const nomesMaiusculos2 = [];
nomes.forEach((nome) => nomesMaiusculos2.push(nome.toUpperCase()));
console.log(nomesMaiusculos2);
// saída esperada
// [ 'GILBERTO', 'MARIA', 'JOÃO', 'ANA', 'PEDRO' ]

 

Neste código:

 

  • nomesMaiusculos2 é um array vazio que criamos para armazenar os nomes em letras maiúsculas.

  • nomes.forEach((nome) => nomesMaiusculos2.push(nome.toUpperCase())) itera sobre cada nome no array nomes.

  • Para cada nome, a função nome.toUpperCase() é chamada para converter o nome para letras maiúsculas.

  • O resultado é adicionado ao array nomesMaiusculos2 utilizando o método push.

 

O resultado é o mesmo que o obtido com o map, mas a abordagem é mais verbosa e requer a criação manual de um novo array.

 

Comparação entre `map` e `forEach`

 

Embora ambos os métodos map e forEach possam ser usados para iterar sobre um array, eles têm propósitos diferentes:

 

  • map: É usado para transformar cada elemento de um array e retornar um novo array com os resultados. É ideal quando você precisa criar um novo array com os mesmos elementos, mas transformados de alguma forma.

  • forEach: É usado para executar uma função para cada elemento de um array. É ideal quando você precisa realizar uma ação para cada elemento, mas não precisa criar um novo array.

 

Em termos de legibilidade e concisão, o map geralmente é preferível quando você precisa transformar os elementos de um array, pois ele realiza a transformação e retorna o novo array em uma única linha de código. O forEach, por outro lado, requer mais código para realizar a mesma tarefa.

 

Conclusão

 

O método Array.map é uma ferramenta poderosa para transformar dados em JavaScript. Ele permite criar um novo array com os resultados da transformação de cada elemento do array original de forma concisa e legível. Ao entender como o map funciona e compará-lo com outras abordagens, como o forEach, você pode escolher a melhor ferramenta para cada situação e escrever código mais eficiente e expressivo.