Lazy Evaluation of console.log() in JavaScript

If you have ever checked what is inside an object in Chrome by using a console.log(), then you might think that you get the actual object when you print the object. But here is a catch – what you see in the console may not be the same as what was true at that moment. This is called lazy evaluation. In this blog, you will get complete information about lazy evaluation and why the Chrome JavaScript console is lazy when evaluating objects.

Table of Contents:

• Lazy Evaluation
• Why Does This Happen?
• How to Log the Actual Object State?
  • Use JSON serialization
• Best Practices
• Conclusion

Lazy Evaluation

As the name suggests, lazy evaluation is a common performance optimization technique where the actual value of something is not calculated until it’s needed. In terms of the Chrome Dev Tools, when you print an object using console.log(), Chrome does not capture its full structure immediately. Besides this, it keeps a reference to an object and only displays its current properties when you extend it.

Figure 1:

Figure 2:

Explanation: As you can see in Figure 1, you are creating a user object that contains the name property only with the value Intellipaat. When you extend the reference that was given by the console, you see the name property has the same value as Intellipaat. Now, in Figure 2, you can change the name of the object to IntellipaatLearner, and when you see the object, the name has the value IntellipaatLearner.

Get Job-Ready Web Development Skills

Kickstart Your Tech Career

Explore Program

Why Does This Happen?

Chrome doesn’t want to waste time and memory by deeply cloning each and every object that you will log to the console. Instead of doing this, it holds a reference to the object properties and shows you on the screen when you view it. This entire process is done by Chrome to increase the application’s performance.

But this can become a real headache when you are debugging an application. You might see unexpected value in the console and think that your code is not working properly. 

How to Log the Actual Object State?

 Fortunately, there is a way to solve this problem and capture the object as it was at the moment of logging:

Use JSON serialization

You can use JSON.parse() and JSON.stringify() to solve the problem. Using them together helps you to print the object, which is the same as the original one.

Example: How to Solve the Problem of Lazy Evaluation for Objects in JavaScript.

Explanation: In this example, as you see, JSON.parse() and JSON.stringify() both will be used together. This will return you a completely new picture of the object, which means making changes in the reference object not reflected in the original one.

Best Practices

The console.log() statement in Chrome does not always show true at the time of logging objects. It shows you true when you expand the object in the dev tools. But there are some best practices by using which you can avoid this and print the actual state of an object:

• Use JSON.stringify(): It is the simplest way to log an object’s current state. JSON.stringify() converts the objects into a string.
• Use the Spread Operator for Shallow Copies: The spread operator is used for objects that don’t have nested objects inside them. It is the quick way to break the reference.
• Use structuredClone() for Deep Copies: If you want to avoid the lazy evaluation for deeply nested objects, then use structuredClone().
• Clone Array in Same Way: Perform the same steps for cloning Arrays because arrays are logged lazily as objects.

Conclusion

Chrome console is lazy about evaluating objects, but it is designed to be fast and efficient, not to mislead you, which means it is made only for increasing the performance of your code.  As a developer, you need to know this behaviour because this knowledge helps you to avoid confusion, and it helps you to debug code easily.

Lazy Evaluation of console.log() – FAQs