Set Properties of an Object in JavaScript

We aleready have seen how to create an Object in the previous chapter.

From now on, we will create objects with literal notation.
When we create an empty object, somewhere in the programming, you will need to add a property or add a method to the object.
You can directly set the property into an object. Let us have a look at an example.


var vehicle = {
    name: "BMW",
    type: "Car",
    getOwner: function(){
        return "Owner of " + this.name + " is me.";
    },
    " ": "This is empty string",
    "$": "This is special Character",

};
                    

As you can see from the above code, You can add any type of string into the object directly. You also can add integer.

To set property or method, there are two ways to do that.

  • Dot Notation
  • Bracket Notation

Dot Notation


var vehicle = {};
vehicle.name = "BMW";
vehicle.type = "Car";
vehicle.getOwner = function(){
    return "Owner of " + this.name + " is me.";
};
console.log(vehicle.getOwner());
                    

In the above code, you can assign properties and method to object. And if the previous property already exists, then it will be overwritten.
While setting property through dot notation, the name of the property should be valid.

  • It should not have space, -, #, !, @ or a dot
  • It can have _, $
  • It can not be integer
You also can assign property/method to object which is the property of another object.
Let us have a look.


var person = {
};
person.name = {};
person.name.first = "John";
person.name.last = "Doe";
                    

As you can see object name is the property of person. Now to add property to name, you can use person.name.<propertyname>.

Bracket Notation

There is another way to set properties to object using Bracket Notation.
Let us have a look at an example.


var vehicle = {};
vehicle["name"] = "BMW";
vehicle["type"] = "Car";
vehicle["getOwner"] = function(){
    return "Owner of " + this.name + " is me.";
};

var emptyObj = {
    1: "This is not one"
};
emptyObj[1] = "This is one";
emptyObj["2"] = "This is two";
emptyObj[2] = "This is string two"; // This will overwrite emptyObj["2"].
//Both are same: emtpyObj["2"] and emptyObj[2]

emptyObj[" "] = "This is empty string";
emptyObj["$"] = "This is another string with special character";
emptyObj["space string"] = "This is string with space";
                    

As you can see from the above code, you can add all type of properties that can be added by dot notation but also can add some properties which can not be set by dot notation like

  • You can add any special character
  • You can add a string with space or add an empty string
  • You also can add an integer
To add properties of an object which is an object of another object by bracket notation, let us have a look at an example.


var person = {};
person["name"] = {};
person["name"]["first"] = "John";
person["name"]["last"] = "Doe";
                    

Access Properties

Once you set the properties, you will need to access it. There are two ways to do that.

  • Dot Notation
  • Bracket Notation

Dot Notation


var vehicle = {
    name: "BMW",
    type: "Car",
    getOwner: function(){
        return "Owner of " + this.name + " is me.";
    },
    " ": "This is emtpy string",
    "$": "This is $",
    "-": "This is -",
    "string with space": "This key have space"
};
console.log(vehicle.name); //output: "BMW"
console.log(vehicle.type); //output: "Car"
console.log(vehicle.getOwner()); //output: "Owner of BMW is me"
console.log(vehicle." "); //output: Error
console.log(vehicle.$); //output: This is $
console.log(vehicle."string with space"); // output: Error

var person = {
    name: {
        first: "John",
        last: "Doe"
    }
};
console.log(person.name.first); //outupt: "John"
console.log(person.name.last); //output: "Doe"
                    

As you can see from above code, which ever property you can set using dot notation can be access via dot notation.
You can not access properties which have an empty string, string with space which can not be accessed with dot notation.

Bracket Notation


var vehicle = {
    name: "BMW",
    type: "Car",
    getOwner: function(){
        return "Owner of " + this.name + " is me.";
    },
    " ": "This is emtpy string",
    "$": "This is $",
    "-": "This is -",
    "string with space": "This key have space"
};
console.log(vehicle["name"]); //output: "BMW"
console.log(vehicle["type"]); //output: "Car"
console.log(vehicle["getOwner"](); //output: "Owner of BMW is me"
console.log(vehicle[" "]); //output: "This is emtpy string"
console.log(vehicle["$"]); //output: This is $
console.log(vehicle["string with space"]); // output: "This key have space"

var person = {
    name: {
        first: "John",
        last: "Doe"
    }
};
console.log(person["name"]["first"]); //outupt: "John"
console.log(person["name"]["last"]); //output: "Doe"
                    

You can access any type of valid properties with bracket notation which can be set via bracket notation.

Advantages of Bracket Notation

There are advantages of using bracket notation.

  • You can access the properties which can not be accessed via dot notation.
  • You can use variables to access the properties.
Let us have a look at an example.


var vehicle = {
    name: "BMW",
    type: "Car",
    getOwner: function(){
        return "Owner of " + this.name + " is me.";
    },
    " ": "This is emtpy string",
    "$": "This is $",
    "-": "This is -",
    "string with space": "This key have space"
};

var propName = "name";

vehicle.propName; //output: undefined
vehicle[propName]; //output: "BMW"
                    

As you can see from above code, a variable propName = "name". So when you try vehicle.propName, it trie to access property propName which is not in vehicle object.
But when you write vehicle[propName], it evaluates to vehicle["name"] which finds "name" property in vehicle object.
But most of the times, you will be using dot notation because it is easy to use and you will not be setting special properties into an object, most of the times.

Conclusion

In this section, you have learned how to access and set properties into an object.
In next section, you will learn about methods in Object (built-in) in JavaScript.