Como usar o método Ja­vaS­cript .map()

O método Ja­vaS­cript .map() permite iterar sobre cada elemento de um array e realizar ações es­pe­cí­fi­cas, enquanto o array original permanece inal­te­rado.

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

O método Ja­vaS­cript .map() cria um novo array aplicando uma função de callback a cada elemento do array original. Ele trans­forma cada valor do array original, ar­ma­ze­nando o resultado em um array separado. Um aspecto chave é a imu­ta­bi­li­dade, o que significa que o array original permanece inal­te­rado.

O método .map() é fre­quen­te­mente usado para trans­for­mar todos os elementos de um array. Por exemplo, ele pode quadrar elementos, formatar textos, filtrar objetos ou realizar uma variedade de outras mo­di­fi­ca­ções. Assim, o Ja­vaS­cript .map() é útil quando se deseja uma alteração não des­tru­tiva dos dados, re­sul­tando em um código limpo e com­pre­en­sí­vel.

Sintaxe do método Ja­vaS­cript .map()

A sintaxe do método .map() consiste em uma chamada de função (Callback-Function) em um Array:

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

• originalArr: O array ao qual o método .map() é aplicado
• element: O elemento atual que está sendo pro­ces­sado durante a iteração
• index (opcional): O índice do elemento atual no array
• array (opcional): O array original

Vamos ver um exemplo concreto:

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 callback, que é passada como argumento para o método Ja­vaS­cript .map(), pega cada elemento do array original number e o eleva ao quadrado. Assim, obtemos um novo array composto pelos quadrados dos elementos do array original.

Exemplos de aplicação do método Ja­vaS­cript.map()

Com o método Ja­vaS­cript .map(), é possível realizar uma ampla variedade de operações nos elementos de um array. Aqui estão alguns dos cenários mais comuns:

Filtrar dados

Ao combinar .map() com o método .filter(), você poderá criar um array 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]

No exemplo acima, o array numbers contém os valores de 1 a 5. Em seguida, aplicamos o método .filter(). O critério de filtro determina que o número deve ser divisível por 2, o que se aplica aos números pares. O resultado é um novo array contendo apenas os elementos di­vi­sí­veis por 2, ou seja, [2, 4]. Em seguida, uti­li­za­mos o método .map() no array para dobrar cada elemento. O resultado final é um array cujos elementos são o dobro dos valores filtrados, ou seja, [4, 8].

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

React é um dos fra­meworks e bi­bli­o­te­cas Ja­vaS­cript mais populares. A função .map() é útil para ren­de­ri­zar listas em React. Note 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);

Como pode ser observado, im­por­ta­mos os módulos React e ReactDOM e criamos um array chamado colors com di­fe­ren­tes nomes de cores. O com­po­nente funcional React ColorsList utiliza o método Ja­vaS­cript .map() para gerar um <li> para cada cor. O atributo key permite a atu­a­li­za­ção eficiente pelo React. Por fim, o com­po­nente ColorsList é ren­de­ri­zado no DOM com ReactDOM.render, e a saída é adi­ci­o­nada ao elemento DOM com o ID root.

Formatar elementos no array

O método .map em JS é uma maneira simples de formatar elementos, como strings, conforme desejado.

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

No exemplo acima, com­bi­na­mos .map() com o método toLowerCase() para converter cada nome para letras mi­nús­cu­las. O resultado é o novo array formattedNames, que contém os nomes em mi­nús­cu­las. O array original names permanece inal­te­rado.