JS issues at work - Issue 1 Fixing [object Object]

#javascript #beginners #learn #codenewbie

TL;DR: This is a part one of the series 'JS issues at work', which explains how to solve [object Object] issues while using JS in day to day work.

Hello there 👋 I am a JS developer and have an experience of more than 6+ years. This is my very first blog and I started blogging so that I can journal my experience and others can also benefit from my learnings.

I found that learning something and applying that knowledge are two different things. So in this series, I would try my best to provide scenarios which we face in our day to day work and how we can solve that by applying our learnings.

Without much further ado, let's get started. Before we start remember:

💡 Finding solutions fast is good, but understanding the issue and why the solution worked is more important.

Prerequisites:

Basic knowledge of JS
Basic knowledge of working with JSON

🚨 Scenario:
When starting as a JS developer, we are very much dependent on alert() and console.log() to debug. In real life many a times we need to work with nested objects like this :

const nestedObject = {
    "step1": {
        "item1": "Item one of step one",
        "item2": "Item two of step one"
    }
}

Let's assume that we need to check what the items are inside step1. When using console.log() we would see something like this:

console.log(nestedObject.step1)
// Output:
//    {
//        "item1": "Item one of step one",
//        "item2": "Item two of step one"
//    }

But something interesting happens when we use alert(nestedObject.step1). We will see something like:

What happened here? And why was [object Object] printed instead of the actual output?

💊 Solution: We can see the actual object while using alert() is if we use:

alert(JSON.stringify(nestedObject.step1));

Voila!!🎉 You will see it works and the result would look like this:

👨‍🏫️ Understanding the issue and reason the solution works:

alert() is a WebAPI and it accepts an optional parameter which is a string, or alternatively an object that is converted into string and displayed. source

So when we try to print an object using alert(), it converts the object as a string directly and prints it. The default conversion of any object to string is [object Object]. We can replicate this now in console.log() as well.

console.log(nestedObject.step1.toString());
// Output
// [object Object]

So now we know why we see [object Object] instead of the actual object while using alert().

JSON.stringify() converts the JSON to a JSON string and returns the value, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified. source
So the object is not directly converted to string using toString().

So the output of using JSON.stringify() is a JSON string which is a string but not converted to [object Object].

const convertedObject = JSON.stringify(nestedObject);

console.log(convertedObject);
// output
'{"step1":{"item1":"Item one of step one","item2":"Item two of step one"}}'

console.log(typeof convertedObject);
// output
// string