Como usar .map() em JavaScript

O JavaScript oferece vários métodos para iterar sobre arrays. Os desenvolvedores costumam usar o loop for tradicional e o método menos comum .forEach(). No entanto, o método mais popular é o .map(). Esse método cria um novo array chamando uma função para cada elemento do array original. Ele evita mutações e gera arrays realmente “limpos”.

Isso é diferente dos métodos baseados em mutação, que inevitavelmente alteram o array original de alguma forma. Neste artigo, exploraremos quatro maneiras de usar o .map() em JavaScript (embora existam muitas outras).

Método 1: Chamando funções em elementos individuais do array

Ao usar o .map() em JavaScript, a função de callback é tratada como um argumento. O valor do elemento do array no momento da execução se torna um parâmetro obrigatório dessa função. Você pode usá-lo para modificar valores ou criar funções.

Exemplo:

const sweetArray = [6, 7, 11, 13, 20];
const sweeterArray = sweetArray.map(sweetItem => {
    return sweetItem * 2;
});
console.log(sweeterArray);

Saída:

[12, 14, 22, 26, 40]

Você pode simplificar e deixar o código mais limpo:

const makeSweeter = sweetItem => sweetItem * 2;
const sweetArray = [6, 7, 11, 13, 20];
const sweeterArray = sweetArray.map(makeSweeter);
console.log(sweeterArray);

Saída:

[12, 14, 22, 26, 40]

Usar sweetArray.map(makeSweeter) torna o código mais legível em comparação com a primeira versão.

Método 2: Convertendo strings em arrays

Você pode usar o método .map() do protótipo Array para converter strings. Em vez de trabalhar diretamente com arrays, usamos .call() para aplicar .map() a uma string. Lembre-se de que, em JavaScript, as strings podem ser tratadas como arrays de caracteres, o que permite o uso de alguns métodos de array.

Exemplo:

const name = "Hostman";
const map = Array.prototype.map;
const newName = map.call(name, eachLetter => {
    return `${eachLetter}e`;
});
console.log(newName);

Saída:

["He", "oe", "se", "te", "me", "ae", "ne"]

Neste exemplo, o .map() é usado para transformar cada caractere da string adicionando um “e”. Isso funciona de forma semelhante ao .split() e a outros métodos que operam sobre caracteres de strings antes de transformá-los novamente em um array.

Método 3: Renderizando listas em bibliotecas JavaScript

Esse caso de uso é comum em frameworks JavaScript como React. Aqui, é necessário usar a sintaxe JSX, já que o .map() é utilizado dentro dela. Por exemplo:

import React from "react";
import ReactDOM from "react-dom";

const names = ["cloud", "dbaas", "vps", "storage", "kubernetes"];

const NamesList = () => (
  <div>
    <ul>{names.map(name => <li key={name}>{name}</li>)}</ul>
  </div>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<NamesList />, rootElement);

Neste exemplo, o componente React renderiza uma <div> contendo uma lista. O método .map() do JavaScript é usado para iterar sobre o array de nomes e gerar itens de lista individuais. A renderização é feita pelo ReactDOM.render em um elemento DOM com o ID root.

Método 4: Transformando formatos de objetos em arrays

Outro caso de uso do .map() em JavaScript é transformar cada objeto em um array e retornar um novo array com objetos modificados. Isso funciona de forma semelhante ao processamento de dados tradicional.

Exemplo:

const myUsers = [
    { name: 'cloud', likes: 'scalability' },
    { name: 'devops', likes: 'automation' },
    { name: 'kube', likes: 'orchestration' }
];
const usersByLikes = myUsers.map(item => {
    const container = {};
    container[item.name] = item.likes;
    container.popularity = item.name.length * 12;
    return container;
});
console.log(usersByLikes);

Saída:

[
  { cloud: 'scalability', popularity: 60 },
  { devops: 'automation', popularity: 72 },
  { kube: 'orchestration', popularity: 48 }
]

Neste exemplo, cada objeto do array é modificado usando notação de colchetes e atribuições de propriedades de objeto. Essa abordagem é útil para transformar e condensar dados antes de usá-los em aplicações do lado do cliente.

Conclusão

Revisamos quatro maneiras principais de usar o método .map() em JavaScript. Você pode expandir suas capacidades combinando-o com outros métodos. Para obter mais informações detalhadas, consulte a documentação oficial.