Javascript Object Properties

By | October 1, 2021
JavaScript Object Properties

Properties are the technical term for JavaScript name:value pairs.

JavaScript Properties

In the previous JavaScript tutorial, we learned what is an Object in JavaScript and how we define them.

Vamware

Just for a quick reference, a JavaScript object is a collection of name:valuepairs separated with commas, inside curly brackets.

We can treat the individual name:value pair as a property of the Object. And we can access, change, add, and delete properties from the object.

Accessing JavaScript Properties 

There are two ways we can access the properties from the Object.

Using the object . operator followed by property name.

object_name.property_name

Using the property name inside the square bracket.

object_name["property_name"]

Example

<script>
    var man = {name:"Rahul", age:24};
    //using . operator
    document.write(man.name + "  " + man.age); //Rahul 24
    document.write("<br>")// new line
    //using sq bracket
    document.write(man["name"] + "  " + man["age"]) //Rahul 24
</script>

Output

Rahul 24
Rahul 24

Change the property

We can also change the value of a property name, by accessing the property and assigning a new value to it.

Example 

<script>
    var man = {name:"Rahul", age:24};
    //change property value
    man.age =30;
    document.write(man.name + "  " + man.age); //Rahul 30
</script>

Output

Rahul 30

Add new Property

Similar to updating the property we can add a new property to the object using dot or square brackets.

To add a new property we need to specify the new property name and its value. If we try to add a new property with an already existing name then instead of creating new property it will update or change the old one.

Example 

<script>
    var man = {name:"Rahul", age:24};
    man.gender = "Male";  //or man["gender"] ="Male"
    document.write(man.name+" "+ "("+man.gender+")");
</script>

Output

Rahul (Male)

Delete property

let say we wish to delete a property from the object for that we can use the delete keyword followed by the object property.

<script>
    var man = {name:"Rahul", age:24};

    delete man.age; // delete man age property

    console.log(man);
</script>

Output

{name: "Rahul"}

The delete keyword will delete the property name as well as its value from the object.

Summary

  • The object is a container that can store multiple name:value pairs.
  •  All the name:value pairs are of the object are known as properties.
  • We can access, add, delete and change the object properties.
  • The delete keyword will delete the property form the object.

People are also reading:

Leave a Reply

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