Tips #JavaScript

Published in

codeburst

3 min readAug 7, 2018

This week I am going to share with you a thing which made me crazy. And how I debugged it and found the root cause.

Before directly taking you to the solution let me explain you my use case for ease understanding of the problem. I have received a big data which is in JSON format from the GET API and I have patched few of those values into the UI form. The user can update their new changes, once they hit the save button. I need to merge this new changes with the existing JSON without losing any key in the existing object.

I have written a logic to merge the new changes with the existing object and I have updated the form.

Consider below object as a response which I got from the server. For simplicity, I am using an object with three keys.

#snippet_onelet response = {
    manual_timezone: 'GMT (+5.30)',
    role: 'Admin',
    isDisabled: true
};

I have patched all the values in the UI, and the user has updated the form with his new changes. Consider the below example as the changed value

#snippet_twolet updatedData = {
    role: 'Viewer',
    isDisabled: false
};// Only new changes will be adding in this updatedData object

Now let’s pitch into the small piece of code, which resulted in hard to debug the issue.

#snippet_threefor (let key in response) {
    if (updatedData[key]) {
        // do something
    }
}

In the above snippet, inside the for loop. I am checking for the existence of the property using bracket notation in the updatedData object. If it presents (new changes occur), do something.

First two properties inside the response object type is a string, last one’s type is boolean.

I considered that the above if loop will fail for the below conditions:

When there is no such key.
When key presents, it has no value to it (which is undefined in our term).
When it is null.

I have settled myself with these scenarios and I checked in the code.

After few days, QA guy has raised an issue on my functionality. I was debugging like anything to find the root cause. Later I found that root cause and a better solution to this problem.

I forget that it will fail one more failure scenarios i.e(boolean).

Third key (isDisabled) in the object is of type boolean if the user sets it to false from true. It will fail and remains the same (new change will not get updated)as per my logic.

From here I started using the exact property for my use case, which is Object.prototype.hasOwnProperty(). This property will check for the existence of the key. To learn more about it, refer this link.

If you found this useful, clap it by clicking 👏 (Do you know that you can clap more than once? Try it and see for yourself!). You can also follow me on Twitter. You can also check out my previous articles in medium and scotch.io.

I live on the internet @ https://madhankumar028.github.io

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.

Tips #JavaScript

Written by Madhankumar J