Conteúdo: Tudo sobre o objeto Map() em JavaScript
Introdução
Ao longo deste página, vocês verão tudo sobre o objeto Map()
no javaScript, e apenas ele. Se procura por outros objetos que faz parte do assunto Keyed collection
, sinto-lhe informar, mas não terá nada sobre WeakMap()
, set
e WeakSet
. Esses conteúdo farei mais a frente de forma separada. Sem mais delongas.
O que é Map?
Map é uma estrutura de dados que permite armazenar pares de chaves e valores, assim como objetos. Entretanto, diferente de objetos, permite que a chave possua qualquer tipo de valores existem no javaScript (isso vai ser explicado mais a frente).
const map = new Map();
map.set('name', 'John'); // name é a chave e John o valor
map.set('age', 30);
console.log(map.get('name')); // Output: John
console.log(map.has('age')); // Output: true
Poderam notar que: Map()
não tem uma sintaxe difícil. utilizando a palavra chave new
para criar um construtor Map
. Depois disso podemos manipular e utiliza-lo como quisermos.
Características de Map()
Map()
possui uma série de características realmente impressionantes! Primeira de todas, e a mais evidente: Map()
é MUITO semelhante a objetos
regulares. Assim como objetos, Map()
armazena para de valores (chave e valor). Porém, assim como mencionando anteriormente, Map()
permite que a chave seja de QUALQUER TIPO, sim, isso mesmo! Objetos não permitem isso. Objetos transforma qualquer valor passado como chave em string
, ou como alternativa, pode-se usar Symbol
. Apenas essas duas formas são permitidas em objetos regulares ao declarar chaves. Aqui vai um exemplo para ilustrar melhor:
const myMapObject = new Map();
myMapObject.set({}, 'Dora Aventureira');
myMapObject.set(undefined, 29);
myMapObject.set(10, {});
console.log(myMapObject.get(10)); // {}
console.log(myMapObject.get(undefined)); // 29
console.log(myMapObject.get({})); // 'Dora Aventureira
// Objetos
const Objecto = {
undefined: 20,
any: 'any value',
30: 12,
}
const myKeys = Object.keys(meuObjeto);
console.log(myKeys) // ['undefined', 'any', '30']
Está é uma das principais vantagens de Map()
em relação a objetos
.
NÃO ACABOU AINDA! MAP() É MUITO MAIS INCRÍVEL QUE ISSO!
Podemos pegar facilmente o comprimento de um Map()
utilzando o método Size
, que em objetos já é um role mais argumentativo...
Aqui vai uma tabela de comparação com elementos que eu julguei importante:
Map | Objetos |
---|---|
Map não possui chaves por padrão diferente de objetos, que possuem um protótipo | Objetos possui um protótipo, e por isso tem algumas chaves por padrão que podem entrar em conflitos com suas próprias chaves, caso não tome cuidado. Da para contornar isso com: Object.create(null) , mas raramente é utilizado |
Map é mais seguro ao lidar com valores fornecidos pelo o usuário | Objetos estão sujeitos a ataque de "override" onde o protótipo do objeto é substituído, o que pode levar ataques de injeção de objetos. Entretanto, pode ser resolvido com: Object.create(null) |
Map() permite qualquer tipo de valores como chave, como funções, objetos e qualquer tipo primitivo | Objetos permite apenas Strings, e Symbols. Caso passe outra coisa diferente, vai ser convertido para String |
Caso queria criar um loop pela a ordem em que os elementos foram inseridos, Map() com certeza é a melhor escolha! | Objetos tem dificuldades para criar um loop trazendo os elementos na ordem em que foram inseridos. Caso queira saber mais profundamente, procure mais sobre |
Saber o tamanho atual de um Map() é muito simples utilizando apenas um método chamado size() | Objetos possuem uma forma menos conveniente... O método mais comum é utlizando length no array retornado por Object.keys() |
Map() possui melhor perfomance ao lidar com diversas interações repetidas como adicionar, remover, e etc... | Objetos não foram otimizados para nenhum desses cenários |
Map() não possui suporte nativo com JSON, mas pode ser contornado dando uma boa pesquisada | Objetos são mais indicados ao lidar com JSON, pois tem suporte nativo. |
Confusão ao usar Map()
As vezes pode ser confuso ao utilizar Map()
, pois tem diversas características peculiares...
Aqui está o exemplo de uma delas:
const wrongMap = new Map();
wrongMap["bla"] = "blaa";
wrongMap["bla2"] = "blaaa2";
console.log(wrongMap); // Map { bla: 'blaa', bla2: 'blaaa2' }
Por mais que no console mostre o objeto, ele não existe dentro do Map()
, pois a única forma de interagir com Map()
é através de seus métodos.
wrongMap.has("bla"); // false
wrongMap.delete("bla"); // false
console.log(wrongMap); // Map { bla: 'blaa', bla2: 'blaaa2' }
A forma correta de armazenar valores em Map()
é utilizando o método set()
const contacts = new Map();
contacts.set("Jessie", { phone: "213-555-1234", address: "123 N 1st Ave" });
contacts.has("Jessie"); // true
contacts.get("Hilary"); // undefined
contacts.set("Hilary", { phone: "617-555-4321", address: "321 S 2nd St" });
contacts.get("Jessie"); // {phone: "213-555-1234", address: "123 N 1st Ave"}
contacts.delete("Raymond"); // false
contacts.delete("Jessie"); // true
console.log(contacts.size); // 1
Conclusão
Ficou evidente que Map()
é muito superior a objetos
, mas objetos
ainda são necessários! Principalmente para interagir com o Backend atráves de JSON. Pode substituir objetos
para tarefas mais banais que não envolvam se comunicar com o Backend.
O que acharam? Cometi algum erro? Comentem!