JavaScript Property Accessors

By | March 25, 2021

JavaScript access property

There are two ways to get the property from an object “dot notation” and “bracket notation”.

dot notation

In the dot notation, we access the property of the object using the dot operator between the object name and property name. Although the concept of Object properties and their values resemble the identifier and values, but they are not becaue we can use a reserved keyword name for the object property name(not recommended) but not for the identifier.

Vamware

Syntax

object.property_name //for data values
object.property_name()  // for methods

Example

<script>
    var man = {
        name: "Rahul",
        age: 20,
        code: function(){return this.name.slice(0,3)+this.age}
    }
    //access using dot operator 
    document.write(man.name+ ", ");
    document.write(man.age);
    document.write("<br>");
    document.write("Code: "+man.code());
</script>

Output

Rahul, 20
Code: Rah20

Behind the code

In the above example the object man has 3 properties out of which code is the method, that returns a string value containing three letters from the name plus the age of the man object.

The this.name.slice(0,3) statement will slice out the first 3 letters from the this.name property. We will discuss the slice() and other built-in methods of JavaScript string in the upcoming tutorials.

Bracket notation

Bracket notation is another way of accessing or getting the properties from an object. In this technique, we use the property name inside the bracket quoted with single or double inverted quotes.

Syntax

object.property_name //for data values 
object["property_name"]() // for methods

Example

<script>
    var man = {
        name: "Rahul",
        age: 20,
        code: function(){return this.name.slice(0,3)+this.age}
    }
    //access using square bracketsr 
    document.write(man["name"]+ ", "); //using double quote
    document.write(man['age']);            // using single quote 
    document.write("<br>");
    document.write("Code: "+man['code']());
</script>

Output

Rahul, 20
Code: Rah20

Behind the code

When we use the Square brackets to get the object’s property we treat the property name as a string and put it in the square bracket after the object name.

We can either use the dot or square bracket notation to call get the property of an object but it always recommended to use dot notation when getting the object method.

JavaScript Object

We can also set new properties or values to the JavaScript object.

To set a new property we can either use the dot or square bracket notation with assignment operator (=).

Syntax

object.property_name = value;    //using dot operator
object["property_name"] = value; // using square brackets

While setting new property if the property name already exists, the value will be assigned to the already existed property name else it will create a new property.

Example

<script>
    var man = {
        name: "Rahul",
        age: 40,
    }
    //set property
    man.height ="6(ft)";
    man.kids  = 2;
    console.log(man); //{name: "Rahul", age: 40, height: "6(ft)", kids: 2}
</script>

If we assigned a new value to the new property that does not exist in the object, it will create a new property with the assigned value.

But if we assigned a new value to the already existing property, it will update the existing property value with the new value.

Example 2

<script>
    var man = {
        name: "Rahul",
        age: 40,
    }
    //set property
    man.age =20;   //update the existing property
    console.log(man);     // {name: "Rahul", age: 20}
</script>

Summary

  • There are two ways to access the properties from an object using dot notation and square bracket.
  • In the dot notation access, we access the property value using the dot operator between the object name and property name.
  • In the square bracket, we pass the property name as a string in the square bracket after the object name.
  • If assigned a value to a new object property it will create a new property in the object.
  • Else it will update the value for the already existing property.

Leave a Reply

Your email address will not be published. Required fields are marked *