Using 'this' keyword in JavaScript object

Question

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

Answer 1

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.

Answer 2

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