Value was evaluated just now with console.log on JavaScript object

Asked
Active3 hr before
Viewed126 times

7 Answers

javascriptobjectvalue
90%

Examining objects via console.log happens in an asynchronous manner. ,The reference to the object is passed synchronously to console but it doesn't display the properties till its expanded . If the object has been modified before examining it in the console, the data shown will have the updated values. Chrome console shows a little i in a box which which says value below was evaluated just now,Making statements based on opinion; back them up with references or personal experience.,In order to print the object completely in console, you can stringify and log it like

In order to print the object completely in console, you can stringify and log it like

console.log(JSON.stringify(obj));
88%

It is important to note that the console shows the object’s value which is evaluated at the time of the first expansion in the console.,Now the object’s value is not changed on expansion.,The question is: what will be shown in the console which is called on line 6?,But here we also have to be careful. If the object’s value has been mutated, the console output will change on expansion:

A lot of developers are not using a debugger while developing. Instead they are relying on their old friend console.log().

console.log()
load more v
72%

When I print same object in HTML it looks like this,,Actually, object contains a total of 5 elements as shown in the above image, Code for printing object HTML,,When I print object in HTML using for each loop I'm getting only half contents of the object but when I print using console.log and press that little triangle I'm getting full object and i is shown near that object when I hover that it says value was evaluated just now as shown in below image, ,In order to print the object completely in console, you can stringify and log it like

When I print same object in HTML it looks like this,

7.33--Some Name
7.08--Some Name
7.83--Some Name

Actually, object contains a total of 5 elements as shown in the above image, Code for printing object HTML,

for (var key in obj){
    $("p").append(key+"--"+obj[key][0]+"<br>");
}
load more v
65%

When you hover over this icon, you will see the text “The value was evaluated just now”,This is just an object containing a foo key with the value bar. However, take a look at the the white i inside a blue background next to bar,Javascript developers, rely on console.log function to print out information on the console, often used for quick debugging. However, the console.log function isn’t as reliable as it seems.,When we print y.data.title, it returns undefined. This is because the browser calculates the value of objects in real time, and not the value at the moment at which console.log called y.data.title

What this means is that the value of the object’s information was retrieved at the moment you clicked on the dropdown arrow.

Why is this important? What if another variable tried to access that value?

Lets look at the following example

var y = {
   data: {}
};
fetch('https://jsonplaceholder.typicode.com/todos/1')
   .then(response => response.json())
   .then(json => {
      y.data = json;
      //   console.log(json);
   })

console.log(y);
load more v
75%

You've probably logged an object to the console before, right?,The most obvious solution to such a problem would be to simply copy the logged object. Sure, it can take a bit of additional memory, but at the debugging phase, it's not that important.,When you get into your console window, you'll see your object logged nicely in a form of an expandable tree. There will also be a little preview of what you can find inside.,Above you can see the most basic way to log an object - by using console.log(). Don't get me wrong - it's completely fine to do it that way, but it has one fundamental flaw - dynamically evaluation.

You've probably logged an object to the console before, right?

const obj = {
   key: "value"
};

console.log(obj);
load more v
40%

Interesting general solution to a problem ,When I try to view the values in eventList using console.log(eventList) on Chrome, I get an empty array represented as []. On clicking on the same, the array expands to show the actual values inside. However, this is accompanied by a message on the console stating "Value below was evaluated just now."., Why does "brother" have the instrumental case in this Polish sentence? , Meta Discuss the workings and policies of this site

Have a look from the docs:

myContract.events.MyEvent({
      filter: {
         myIndexedParam: [20, 23],
         myOtherIndexedParam: '0x123456789...'
      }, // Using an array means OR: e.g. 20 or 23
      fromBlock: 0
   }, function(error, event) {
      console.log(event);
   })
   .on('data', function(event) {
      console.log(event); // same results as the optional callback above
   })
   .on('changed', function(event) {
      // remove event from local database
   })
   .on('error', console.error);
load more v
22%

If you guess that the console.log() call would either output undefined or throw an error, you guessed incorrectly. Believe it or not, it will output 10. Why?,With regard to the last two, despite being empty (which might lead one to believe that they would evaluate to false), both {} and [] are in fact objects and any object will be coerced to a boolean value of true in JavaScript, consistent with the ECMA-262 specification.,The following objects are assumed to be reachable and are known as “roots”:,JavaScript’s memory management (and, in paticular, garbage collection) is largely based on the notion of object reachability.

Consider this example code snippet:

Game.prototype.restart = function() {
   this.clearLocalStorage();
   this.timer = setTimeout(function() {
      this.clearBoard(); // what is "this"?
   }, 0);
};
load more v

Other "javascript-object" queries related to "Value was evaluated just now with console.log on JavaScript object"