Map em JavaScript – Como usar a função .map() do JS (método de arrays)

Artigo original: JavaScript Map – How to Use the JS .map() Function (Array Method)

Às vezes, você precisa utilizar algum procedimento específico nos elementos de um array para obter um novo array com os elementos modificados.

Em vez de iterar manualmente sobre o array usando um laço, você pode simplesmente usar o método Array.map() integrado.

O método Array.map() permite a você iterar sobre o array e modificar seus elementos usando uma função de callback. A função de callback será executada em cada um dos elementos do array.

Por exemplo, vamos supor que você tenha o array a seguir:

let arr = [3, 4, 5, 6];

Agora, imagine que você deseja multiplicar cada um dos elementos do array por 3. Você poderia usar um laço for, da seguinte maneira:

let arr = [3, 4, 5, 6];

for (let i = 0; i < arr.length; i++){
  arr[i] = arr[i] * 3;
}

console.log(arr); // [9, 12, 15, 18]

No entanto, você pode usar o método Array.map() para obter o mesmo resultado. Vemos aqui um exemplo:

let arr = [3, 4, 5, 6];

let modifiedArr = arr.map(function(element){
    return element *3;
});

console.log(modifiedArr); // [9, 12, 15, 18]

O método Array.map() normalmente é usado para aplicar algumas alterações aos elementos, seja multiplicando-os por um número específico, como no código acima, seja fazendo outras operações que você necessite utilizar em sua aplicação.

Como usar o método map() em um array de objetos

Por exemplo, você poderia ter um array de objetos que armazena os valores de firstName e lastName (nome e sobrenome) de seus amigos, conforme vemos abaixo:

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

Você pode usar o método map() para iterar sobre o array e unir os valores de  firstName e lastName da seguinte maneira:

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

let userFullnames = users.map(function(element){
    return `${element.firstName} ${element.lastName}`;
})

console.log(userFullnames);
// ["Susan Steward", "Daniel Longbottom", "Jacob Black"]

O método map() passa mais do que apenas um elemento. Vejamos todos os argumentos passados pelo método map() para a função de callback.

A sintaxe completa do método map()

A sintaxe do método map() é a seguinte:

arr.map(function(elemento, índice, array){  }, this);

function() é a função de callback chamada para cada elemento do array. O método map() sempre passa o elemento atual, o índice do elemento atual e todo o objeto do array para ela.

O argumento this será usado dentro da função de callback. Por padrão, esse valor é undefined. Por exemplo, Aqui está a forma de mudar o valor de this para o número 80:

let arr = [2, 3, 5, 7]

arr.map(function(elemento, índice, array){
	console.log(this) // 80
}, 80);

Você também pode testar outros argumentos usando console.log() se estiver interessado:

let arr = [2, 3, 5, 7]

arr.map(function(elemento, índice, array){
    console.log(elemento);
    console.log(índice);
    console.log(array);
    return elemento;
}, 80);

Isso é tudo o que você precisa saber sobre o método Array.map(). Com frequência, você usará apenas o argumento elemento na função de callback, e ignorará o resto. É isso o que eu faço geralmente nos meus projetos diários :)

Obrigado por ler este tutorial

Você pode se interessar por outros tutoriais de JavaScript que o autor escreveu, incluindo como somar um array de objetos e métodos para encontrar uma string que seja um palíndromo (ambos em inglês). Estes são alguns dos problemas a resolver em JavaScript sobre os quais as pessoas perguntam com frequência.

O autor também tem uma newsletter gratuita sobre tutoriais de desenvolvimento para a web (em geral, relacionados a JavaScript).