Executando verificação de segurança...
20

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:

MapObjetos
Map não possui chaves por padrão diferente de objetos, que possuem um protótipoObjetos 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árioObjetos 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 primitivoObjetos 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 pesquisadaObjetos 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!

Carregando publicação patrocinada...
2
1
1

Acho que só um complemento, é que caso queira converter objetos em Map da pra criar métodos facilmente, exemplo:

function convertObjToMap(obj) {
const map = new Map();
Object.keys(obj).forEach(key => map.set(key, obj[key]));
return map;
}

Mas seria legal também falar um pouco sobre tipagem com Map já que muitas pessoas utilizam o typescript, no caso um bom uso da tipagem seria igual a tipagem de um obj só que extendendo o Map?

Já conhecia o Map e já utilizei algumas vezes, mas fiquei interessado em me aprofundar um pouco mais kkk

2