10 Exemplos Práticos da Função map() em JavaScript que Todo Desenvolvedor Deve Conhecer

A função map() é um dos métodos mais utilizados do JavaScript moderno para transformar arrays de forma simples, legível e sem alterar o array original. Ela percorre cada elemento de um array e retorna um novo array com os valores modificados de acordo com a função informada.

Muitos desenvolvedores ainda utilizam for ou forEach() para criar novos arrays, deixando o código mais extenso e menos declarativo.

Com map(), é possível realizar transformações de maneira elegante, reduzindo linhas de código e melhorando a legibilidade.

Sintaxe

A sintaxe da função é bastante simples:

const novoArray = array.map((item, indice) => {
    return novoValor;
});

Agora veja 10 exemplos práticos de utilização.

1. Dobrar todos os números de um array

const numeros = [1, 2, 3, 4, 5];
 
const dobro = numeros.map(numero => numero * 2);
 
console.log(dobro);
// [2, 4, 6, 8, 10]

2. Converter nomes para letras maiúsculas

const nomes = ["joão", "maria", "pedro"];
 
const maiusculos = nomes.map(nome => nome.toUpperCase());
 
console.log(maiusculos);
// ["JOÃO", "MARIA", "PEDRO"]

3. Adicionar uma propriedade em objetos

const produtos = [
    { nome: "Notebook", preco: 3500 },
    { nome: "Mouse", preco: 120 }
];
 
const lista = produtos.map(produto => ({
    ...produto,
    disponivel: true
}));
 
console.log(lista);

4. Extrair apenas uma propriedade de objetos

const usuarios = [
    { id: 1, nome: "Carlos" },
    { id: 2, nome: "Ana" },
    { id: 3, nome: "Paulo" }
];
 
const nomes = usuarios.map(usuario => usuario.nome);
 
console.log(nomes);
// ["Carlos", "Ana", "Paulo"]

5. Formatar preços em Real

const precos = [10.5, 35, 199.99];
 
const formatados = precos.map(valor =>
    valor.toLocaleString("pt-BR", {
        style: "currency",
        currency: "BRL"
    })
);
 
console.log(formatados);

6. Criar elementos HTML

const linguagens = ["JavaScript", "PHP", "Python"];
 
const lista = linguagens.map(item => `<li>${item}</li>`);
 
console.log(lista.join(""));

7. Calcular idade a partir do ano de nascimento

const anos = [1990, 1998, 2005];
 
const anoAtual = new Date().getFullYear();
 
const idades = anos.map(ano => anoAtual - ano);
 
console.log(idades);

8. Numerar uma lista utilizando o índice

const tarefas = [
    "Estudar JavaScript",
    "Praticar exercícios",
    "Criar projeto"
];
 
const lista = tarefas.map((tarefa, indice) =>
    `${indice + 1}. ${tarefa}`
);
 
console.log(lista);

9. Converter strings em números

const valores = ["10", "20", "30"];
 
const numeros = valores.map(Number);
 
console.log(numeros);
// [10, 20, 30]

10. Gerar URLs automaticamente

const imagens = [
    "foto1.jpg",
    "foto2.jpg",
    "foto3.jpg"
];
 
const urls = imagens.map(
    arquivo => `https://meusite.com/imagens/${arquivo}`
);
 
console.log(urls);

Quando utilizar map()?

Utilize map() sempre que precisar:

• Transformar os elementos de um array;
• Criar um novo array sem modificar o original;
• Gerar listas HTML;
• Formatar dados para exibição;
• Converter tipos de dados;
• Adicionar ou remover propriedades de objetos.

Se a intenção for apenas percorrer o array sem criar um novo, considere utilizar forEach(). Já quando for necessário filtrar elementos, utilize filter().

Conclusão

A função map() é uma das ferramentas mais importantes da programação funcional em JavaScript. Ela torna o código mais limpo, reduz a necessidade de loops tradicionais e facilita a manipulação de listas, objetos e dados vindos de APIs.

Dominar o map() é essencial para qualquer desenvolvedor JavaScript, principalmente em aplicações React, Vue, Angular ou Node.js, onde a transformação de dados acontece constantemente.