map JavaScript: Manipule seus Arrays como um Verdadeiro Mestre

JavaScript

map JavaScript: Manipule seus Arrays como um Verdadeiro Mestre

Gabriel Nascimento
Escrito por Gabriel Nascimento em 2 de setembro de 2020

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?

ilustração de um mapa

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.

esquema de iteração com map JavaScript

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']

Conclusão

No final do dia, o loop for e o map geram resultados semelhantes, apesar de algumas pequenas situações caso a caso…

Mas basta uma olhada no map, para ver que nele temos uma escrita mais simples

Além de ser o segundo método especial mais popular, apenas atrás do forEach.

Então sempre que você usar um loop for para modificar os valores de um Array, pense em mudar para um map.

Espero que você tenha gostado do artigo! Se tiver alguma dúvida ou opinião, seu comentário é sempre muito bem vindo:

Hey,

o que você achou deste conteúdo? Conte nos comentários.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

5 Replies to “map JavaScript: Manipule seus Arrays como um Verdadeiro Mestre”

rhuan

adopt me quero pet

Gabriel Nascimento

Não entendi seu comentário, mas “adopt me quero pet” para você também.

Genaro

Parabéns pelo trabalho

Gabriel Nascimento

Obrigado, Genaro. ;D

Gabriel Nascimento