Como usar .map() em JavaScript

Redator técnico

Programação JavaScript

20.10.2025

Reading time: 4 min

O JavaScript oferece vários métodos para iterar sobre arrays. Os desenvolvedores costumam usar o loop for tradicional e o método menos comum .forEach(). No entanto, o método mais popular é o .map(). Esse método cria um novo array chamando uma função para cada elemento do array original. Ele evita mutações e gera arrays realmente “limpos”.

Isso é diferente dos métodos baseados em mutação, que inevitavelmente alteram o array original de alguma forma. Neste artigo, exploraremos quatro maneiras de usar o .map() em JavaScript (embora existam muitas outras).

Método 1: Chamando funções em elementos individuais do array

Ao usar o .map() em JavaScript, a função de callback é tratada como um argumento. O valor do elemento do array no momento da execução se torna um parâmetro obrigatório dessa função. Você pode usá-lo para modificar valores ou criar funções.

Exemplo:

const sweetArray = [6, 7, 11, 13, 20];
const sweeterArray = sweetArray.map(sweetItem => {
    return sweetItem * 2;
});
console.log(sweeterArray);

Saída:

[12, 14, 22, 26, 40]

Você pode simplificar e deixar o código mais limpo:

const makeSweeter = sweetItem => sweetItem * 2;
const sweetArray = [6, 7, 11, 13, 20];
const sweeterArray = sweetArray.map(makeSweeter);
console.log(sweeterArray);

Saída:

[12, 14, 22, 26, 40]

Usar sweetArray.map(makeSweeter) torna o código mais legível em comparação com a primeira versão.

Método 2: Convertendo strings em arrays

Você pode usar o método .map() do protótipo Array para converter strings. Em vez de trabalhar diretamente com arrays, usamos .call() para aplicar .map() a uma string. Lembre-se de que, em JavaScript, as strings podem ser tratadas como arrays de caracteres, o que permite o uso de alguns métodos de array.

Exemplo:

const name = "Hostman";
const map = Array.prototype.map;
const newName = map.call(name, eachLetter => {
    return `${eachLetter}e`;
});
console.log(newName);

Saída:

["He", "oe", "se", "te", "me", "ae", "ne"]

Neste exemplo, o .map() é usado para transformar cada caractere da string adicionando um “e”. Isso funciona de forma semelhante ao .split() e a outros métodos que operam sobre caracteres de strings antes de transformá-los novamente em um array.

Método 3: Renderizando listas em bibliotecas JavaScript

Esse caso de uso é comum em frameworks JavaScript como React. Aqui, é necessário usar a sintaxe JSX, já que o .map() é utilizado dentro dela. Por exemplo:

import React from "react";
import ReactDOM from "react-dom";

const names = ["cloud", "dbaas", "vps", "storage", "kubernetes"];

const NamesList = () => (
  <div>
    <ul>{names.map(name => <li key={name}>{name}</li>)}</ul>
  </div>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<NamesList />, rootElement);

Neste exemplo, o componente React renderiza uma <div> contendo uma lista. O método .map() do JavaScript é usado para iterar sobre o array de nomes e gerar itens de lista individuais. A renderização é feita pelo ReactDOM.render em um elemento DOM com o ID root.

Método 4: Transformando formatos de objetos em arrays

Outro caso de uso do .map() em JavaScript é transformar cada objeto em um array e retornar um novo array com objetos modificados. Isso funciona de forma semelhante ao processamento de dados tradicional.

Exemplo:

const myUsers = [
    { name: 'cloud', likes: 'scalability' },
    { name: 'devops', likes: 'automation' },
    { name: 'kube', likes: 'orchestration' }
];
const usersByLikes = myUsers.map(item => {
    const container = {};
    container[item.name] = item.likes;
    container.popularity = item.name.length * 12;
    return container;
});
console.log(usersByLikes);

Saída:

[
  { cloud: 'scalability', popularity: 60 },
  { devops: 'automation', popularity: 72 },
  { kube: 'orchestration', popularity: 48 }
]

Neste exemplo, cada objeto do array é modificado usando notação de colchetes e atribuições de propriedades de objeto. Essa abordagem é útil para transformar e condensar dados antes de usá-los em aplicações do lado do cliente.

Conclusão

Revisamos quatro maneiras principais de usar o método .map() em JavaScript. Você pode expandir suas capacidades combinando-o com outros métodos. Para obter mais informações detalhadas, consulte a documentação oficial.

Programação JavaScript

20.10.2025

Reading time: 4 min

Semelhante

Programação JavaScript

Como adicionar JavaScript ao HTML

Neste artigo, vamos entender como adicionar JavaScript ao HTML. Existem três maneiras de fazer isso: Inserir o código JS dentro de uma tag <script> Conectar um arquivo externo Escrever o código diretamente dentro da tag HTML usando atributos especiais Vamos analisar cada método para entender seus prós e contras. Inserindo código dentro da tag <script> A forma mais simples de inserir código JS em uma página HTML é usar a tag <script>. Ela informa ao navegador que todo o conteúdo deve ser interpretado como um script executável, e não como texto ou código HTML. Por exemplo, vamos adicionar um script que exibe a data e hora atuais: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Date and Time</title> </head> <body> <script> let date = new Date(); alert("Now " + date); </script> </body> </html> Quando a página carregar, aparecerá uma notificação com a data e hora atuais. Você pode escrever um programa inteiro dentro da tag <script>. Como exemplo, vamos criar um relógio eletrônico: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Electronic Clock</title> <script> function displayTime() { let element = document.getElementById("clock"); // Find element with id="clock" let now = new Date(); // Get current time element.innerHTML = now.toLocaleTimeString(); // Display time setTimeout(displayTime, 1000); // Call the function every second } window.onload = displayTime; // Start displaying the time after the document is loaded </script> </head> <body> <h1>Electronic Clock</h1>. <div id="clock"></div> </body> </html> Perfeito! Você usou JavaScript para adicionar a hora atual a um elemento HTML, que é atualizado a cada segundo. Os comentários explicam detalhadamente o que o script faz. Ele encontra o elemento com id="clock" dentro da tag <div> logo abaixo do cabeçalho. Em seguida, obtém a hora atual, exibida imediatamente após o carregamento do documento e atualizada a cada segundo. Parece conveniente, mas essa abordagem tem algumas desvantagens. Imagine que você queira mostrar a hora em todas as páginas do site. Nesse caso, será necessário duplicar o conteúdo da tag <script>. Outro problema é que quanto maior o script, pior fica a legibilidade do código. No exemplo acima há apenas uma função, mas se você precisar de 5, 10 ou 20, é mais prático usar o próximo método: conectar arquivos JS externos. Conectando arquivos externos A tag <script> também pode ser usada para conectar JavaScript de arquivos externos por meio do atributo src. Pode ser um arquivo criado por você ou uma biblioteca JS que adiciona funcionalidades à página. Por exemplo, vamos mover o script do relógio para um arquivo separado: # Time.js file function displayTime() { let element = document.getElementById("clock"); // Find element with id="clock" let now = new Date(); // Get current time element.innerHTML = now.toLocaleTimeString(); // Display time setTimeout(displayTime, 1000); // Call the function every second } window.onload = displayTime; // Start displaying the time after the document is loaded Agora removemos todo o JS do HTML e deixamos apenas a referência ao arquivo: #File time.html <html> <head> <meta charset="utf-8"> <title>Electronic Clock</title> <script src="./time.js"></script> </head> <body> <h1>Electronic Clock</h1>. <div id="clock"></div> </body> </html>. O resultado é o mesmo: você adicionou a hora atual ao <div> usando JavaScript. Vantagens dessa abordagem: Os arquivos HTML ficam mais simples Todo o código JS pode ficar em um único arquivo Se várias páginas usarem o mesmo script, ele será carregado apenas uma vez e reutilizado a partir do cache do navegador JavaScript dentro de tags HTML Você pode inserir JavaScript diretamente em uma tag HTML usando atributos especiais como onclick, onmouseover, onkeypress, onload, etc. <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>JavaScript inside an HTML tag</title> </head> <body> <button onclick="alert('Hi! This is how JS works too')">Click me</button> <button onmouseover="alert('This works too')">Hover over me</button> </body> </html>. Ao clicar no primeiro botão, aparecerá uma notificação. Ao passar o mouse sobre o segundo, outra mensagem será exibida. Também é possível adicionar vários manipuladores ao mesmo elemento: <button onclick="alert('Hi! This is how JS works too')" ; onmouseover="alert('This works too')">Click me</button> No entanto, isso é considerado uma má prática. A maioria dos desenvolvedores prefere separar conteúdo e comportamento. Além disso, como você pode ver, usar manipuladores diretamente no HTML prejudica bastante a legibilidade do código. Onde é melhor colocar os scripts Tecnicamente, não há restrições para inserir a tag <script>. Você pode adicionar JavaScript no <head> ou no <body>, no início ou no final do documento. Porém, normalmente os scripts são colocados no final do corpo, logo antes da tag </body>. Isso acelera o carregamento da página e permite que o usuário veja o conteúdo mais rapidamente. Cada tag <script> bloqueia a renderização da página até que o JavaScript seja totalmente carregado e executado. Arquivos externos (especialmente bibliotecas grandes) podem atrasar bastante a exibição do conteúdo, principalmente em conexões lentas. Você só deve colocar scripts no <head> se houver um motivo claro. Caso contrário, o melhor é adicioná-los no final do documento, antes do fechamento do </body>.

28 January 2026 · 6 min to read

Como usar .map() em JavaScript

Método 1: Chamando funções em elementos individuais do array

Método 2: Convertendo strings em arrays

Método 3: Renderizando listas em bibliotecas JavaScript

Método 4: Transformando formatos de objetos em arrays

Conclusão

Semelhante

Como adicionar JavaScript ao HTML

Tem perguntas, comentários ou preocupações?

Tem perguntas,
comentários ou preocupações?