Map e Set no JavaScript moderno: chaves de qualquer tipo, deduplicação eficiente e quando preferir em vez de objeto ou array.
Jonathan Juliani
Engenheiro de Software Sr - Full Stack · WithClutch Inc. | Juliani Tecnologia
{} só aceita chave string; array não deduplica. e (ES6) resolvem cache por objeto, contagem e “valores únicos” sem gambiarra.
MapSetO que você vai aprender:
Map: set, get, has, deleteSet: unicidade e Array.from(new Set(arr))Map vs objeto literalPré-requisitos: hash tables (ep. 8) ou arrays (ep. 2).
Map e Set: chave-valor e valores únicosMaps e Sets são estruturas de dados muito conhecidas e geralmente usamos no dia-a-dia sem nem lembrar que estamos usando estruturas que foram feitas pra resolver alguns tipos de problemas igual um array ou tree (árvores)... Os Maps funcionam com uma estrutura de chave-valor, onde as chaves são únicas. Já os Sets são usados para criar uma coleção onde os valores são únicos. No mundo do NodeJS/Javascript tivemos na atualização do ECMAScript 6 (ES6), algumas ajudas que deixaram melhor e trouxeram formas mais eficientes de manipular os Maps e os Sets.
Um Map é uma coleção de pares chave-valor onde cada chave é única e tem o seu valor, e seu valor pode ser de qualquer tipo (um número, um objeto, etc), e diferente dos objetos tradicionais em JavaScript, as chaves de um Map podem ser de qualquer tipo também, incluindo objetos, funções ou outros tipos primitivos.
Um Set é uma coleção de valores únicos. Assim como os Maps, os valores em um Set podem ser de qualquer tipo. Sets são particularmente úteis quando você precisa garantir que não haja duplicatas em uma coleção.
Agora abre aí o seu VSCode ou sua IDE favorita e vamos lá, crie um arquivo chamado map-and-set.js e cola o código abaixo pra começar com o Map:
const map = new Map()
map.set('key', 'value')
map.set({}, 'object as key')
map.set(() => {}, 'function as key')
map.set(1, 'number as key')
map.set('key2', { key: 'key in the map value object' })
console.log(`map:`, map)
console.log(`map get "key":`, map.get('key'))
console.log(`map has "key2":`, map.has('key2'))
console.log(`map get "key2":`, map.get('key2'))
map.delete('key')
console.log(`map deleted "key":`, { map })Explicando o Map acima:
const map = new Map().map.set('key', 'value'): Adiciona um novo par chave-valor ao Map, a chave é uma string key e o valor uma outra string value.map.set({}, 'object as key'): Adiciona um novo par chave-valor ao Map, onde a chave é um objeto vazio, e o valor é uma string.map.set(() => {}, 'function as key'): Adiciona um novo par chave-valor ao Map, onde a chave é uma função vazia, e o valor é uma string.map.set(1, 'number as key'): Adiciona um novo par chave-valor ao Map, onde a chave é um número 1, e o valor é uma string.map.set('key2', { key: 'key in the map value object' }): Adiciona um novo par chave-valor ao Map, onde a chave é uma string key2, e o valor é um objeto com uma chave key e um valor string.Depois disso temos alguns console.log para mostrar o que está acontecendo com o Map, onde:
map: Mostra o Map completo.map.get('key'): Pega o valor da chave key.map.has('key2'): Verifica se a chave key2 existe no Map e retorna true ou false.map.get('key2'): Pega o valor da chave key2.map.delete('key'): Deleta a chave key do Map se ela existir.Agora vamos com o Set:
const set = new Set()
set.add('valor1')
set.add('valor2')
set.add('valor3')
set.add('valor4')
set.add('valor5')
console.log(`set:`, set)
console.log(`set has "valor2":`, set.has('valor2'))
console.log(`set keys:`, set.keys())
set.add('valor1')
console.log(`set add "valor1" again:`, set)
set.delete('valor1')
console.log(`set deleted "valor1":`, set)Explicando o Set acima:
const set = new Set().set.add('valor1'): Adiciona um novo valor ao Set, o valor é a string valor1.set.add('valor2'): Adiciona um novo valor ao Set, o valor é a string valor2.set.add('valor3'): Adiciona um novo valor ao Set, o valor é a string valor3.set.add('valor4'): Adiciona um novo valor ao Set, o valor é a string valor4.set.add('valor5'): Adiciona um novo valor ao Set, o valor é a string valor5.Depois disso temos alguns console.log para mostrar o que está acontecendo com o Set, onde:
set: Mostra o Set completo.set.has('valor2'): Verifica se o valor valor2 existe no Set e retorna true ou false.set.keys(): Retorna um iterador com as chaves do Set.set.add('valor1'): Vai tentar adicionar o valor valor1 de novo no Set, e logo em seguida fazemos um log onde vemos que o valor não é adicionado pois ele já existe no Set e não temos valores duplicados.set.delete('valor1'): Deleta o valor valor1 do Set se ele existir.Maps servem onde precisamos ter chave-valor que precisam ser acessadas e atualizadas de forma fácil e rápida, um exemplo pode ser quando trabalhamos com caches de dados, onde podemos usar Maps e ter uma relação de chave-valor pra recuperar de forma rápida as informações.
Você pode encontrar e utilizar os Sets para manipular listas de itens em casos onde a lista não deve conter itens duplicados, como em casos de gerenciamento de sessões de usuários ou um exemplo mais simples seria uma listas de tarefas, afinal não quereoms incluir a mesma tarefa 2x/3x na lista (em alguns casos né, aqui é só de exemplo).
map.set(obj, 1) só recupera com a mesma referência de obj — não com objeto “igual” por valor.
Set usa SameValueZero — NaN é considerado igual a NaN, diferente de ===.
| Estrutura | Use quando |
|---|---|
Map | Chave → valor, qualquer tipo de chave |
Set | Presença / dedupe |
{} | Record simples, chaves string/symbol |
| Hash table (ep. 8) | Implementação por baixo do Map |
Onde Map ou Set salvou seu código — cache, dedupe, sessão? Se viu cagada no post, comenta.
Receba notas de arquitetura e performance na sua caixa de entrada. Mesma lista do convite—inscreva-se aqui quando quiser.
