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

Artigo original: https://www.freecodecamp.org/news/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).