9

I like to think I understand JavaScript, but I found something unexpected today and I was hoping someone could explain to me why it happens.

Take this code

var animalData = {
                  cow:"cow",
                  sheep:"sheep",
                  getCow:function()
                  {
                    return this.cow;
                  },
                  animalList:[
                          {
                            animalId:this.cow,
                            label:"This is a cow"
                          },
                          {
                            animalId:this.sheep,
                            label:"This is a sheep"
                          }
                       ]
          };

console.log(animalData.getCow());
console.log(JSON.stringify(animalData.animalList,null," "))

The output is not what I was expecting. Calling animalData.getCow() results in "cow" just as you would expect. But it's what gets return by the second console.log that confuses me.

[
 {
  "label": "This is a cow"
 },
 {
  "label": "This is a sheep"
 }
]

In other words, the object removes the animalId property entirely from the objects defined. I was expecting this

[
 {
  "animalId":"cow",
  "label": "This is a cow"
 },
 {
   "animalId":"sheep",
  "label": "This is a sheep"
 }
]

And I could understand maybe this

[
 {
   "animalId":undefined,
  "label": "This is a cow"
 },
 {
   "animalId":undefined,
  "label": "This is a sheep"
 }
]

But why does the animalId property get removed entirely?

Can anyone explain what's going on under the surface to cause this behaviour? I'm guessing that the this keyword does not work because the properties are undefined when it is invoked, but why does it remove the property entirely?

NB: I'm not looking for a workaround, that's easy enough to do - just interested in why it happens.

JSFiddle here

Improve this question
8
  • On a random note. Why do you use JSON stringify to log an object? Just use console.log/console.dir, that way you can investigate the object easily. Commented May 27, 2016 at 14:32
  • @evolutionxbox Another way to look at it is that he's just using console.log to see the effect of stringifying this object, not that he's stringifying it to log it. Commented May 27, 2016 at 14:38
  • @evolutionxbox One reason would be that if you log the object directly, when you expand the Object in the console you will get the current values, not the values of that Object when it was logged. This is because when simply logging the Object, the browser only saves a reference to that Object, not a deep copy of the current Object. Commented May 27, 2016 at 14:38
  • @Cristy The current values? I had always been under the assumption it shows the values at the time of logging. If I change the values of a previously logged object and inspect the values, I'm pretty sure they don't change. Commented May 27, 2016 at 14:48
  • 1
    @evolutionxbox Simple example - run this in your console: var o = { x: {y: 3}}; console.log(o); o.x.y = 5; when it was logged, o.x.y was 3, but when you expand it, you see it shows as 5. Commented May 27, 2016 at 14:50

2 Answers 2

Reset to default
6

At the point the object is initialised, this refers to the outer context, which won't have cow and sheep properties. As you thought, that will result in the animalIds being undefined.

JSON.stringify does certain things with undefined properties, namely:

If undefined, a function, or a symbol is encountered during conversion it is either omitted (when it is found in an object) or censored to null (when it is found in an array).

Which is why you don't see them.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Brilliant. Thanks for a clear explanation. I didn't know that about JSON.stringify. It can make debugging difficult. I will use something like JSON.stringify(animalData.animalList, function(k, v) { return (v===undefined)? null : v; }); );
4

First of all, you are correct your last example, this is what you are trying to stringify: 

[
 {
   "animalId":undefined,
  "label": "This is a cow"
 },
 {
   "animalId":undefined,
  "label": "This is a sheep"
 }
]

And, because those values are undefined JSON.stringify simply omits them. Why the values above are undefined is because the this keyword in this.cow refers to the current scope, which is actually the window Object as it is not inside any other function.

Why it makes sense to omit keys with undefined values? Because whether they exist or not, if you try to access object.key you will get the correct value: undefined

Improve this answer

7 Comments

If you don't instantiate the animalData object with new, won't this always refer to the window?
@evolutionxbox It depends. The getCow function will reference the correct this because it's being called as a function on the object.
@evolutionxbox His animalData is not a class that can be instantiated with new, but a simple Object. You can't instantiate an animalData object (it has no constructor defined).
offtopic: Look at my rating: 6,666 :D
Just saved you by upvoting. You won't get dragged through the gates of hell now.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.