Introdução
O map é uma estrutura de repetição no Javascript, que serve para percorrer arrays, seja um array de inteiros, string ou objetos. O map chama uma função de callback para cada item dentro do array, podendo assim realizar qualquer processamento de informação com cada item. Além disso o map retorna um novo array, ou seja, o array original é mantido e é retornado um novo array com os dados processados.
A função de callback do map pode ter 3 argumentos, onde todos são opcionais, porém comumente é utilizado o primeiro.
O primeiro parâmetro, será cada item do array, da seguinte forma, pense em um array com 3 posições, como esse abaixo:
let frutas = ['Laranja', 'Maça', 'Pera'];
Imagine que o nome do nosso primeiro argumento seja valorAtual, quando você utilizar o map, ele irá percorrer o array posição por posição, a hora que ele encontrar o primeiro elemento, o argumento valorAtual terá o valor Laranja, na próxima posição o valorAtual terá Maça e por fim terá Pera.
O segundo parâmetro será o índice atual de cada elemento no array, utilizando o exemplo de cima, Laranja terá o índice 0, Maça – 1 e Pera – 2. Isso porque os arrays em Javascript começam na posição 0.
O terceiro parâmetro é o array atual, que pode ser passado pra dentro da função de callback a fim de realizar algum processamento com esse array.
Diferença entre o Map e o forEach
Ambos são muito parecidos, os dois são estruturas de repetição para o Javascript, porém tem uma diferença que eu julgo como principal.
O map ele percorre um array, processa os dados e cria um novo array com o resultado, de outra forma o forEach ele percorre um array, modifica o array atual e não retorna valor nenhum. Dessa forma, caso você precise manter o valor original do array, utilize o map, que irá te retornar um novo array com os dados processados, caso precise somente manipular o array sem guardar os valores originais, o forEach é a melhor opção.
Se você quiser saber mais sobre o forEach, veja este post
Primeiros exemplos
Vamos utilizar o mesmo array de frutas que criamos anteriormente, é um array de strings e iremos percorrer utilizando o map:
let frutas = ['Laranja', 'Maça', 'Pera'];
let novoArray = frutas.map( (valorAtual, indice, array) => {
console.log(${valorAtual}, ${indice}, ${array});
//irá imprimir o resultado no console:
//Laranja, 0, ['Laranja', 'Maça', 'Pera']
//Maça, 1, ['Laranja', 'Maça', 'Pera']
//Pera, 2, ['Laranja', 'Maça', 'Pera']
return valorAtual;
});
Vejamos agora com um array de inteiros, e no caso, iremos multiplicar cada posição por 3:
let numeros = [1, 3, 5];
let numerosCalculados = numeros.map( (valorAtual, indice, array) => {
return valorAtual * 3;
});
console.log(numeros);
//irá conter [1, 3, 5]
console.log(numerosCalculados);
//irá conter [3, 9, 15]
Exemplo com array de objetos
Com o map também é possível percorrer array de objetos, nesse caso o primeiro argumento, em vez de ter somente uma string ou inteiro, terá um objeto. Isso pode ser útil quando você precisa extrair dados de um array. Por exemplo, vamos supor que você tem um array de pessoas, e você quer criar um novo array com somente o nome e idade de cada pessoa, porém você não quer perder o array original, vamos ver como fazer:
let pessoas = [
{
id: 1,
nome: 'Joaquim',
idade: 25,
pais: 'Brasil',
estado: 'RS',
cpf: '123456789'
},
{
id: 2,
nome: 'Renato',
idade: 30,
pais: 'Brasil',
estado: 'BA',
cpf: '987654321'
},
];
let pessoasSimplificado = pessoas.map( (valorAtual, indice, array) => {
let pessoa = {};
pessoa.nome = valorAtual.nome;
pessoa.idade = valorAtual.idade;
return pessoa;
});
console.log(pessoasSimplificado);
//irá conter [
{
nome: 'Joaquim',
idade: 25,
},
{
nome: 'Renato',
idade: 30,
},
]
console.log(pessoas);
// irá conter
[
{
id: 1,
nome: 'Joaquim',
idade: 25,
pais: 'Brasil',
estado: 'RS',
cpf: '123456789'
},
{
id: 2,
nome: 'Renato',
idade: 30,
pais: 'Brasil',
estado: 'BA',
cpf: '987654321'
},
]
Dessa forma conseguimos ter um novo array com os dados simplificados, que podem ser exibidos em uma tabela, as vezes em algum lugar da tela que deseja ter informações rápidas sobre uma pessoa, poderia também ter passado o id para o objeto simplificado e com isso criar links para acesso do cadastro da pessoa e entre outras possibilidades.
Para saber mais
Gravei um vídeo completo sobre o map no Javascript e explicando a diferença entre o map e o forEach
Conclusão
O map é uma estrutura de repetição que eu creio ser uma das mais utilizadas, por ser muito versátil e fácil de implementr, eu particularmente utilizo demais no dia a dia, porém é importante saber quais são seus usos para encaixar da melhor maneira dentro da lógica da resolução do seu problema.
Referências
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/map
https://www.devmedia.com.br/javascript-map-mapeando-elementos-de-um-array/40648
