Deixando os Objetos JavaScript mais previsíveis com Maps

Quem nunca usou o console.log para descobrir um bug na aplicação que atire a primeira pedra. Em sua maioria nós conseguimos resolver o problema em minutos, porém em outros casos podemos demorar horas.

Estamos codando todo feliz e de repente: “Cannot read property x of undefined.”. Quem nunca recebeu um erro e ficou de cara com isso.

Vamos ver como fazer um map para nos ajudar a superar isso e quem sabe resolver problemas muito mais rapidamente.

Vamos ao exemplo

Nós temos um objeto chamado “humano”.

O objeto humano tem seus valores, métodos e atributos. E pegamos essas informações via API, em sua maioria nós pegaríamos as propriedades dentro do objeto que inclui uma chamada “update_time” que nos fornece a informação ao qual esse objeto teve uma mudança.

Rodando o código e nos deparamos com esse erro:

Uncaught TypeError: Cannot read property ‘update_time’ of undefined at <anonymous>:1:14

E vamos olhar os eventos desse objeto, se eles existem ou não.

Dessa forma temos alguns problemas, deixa o nosso código não muito legível. Mas vamos para a solução com o “map”.

Solução com o Map

Quando transformamos nosso objeto em um Map(), temos todos os métodos do map.

Mas aí vem a pergunta, mas como transformamos o objeto? Fácil, usamos o “Object.entries()” e passamos o objeto como parâmetro.

O Map nos dá muitos métodos para trabalharmos, deixando nosso código mais legível, previsível e consequentemente mais tranquilo de descobrir o erro.

• set(‘chave’, ‘valor’) – O método set() adiciona ou atualiza um elemento com a chave especificada e um valor do objeto Map;
• get(‘chave’) – O método get() retorna um elemento específico do objeto Map. Se o valor associado à chave for um objeto, será retornado à referência do objeto e qualquer mudança no mesmo irá afetar o valor que está dentro do objeto Map;
• has(‘chave’) – O método has() retorna um booleano indicando se o elemento com a chave especificada existe ou não;
• delete(‘chave’) – O método delete() remove o elemento específico do objeto Map através de sua chave;
• clear() – O método clear() remove todos os elementos de um objeto Map;
• size() A propriedade assessora size retorna o número de elementos que estão dentro do objeto Map.

Todas as definições foram tiradas do MDN. Map – JavaScript | MDN (mozilla.org)

Se quisermos as informações do “update_time”, usaremos o .has(“prop”). Ele retorna um boolean baseado se existe ou não a propriedade.

Conclusão

O Map(), pode ser uma das soluções que existem para lidar com erros, acho que com ele deixamos tudo mais legível e previsível. Assim como o TypeScript deixa tudo mais previsível ao codar, podemos sair um pouco do console.log().

Vale muito a pena ler mais sobre o Map no MDN:
Map – JavaScript | MDN (mozilla.org)