Free AI web copilot to create summaries, insights and extended knowledge, download it at here

3060

Abstract

d="8a49">The Map Solution</h1><p id="3444">When we turn our object into a <code>Map()</code>, we get all the clear methods from the map.</p> <figure id="1112"> <div> <div>

            <iframe class="gist-iframe" src="/gist/raymonschouwenaar/57e311b6a14e5325a31c65f6eed1a4d9.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><p id="14ea">You can turn your object into a map with the <code>Object.entries()</code> method and give it your object as a parameter.</p>
    <figure id="a887">
        <div>
          <div>
            
            <iframe class="gist-iframe" src="/gist/raymonschouwenaar/5812272e09cb75fdcf0d440f3222f3cf.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><p id="207a">This would be the output of the map.</p><p id="046a">A <code>Map()</code> has a range of handy methods we can use to make our code more readable, predictable, and with fewer chances for getting errors.</p><ul><li><code>set('key', 'value')</code> store a key-value pair</li><li><code>get('key')</code> returns the value of a key if available</li><li><code>has('key')</code> returns <code>true</code> or <code>false</code> depending on if the key exists</li><li><code>delete('key')</code> deletes a key-value pair from the map</li><li><code>clear()</code> removes all the key-value pairs from the map</li><li><code>size()</code> returns the amount of key-value pairs from the map</li></ul><p id="b574">So if we want to have the information <code>last_updated</code> from the <code>events</code> the property, we use the <code>.has('prop')</code> method. This method returns a boolean based on the existence of the property.</p>
    <figure id="585e">
        <div>
          <div>
            
            <iframe class="gist-iframe" src="/gist/raymonschouwenaar/80deb549c9554e0ce8ab23f106b17b39.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><p id="44ad">In your console, you’ll see the console logged <code>‘not available’</code> without any errors.</p><blockquote id="15fe"><p>As already a few other helpful developers showed in the comments. The Map isn’t maybe the best solution for every problem for making your Objects more predictable.</p></blockquote><blockquote id="7483"><p>It turns out that the <a href="https://ponyfoo.com/articles/es6-reflection-in-depth">Reflect API</a>, <a href="https://v8.dev/features/optional-chaining">Optional chaining</a> or even better, <a href="http://www.typescriptlang.org/">TypeScript</a> helps to write JavaScript that is more predictable.</p></blockquote><blockquote id="224f"><p>Still, I think it could be an interesting solution 😉</p></blockquote><h1 id="3222">Conclusion</h1><p i

Options

d="b5af">I think using <code>Map()</code> can make your code more readable, predictable, and less sensitive to errors. With the normal <code>Object</code>, your code will give errors when a certain property is missing. This will lead to bad user experience, so let's prevent this.</p><p id="a2cc">If you want to check out more details about <code>Map()</code>, please check out the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map">detailed page of MDN web docs</a>.</p><p id="4eca">I hope you learned something new with this piece. Happy coding!</p><h1 id="fc66">Read more</h1><div id="5549" class="link-block"> <a href="https://readmedium.com/frontend-development-on-a-budget-raspberry-pi-4-4c917124d348"> <div> <div> <h2>Frontend Development On A Budget: Raspberry Pi 4</h2> <div><h3>undefined</h3></div> <div><p>undefined</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/1*[email protected])"></div> </div> </div> </a> </div><div id="bf62" class="link-block"> <a href="https://readmedium.com/5-tips-for-healthier-developers-ea21d1e826f"> <div> <div> <h2>5 Tips For Healthier Developers</h2> <div><h3>Your Body And Brains Need Attention</h3></div> <div><p>medium.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*QoYBhlvCZ8ihbilc)"></div> </div> </div> </a> </div><div id="9d2d" class="link-block"> <a href="https://readmedium.com/what-tech-i-use-in-2020-as-developer-f3269f857f0e"> <div> <div> <h2>What Tech I Use in 2020 As Developer</h2> <div><h3>Software, Hardware and other stuff I use during my work</h3></div> <div><p>medium.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*Ucyi_toyaAQASNUV)"></div> </div> </div> </a> </div><div id="202c" class="link-block"> <a href="https://readmedium.com/javascript-concepts-you-need-before-starting-w-frameworks-libraries-25a325312b5c"> <div> <div> <h2>JavaScript Concepts You Need Before Starting w/ Frameworks & Libraries</h2> <div><h3>Don’t start before you are comfortable with them</h3></div> <div><p>medium.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*KJ9azc_7b1b_8tKn)"></div> </div> </div> </a> </div></article></body>

Turn JavaScript Objects in Maps for Predictability

No more errors with undefined properties

The Problem With Objects

You’re deep into your code, and suddenly you get an error: “Cannot read property x of undefined.” Awww, man.

Most of the time, this means debugging — attacking my code with debugger here, console.log() there. Most of the time, I get it fixed fast. But there are those days that it takes me hours.

Example Problem

We have an object called car.

The car object has a set of key-value pairs. We get this information from our API. Normally, you’d get an events property inside the object that includes the property last_updated — stating the last time this information has been changed.

When running this code, we get an error.

Uncaught TypeError: Cannot read property 'last_updated' of undefined at <anonymous>:1:14

To prevent the error, we have to check if the property events is in the object or not.

This way, we don’t have an error if the event property is not in our object. But I find this code to be not that readable.

The Map Solution

When we turn our object into a Map(), we get all the clear methods from the map.

You can turn your object into a map with the Object.entries() method and give it your object as a parameter.

This would be the output of the map.

A Map() has a range of handy methods we can use to make our code more readable, predictable, and with fewer chances for getting errors.

set('key', 'value') store a key-value pair
get('key') returns the value of a key if available
has('key') returns true or false depending on if the key exists
delete('key') deletes a key-value pair from the map
clear() removes all the key-value pairs from the map
size() returns the amount of key-value pairs from the map

So if we want to have the information last_updated from the events the property, we use the .has('prop') method. This method returns a boolean based on the existence of the property.

In your console, you’ll see the console logged ‘not available’ without any errors.

As already a few other helpful developers showed in the comments. The Map isn’t maybe the best solution for every problem for making your Objects more predictable.

It turns out that the Reflect API, Optional chaining or even better, TypeScript helps to write JavaScript that is more predictable.

Still, I think it could be an interesting solution 😉

Conclusion

I think using Map() can make your code more readable, predictable, and less sensitive to errors. With the normal Object, your code will give errors when a certain property is missing. This will lead to bad user experience, so let's prevent this.

If you want to check out more details about Map(), please check out the detailed page of MDN web docs.