Why Java script object is different than it's individual property?

Question

I have a JS object where there is a attribute called value. After some kind of operation I am updating the value property of the object. Now I am facing a strange behavior as follow.

My code is like;

console.log(root.formElements[key][i]);             <-------- Line 1
console.log(root.formElements[key][i]["value"]);    <-------- Line 2

The lines of code is exactly one after another.

Now in chrome console I am getting the result as follow;

For Line 1

    {name: "campaignStartDate", label: "Campaign Start Date", type: "date", mandatory: "yes", icon: "event_note", …}
    class:"s4"
    classField:"startDate"
    icon:"event_note"
    label:"Campaign Start Date"
    mandatory:"yes"
    name:"campaignStartDate"
    newrow:"yes"
    type:"date"
    value:""

For Line 2

01/04/2018

So the question is how is it possible when I am printing the object the value is blank but in next line if I print is individually the I am getting the value?

The code snippet;

for (var key in root.formElements) {

    for(var i=0;i<root.formElements[key].length;i++)
    {
          root.formElements[key][i]["value"] = data[root.formElements[key][i]["classField"]];

          if(root.formElements[key][i]["name"] == "campaignStartDate")
          {
            console.log(root.formElements[key][i]);
            console.log(root.formElements[key][i]["value"]);
          }
    }

FYI I am facing this issue when I am developing an Angular 4 application. And In my application also I am getting the value property of the object is blank, when I am expecting the date string there.

Any help will be very good for me. Please let me know if any more data is required.

Thanks in advance.

No actually in my application also I am getting the value property blank. — KOUSIK MANDAL, Jun 17 '18 at 14:00
@KOUSIKMANDAL Can you create a working snippet of your code so that we can see that behavior in plunker/jsfiddle etc? That would be easy to debug. From here don't know what are you getting in `root.formElements` — Vikasdeep Singh, Jun 17 '18 at 14:02
I'd guess that you overwrite it after that with the empty string you see in he log. — Thomas, Jun 17 '18 at 14:02

score 3 · Accepted Answer · answered Jun 17 '18 at 14:03

Mouse over the small blue i icon in the chrome console and you'll see a tooltip that explains this behavior. The variable is being evaluated when you click the spin-down triangle. The value of the object at index "value" is being changed between when you initially console.log and when you spin-down and inspect the values.

See: Chrome js debug - two different values at the same time

Edit: Specifically, objects and arrays are evaluated when you click on them in the console. Strings (and other primitives) are evaluated when they are console.logged.

Why Java script object is different than it's individual property?

1 Answers1