为什么JS要求存在对象/数组

Question

I've been working angular for probably six or so months and so have been working a lot more with JSON and objects in javascript. This situation I've been running into has been frustrating and I don't understand the reasoning. Maybe it's my inexperience with JS and so I don't know the reasoning or maybe I'm just doing it wrong but I'd appreciate any insight into this.

Example an object:

    var data = 
   {  
   "object":
       {  
         "Key":"Value",
         "stuff":"here"
       },
       "array":
       [  
          {  
            "Name":"Pizza Face",
            "id":7
          },
          {  
            "Name":"Maple bar",
            "id":1
          }
       ]
    }

So, let's say I want to add an object to the array. Easy, right?

var newObject = {"Name": "Master Sword", "id":2}
data.array.push(newObject);

But, let's say I want to add the object to the array before the array exists. The above method errors out saying Cannot read property 'push' of undefined . Instead, I have to wrap a condition around it.

  var newObject = {"Name": "Master Sword", "id":2}
  if(data.array){
    data.array.push(newObject);
  }
  else{
    data.array = [];
    data.array.push(newObject);
  }

I am allowed to add new objects to data whenever I want. However, woe unto me should I try to add an object within an object.

Example:

data.newObject = {"Name": "Master Sword", "id":2}

newObject will be created in this case and everyone is happy.

data.newObject.Name = "Master Sword"

FAIL! Cannot set property 'Name' of undefined

So...why doesn't JS just create newObject with the laid out key value pair? Or when I try to push to an array that doesn't exist why not just create the array rather than error out?

I want to be clear, although this is frustrating to me my purpose of this question isn't to complain. It's to ask if I'm doing this wrong. Do I really need a condition to check if the object/array exists before trying to add to it? Is there a better way to do this?

Answer 1

You are trying to create objects via chaining . The problem with that is except the last part in the chain, all the previous ones must be already defined Javascript Objects .

a.b.c.d = new Object(); // a,b,c must be already defined, cannot have cascading here

So, when you say data.newObject.Name = "Master Sword"; , the newObject should have been defined earlier (you already had a data object I assume). This is how it has to work (probably in every language that follows at least some semantics). To get around such a problem, you can always create a new generic object say:

var myComplexObject = function() { //add all reusable object constructors here  };

Populate your complex object any way you like, eg creating a new empty object in this constructor and add Prototypes to this constructor to expand the functionality. Write once and iterate forever over that. You could build a library suited to your requirements. That is how it should be done.

PS: Probably, for the checking part you could encapsulate in a try{}catch(e){} block.

Answer 2

The method push is located on a javascript Array object, unsurprisingly that method will not work on either null or undefined . This is the same for pretty much every programming language.

When calling data.newObject = {"Name": "Master Sword", "id":2} you are quite literally setting the property to a new object, this is a very different scenario to the above.

Answer 3

That´s because when you try to reference a key of an object, if that key doesn´t exist then that key will be kind of created and the undefined value will be assigned to it. undefined is just a JS Value type. If you want to check that "undefined" is not an error, just note that "undefined" is written with gray color on the console. (Errors have the red color).

If you assign an object to a key of other object, and you want to add properties to it, that won´t represent a problem at all.

But if you try to add a property to a key that can be initialized with undefined value, then it's reasonable that you will get an error message. Remember, JS allows you to store any value type you want on objects.

I suggest you to read a little bit more about objects, and the undefined value in JavaScript.

Hope that it helps.