Como usar o método JavaScript .map()

O método JavaScript .map() permite iterar sobre cada elemento de um array e realizar ações específicas, enquanto o array original permanece inalterado.

O que é JavaScript .map()?

O método JavaScript .map() cria um novo array aplicando uma função de callback a cada elemento do array original. Ele transforma cada valor do array original, armazenando o resultado em um array separado. Um aspecto chave é a imutabilidade, o que significa que o array original permanece inalterado.

O método .map() é frequentemente usado para transformar todos os elementos de um array. Por exemplo, ele pode quadrar elementos, formatar textos, filtrar objetos ou realizar uma variedade de outras modificações. Assim, o JavaScript .map() é útil quando se deseja uma alteração não destrutiva dos dados, resultando em um código limpo e compreensível.

Sintaxe do método JavaScript .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 processado 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 JavaScript .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 JavaScript.map()

Com o método JavaScript .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 é verdadeira.

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 divisíveis por 2, ou seja, [2, 4]. Em seguida, utilizamos 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].

Renderizar listas em bibliotecas JavaScript

React é um dos frameworks e bibliotecas JavaScript mais populares. A função .map() é útil para renderizar 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, importamos os módulos React e ReactDOM e criamos um array chamado colors com diferentes nomes de cores. O componente funcional React ColorsList utiliza o método JavaScript .map() para gerar um <li> para cada cor. O atributo key permite a atualização eficiente pelo React. Por fim, o componente ColorsList é renderizado no DOM com ReactDOM.render, e a saída é adicionada 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, combinamos .map() com o método toLowerCase() para converter cada nome para letras minúsculas. O resultado é o novo array formattedNames, que contém os nomes em minúsculas. O array original names permanece inalterado.