JS issues at work - Issue 1 Fixing [object Object]
Tags: javascript, beginners, learn, codenewbie
Published: 2022-01-29 16:11:32

**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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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 :
```js
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:
```js
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:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/knf99fbrmyjboke11ud6.png)
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:
```js
alert(JSON.stringify(nestedObject.step1));
```
Voila!!🎉 You will see it works and the result would look like this:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4qdrcoewitwsj3tjpa3y.png)

👨‍🏫️ **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](https://developer.mozilla.org/en-US/docs/Web/API/Window/alert#parameters)

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.
```js
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)
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]`.
```js
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
```