Como usar o .map() para realizar iterações em itens de matrizes em JavaScript

Introdução

Desde o método forloop clássico, até o forEach(), diversas técnicas e métodos são usados para realizar iterações em conjuntos de dados em JavaScript. Um dos métodos mais populares é o método .map(). O .map() cria uma matriz depois de chamar uma função específica em cada item na matriz mãe. O .map() é um método de não mutação que, ao contrário dos métodos de mutação, cria uma nova matriz ao invés de alterar a original.

Esse método pode ser usado de diversas maneiras ao se trabalhar com matrizes. Neste tutorial, vamos analisar quatro usos dignos de atenção do .map() em JavaScript: chamar uma função de elementos de matriz, converter strings em matrizes, renderizar listas em bibliotecas do JavaScript e reformatar objetos de matriz.

Pré-requisitos

Este tutorial não exige nenhuma programação, mas se estiver interessado em acompanhar os exemplos, use o Node.js REPL ou ferramentas de desenvolvedor de um navegador.

• Para instalar o Node.js localmente, siga os passos em Como instalar o Node.js e criar um ambiente de desenvolvimento local.

• As Chrome DevTools estão disponíveis ao baixar e instalar a versão mais recente do Google Chrome.

Passo 1 — Chamando uma função em cada item em uma matriz

O .map() aceita uma função de retorno de chamada como um de seus argumentos, e um parâmetro importante dessa função é o valor atual do item que está sendo processado pela função. Esse parâmetro é necessário. Com esse parâmetro, é possível modificar cada item em uma matriz e criar uma nova função.

Vejamos um exemplo:

const sweetArray = [2, 3, 4, 5, 35]
const sweeterArray = sweetArray.map(sweetItem => {
    return sweetItem * 2
})

console.log(sweeterArray)

Este é o resultado que é registrado no console:

Output
[ 4, 6, 8, 10, 70 ]

Ele pode ser simplificado para torná-lo mais organizado:

// create a function to use
const makeSweeter = sweetItem => sweetItem * 2;

// we have an array
const sweetArray = [2, 3, 4, 5, 35];

// call the function we made. more readable
const sweeterArray = sweetArray.map(makeSweeter);

console.log(sweeterArray);

O mesmo resultado é registrado no console:

Output
[ 4, 6, 8, 10, 70 ]

Possuir código como sweetArray.map(makeSweeter) torna seu código um pouco mais legível.

Passo 2 — Convertendo uma string em uma matriz

O .map() é conhecido por pertencer ao protótipo da matriz. Neste passo, você irá usá-lo para converter uma string em uma matriz. Você não está desenvolvendo o método para trabalhar com strings aqui. Em vez disso, você irá usar o método especial .call().

Tudo no JavaScript é um objeto, e os métodos são funções ligadas a esses objetos. O .call() permite que você use o contexto de um objeto em outro. Portanto, o contexto do .map() em uma matriz estaria sendo copiado para uma string.

O .call() pode representar argumentos passados do contexto a ser usado e parâmetros para os argumentos da função original.

Vejamos um exemplo:

const name = "Sammy"
const map = Array.prototype.map

const newName = map.call(name, eachLetter => {
    return `${eachLetter}a`
})

console.log(newName)

Este é o resultado que é registrado no console:

Output
[ "Sa", "aa", "ma", "ma", "ya" ]

Aqui, você usou o contexto do .map() em uma string e passou um argumento da função que o .map() espera.

Isso funciona de maneira semelhante ao método .split() de uma string, com a diferença que cada caractere da string pode ser modificado antes de ser retornado a uma matriz.

Passo 3 — Renderizando listas em bibliotecas do JavaScript

Bibliotecas do JavaScript como o React utilizam o .map() para renderizar itens em uma lista. No entanto, isso exige a sintaxe JSX, uma vez que o método .map() consiste de sintaxe JSX.

Aqui está um exemplo de um componente do React:

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

const names = ["whale", "squid", "turtle", "coral", "starfish"];

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

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

Esse é um componente sem estado no React, que renderiza um div com uma lista. Os itens individuais da lista são renderizados usando o .map() para iterar na matriz de nomes inicialmente criada. Esse componente é renderizado usando o ReactDOM no elemento DOM com Id de root.

Passo 4 — Reformatando objetos de matriz

O .map() pode ser usado para iterar em objetos de uma matriz e, de maneira semelhante às matrizes tradicionais, modificar individualmente o conteúdo de cada objeto e retornar uma nova matriz. Essa modificação é feita com base no que é retornado na função de retorno de chamada.

Vejamos um exemplo:

const myUsers = [
    { name: 'shark', likes: 'ocean' },
    { name: 'turtle', likes: 'pond' },
    { name: 'otter', likes: 'fish biscuits' }
]

const usersByLikes = myUsers.map(item => {
    const container = {};

    container[item.name] = item.likes;
    container.age = item.name.length * 10;

    return container;
})

console.log(usersByLikes);

Este é o resultado que é registrado no console:

Output
[
    {shark: "ocean", age: 50},
    {turtle: "pond", age: 60},
    {otter: "fish biscuits", age: 50}
]

Aqui, você modificou cada objeto na matriz usando a notação de chaves e pontos. Esse caso de uso pode ser empregado para processar ou condensar dados recebidos antes de serem salvos ou analisados por um aplicativo frontend.

Conclusão

Nesse tutorial, analisamos quatro usos do método .map() em JavaScript. Em combinação com outros métodos, a funcionalidade do .map() pode ser estendida. Para mais informações, consulte nosso artigo Como usar métodos de matriz em JavaScript: métodos de iteração.