map JavaScript: Manipule seus Arrays como um Verdadeiro Mestre

Como programador, você precisa criar e manipular Arrays quase todos os dias. Porém usar apenas o tradicional loop for deixa o seu código complicado e suscetível a erros.

Por isso o JavaScript fornece métodos especiais para ajudar você a extrair o máximo proveito de seus Arrays.

Como por exemplo, o método map que manipula todos os elementos do Array, mas mantém o seu código:

Mais limpo;
Mais legível;
E de fácil manutenção;

Então continue lendo esse artigo para você descobrir como usar a força dos laços de repetição como um verdadeiro mestre Jedi.

O que é e como funciona o método map JavaScript?

O map é um método muito útil quando precisamos acessar todos os elementos de um Array (um por um) e realizar modificações.

Por exemplo, imagine que queremos multiplicar por 2 todos os itens de uma lista de números. Ao utilizar o clássico loop for, temos algo assim:

let numeros = [ 1, 2, 3 ];
let dobro = [];

for(var i = 0; i < numeros.length; i++) {
  dobro.push(numeros[i] * 2);
}

console.log(numeros); // Resultado 1: [ 1, 2, 3 ]
console.log(dobro); // Resultado 2: [ 2, 4, 6 ]

Dessa forma criamos um novo Array chamado dobro e usamos o seu método push() para inserir o dobro de cada um dos valores da lista.

Funciona? Sim, mas podemos melhorar o código e ter o mesmo efeito…

Para isso, invocamos a função map() do próprio Array, e passamos uma função de retorno:

let numeros = [ 1, 2, 3 ];

let dobro = numeros.map(function(numero) {
  return numero * 2;
});

console.log(numeros); // Resultado 1: [ 1, 2, 3 ]
console.log(dobro); // Resultado 2: [ 2, 4, 6 ]

Dentro do map(), passamos uma função anônima function(numero){...}, também chamada de função callback.

Essa função será executada para cada elemento dentro da lista. E a cada iteração, o valor do elemento é atribuído à variável passada como parâmetro no callback, no caso a variável numero.

Em seguida, você constrói um novo Array com base no retorno de cada uma das chamadas.

Note que o método map() não modifica o Array original (para manter sua integridade). Então ele retorna um novo Array com os itens resultantes do mapeamento.

Porém a função callback não precisa ser anônima. Você pode criar a função e depois passá-la como parâmetro ao map():

let numeros = [ 1, 2, 3 ];

function dobraNumero(numero) {
  return numero * 2;
}

let dobro = numeros.map(dobraNumero);

console.log(numeros); // Resultado 1: [ 1, 2, 3 ]
console.log(dobro); // Resultado 2: [ 2, 4, 6 ]

Nos 2 casos, o resultado é exatamente o mesmo…

Alterar cada elemento do Array não poderia ser mais fácil!

O método map() existe em todos os Arrays, afinal todos eles herdam os vários métodos do Array.prototype.

Parâmetros opcionais do método map JavaScript

Vimos a função map() apenas em sua forma mais básica… Aliás, sua sintaxe completa possui vários argumentos opcionais que podem ser muito úteis para você:

const returnValue = array.map((value, index, arr) => {...}, thisArg);

Já conhecemos a função de callback, mas ela na realidade pode receber até 3 parâmetros:

value (obrigatório): O valor do item atual;
index (opcional): O número de índice do item atual;
arr (opcional): O próprio Array sendo percorrido.

E o segundo argumento thisArg permite que o contexto this seja alterado, mas é raramento usado.

Por fim, o returnValue recebe o novo Array com os valores alterados do Array inicial.

Agora veja um exemplo de uso do map JavaScript com seus parâmetros opcionais:

let nomes = ['joão', 'josé', 'maria'];

let nomesAlterados = nomes.map(function(value, index, arr) {
  return `${index + 1} - ${value} ${arr[index]}`;
});

console.log(nomesAlterados);

// Resultado: ['1 - joão joão', '2 - josé josé', '3 - maria maria']