Ja­vaS­cript .map(): tudo sobre o método

O método .map() do Ja­vaS­cript permite iterar através de cada elemento num array e executar ações es­pe­cí­fi­cas, mantendo o array original intacto.

O que é Ja­vaS­cript .map()?

O método .map() do Ja­vaS­cript cria um novo array aplicando uma função de retorno de chamada a cada elemento do array original. Este método trans­forma cada valor do array original, guardando o resultado num array in­de­pen­dente. Um aspeto fun­da­men­tal é a imu­ta­bi­li­dade, o que significa que o array original não é alterado de forma alguma durante o processo.

O método .map() é nor­mal­mente utilizado para trans­for­mar todos os elementos de uma matriz. Por exemplo, pode elevar ao quadrado os elementos, formatar textos, filtrar objetos e realizar muitas outras adap­ta­ções. Por isso, é útil quando se pretende realizar uma mo­di­fi­ca­ção não des­tru­tiva dos dados. O método também contribui para um código claro e fácil de com­pre­en­der.

A sintaxe do Ja­vaS­cript .map()

A sintaxe do método .map() é composta por uma chamada de função (callback function) em uma matriz:

const newArr = originalArr.map(function(element, index, array) {
    // Code
});

• originalArr é a matriz na qual o método .map() será aplicado;
• element é o elemento atual que é pro­ces­sado durante a iteração;
• index (optional) é o índice do elemento atual na matriz e
• array (optional) é a matriz original.

Veja o seguinte exemplo:

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(function(number) {
    return number * number;
});
console.log(squaredNumbers); // Output: [1, 4, 9, 16, 25]

A função de retorno de chamada passada como argumento para Ja­vaS­cript .map() pega cada elemento da matriz original number e eleva-o ao quadrado. Em seguida, obtém-se uma nova matriz, que consiste nos quadrados dos elementos da matriz original.

Exemplos de .map()

Com o método .map()Ja­vaS­cript, é possível realizar muitas operações nos elementos de uma matriz. A seguir, des­cre­ve­mos os cenários mais comuns:

Filtrar dados

Ao combinar .map() com o método .filter(), cria-se uma matriz que contém apenas os valores para os quais a condição dada é ver­da­deira.

const numbers = [1, 2, 3, 4, 5];
const evenNumbersTimesTwo = numbers.filter(num => num % 2 === 0).map(num => num * 2);
// Output: [4, 8]

Neste exemplo, é criado um array numbers que contém valores de 1 a 5. Em seguida, é aplicado o método .filter(). O critério de filtragem determina que o número módulo 2 deve ser igual a 0, o que é ver­da­deiro para os números pares. O resultado é uma nova matriz que contém apenas os elementos di­vi­sí­veis por 2. O resultado in­ter­mé­dio é, portanto, [2, 4]. Em seguida, usamos o método .map() na matriz para duplicar cada elemento. O resultado final é uma matriz cujos elementos podem ser divididos duas vezes por 2, ou seja, [4, 8].

Ren­de­ri­zar listas em bi­bli­o­te­cas Ja­vaS­cript

React é uma das bi­bli­o­te­cas e fra­meworks Ja­vaS­cript mais populares. A função .map() é útil para re­pre­sen­tar listas no React, mas lembre-se de que o React usa a sintaxe JSX.

import React from "react";
import ReactDOM from "react-dom";
const colors = ["red", "green", "blue", "yellow", "orange"];
const ColorsList = () => (
    <div>
        <ul>{colors.map(color => <li key={color}> {color} </li>)}</ul>
    </div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<ColorsList />, rootElement);

No exemplo anterior, os módulos React e ReactDOM são im­por­ta­dos e é definido um array chamado colors, que contém di­fe­ren­tes nomes de cores. A função do com­po­nente funcional do React, ColorsList, usa o método Ja­vaS­cript map() para gerar um elemento <li> para cada cor. O atributo key permite que o React faça atu­a­li­za­ções efi­ci­en­tes no DOM sem precisar ren­de­ri­zar toda a lista novamente. Por último, o com­po­nente ColorsList é ren­de­ri­zado no DOM com ReactDOM.render e o resultado é adi­ci­o­nado ao elemento do DOM com o ID root.

Formatar elementos numa matriz

O método .map() é uma forma simples de formatar elementos como cadeias de texto de acordo com ne­ces­si­da­des es­pe­cí­fi­cas.

const names = ["Alice", "Bob", "Charlie"];
const formattedNames = names.map(name => name.toLowerCase());
// Output: ["alice", "bob", "charlie"]

Neste caso, combina-se .map() com o método toLowerCase() para converter cada nome em mi­nús­cu­las. O resultado é o novo array formattedNames, que contém os nomes em mi­nús­cu­las. No array original names não ocorre nenhuma alteração.