Use "console.log" with objects becomes tricky
Tags: javascript, webdev, beginners
Published: 2023-01-06 02:30:21

Hi, sometimes there is a problem with using consle.log to log objects, let's discuss it.


## Problem

So firstly this  happen only with logging Javascript Objects

how to generate the issue?

```JS
const ourObject = {
    property: "property_value"
}
console.log(ourObject)
```

In this situation the expected console output should be something like this 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pv9volafnvt9ehmcxwud.png)

But what if we have another function that run after this code and make some changes for our object

```js

const ourObject = {
    property: "property_value"
}

console.log(ourObject)

function updateObjectFn(obj){
     obj.property = "property_value_updated"
}

updateObjectFn(ourObject)
```

The expected output for the console log here should be the same as the prvious console.log result as we call updateObjectFn after `console.log(ourObject)`

But the log will be something interesting it will show the property as updated even we have updated it after  *log*


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pet2tqgpbxd1db5vcgl7.png)

So what is happening, most of the browsers show on the console the current state of the object on the memory not the object at the time of logging it.

And that happen special with object as it [Mutable](https://developer.mozilla.org/en-US/docs/Glossary/Mutable)
Same issue happen with arrays as it also objects on Javascript

## Solution

In fact there is many solutions for this situation

### 1. Pass update function a copy of the object to avoid data mutation

for simple objects we can do shallow copy using destructing
```jS
const ourObject = {
    property: "property_value"
}

console.log(ourObject)

function updateObjectFn(obj){
     obj.property = "property_value_updated"
}

updateObjectFn({...ourObject})
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zp0kc0wjhiyd4o009fvk.png)

if the object is nested we can use some utility tools like Lodash function [deepClone](https://lodash.com/docs/4.17.15#cloneDeep)

```jS
const ourObject = {
    property: "property_value",
    nestedProperty: {
           key: "key_value"
    }
}

console.log(ourObject)

function updateObjectFn(obj){
     obj.property = "property_value_updated"
     obj.nestedProperty.key = "key_value_updated"
}

updateObjectFn(_.cloneDeep(ourObject))
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqj2j282bx06f28iztl5.png)

> NOTE: take care about coping too many objects as increase the usage of the memory

By the end Will discuss another approach to avoid mutations without having a deep memory effect.

### 2. By making Stringify copy of the object

Make a stingify copy of the object before logging it.

```js
const ourObject = {
    date: new Date() ,
    property: "property_value"
}

console.log(JSON.parse(JSON.stringify(ourObject)))

function updateObjectFn(obj){
     obj.date = new Date("1/1/2022")
     obj.property = "property_value_updated"
}

updateObjectFn(ourObject)
```
Although, it loses some information about the properties on the object of some data types as Example Date here.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7pmrlh67p56wl3r5pqxs.png)

### 3. Use immutable data types.

There is some Javescript package that provide immutable data types
on an elegant way without having deep effect on the memory usage.

Examples: [immutable-js](https://immutable-js.com/) [Immer](https://immerjs.github.io/immer/)


## Same Problem with React devTools.

you Might face this same problem with React devTools
As this screen as the devTools show that the object as 
Updated but it is not updated on the screen.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mm6e0k3kgx60iagi99t8.png)

This issue happen if the state of the application updated directly 
without using `setState` method

As this example [here](https://stackblitz.com/edit/react-xit2u1?file=src%2FApp.js)

I think that it, Thanks for reading I hope you enjoyed going throught it🙂.

Any feedback would be greatly appreciated.