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 => `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.