Adding, removing and iterating Object Properties | JavaScript & Object Oriented Programming | Part 9

In the Previous Tutorial we learned How to implement Abstraction in JavaScript. It was great to know that we can hide complexity from the end user and show them only essential details while declaring a Constructor Function.

In this tutorial we’ll have a closer look into object properties and learn the following –

  • Adding Object properties to an existing Object
  • When to use bracket notation to access object property?
  • Adding methods to an existing Object
  • Removing Object properties from an Object
  • Getting the list of object properties
  • Filtering the properties using typeof operator

Objects are dynamic in JavaScript. You can add or remove object members (property/method) anytime during the lifetime of objects.

How to add Object properties to an existing Object?

Let’s first write some code in myjs.js to create a car

function Car(make, model) {
    this.make = make;
    this.model = model;

    this.run = function() {
        console.log('Car is running');
    }
  }

  var car = new Car('Toyota', 'Corolla');

To add one new object property topSpeed all we need to do is use the assignment operator. Let us run this command in the browser console – 

car.topSpeed = 200;

Let us now try to access the car object in the console and verify if it has got one additional property – topSpeed

When to use bracket notation to access object property?

You can also access an object’s property by using bracket notation instead of dot notation. Both the below code are valid – 

car.topSpeed = 200;
car['topSpeed'] = 200;

When I can access an object property by using dot notation why the heck should I care about bracket notation?

Good question. I explained one of the reasons in This Tutorial. If your object property is not valid identifier (i.e has spaces) you cannot access them like this –

car.top speed = 200

Instead you’ll be forced to use bracket notation –

car['top speed'] = 200

You can also access a property by using a variable name. For instance lets say somewhere you have maintained the property name like this –

var topSpeedProp = 'top speed';

You can further use the value of this variable to access object property – 

car[topSpeedProp]

How to add methods to an existing Object?

Like we add object properties we can also add methods to an existing object. Lets add one new method playMusic() to our car object. This is how the updated myjs.js looks like –

function Car(make, model) {
    this.make = make;
    this.model = model;

    this.run = function() {
        console.log('Car is running');
    }
  }

  var car = new Car('Toyota', 'Corolla');

  car.playMusic = function() {
      console.log('Shape of you!!!!')
  }

Save the code, go to the browser console and check the car object if it has got the new method playMusic().

How to remove objects properties?

You can use delete operator to delete object property.

Lets go to chrome console and run the following command – 

delete car.make

Check if the make property is removed –

How to get the list of properties of an Object?

We can get the properties of an object by several ways. One of the way is to iterate over the list of properties by using for-in loop.

Let us write the code to iterate the list of properties of car and print the property name and its value – 

function Car(make, model) {
    this.make = make;
    this.model = model;

    this.run = function() {
        console.log('Car is running');
    }
  }

  var car = new Car('Toyota', 'Corolla');

  for(var key in car){
      console.log("Property Name: " + key);
      console.log("Property Value: " + car[key]);
  }

Save the code and verify the output in console.

Here is big big problem…

We can see the above code has iterated over all object members – properties and methods. What if we do not want methods, but only properties?

We can use typeof operator to check the type of the value of the key (object member). The typeof operator returns the value type which is function for a function value.

Here is how we can achieve it. 

if (typeof car[key] !== 'function')

Updated myjs.js

function Car(make, model) {
    this.make = make;
    this.model = model;

    this.run = function() {
        console.log('Car is running');
    }
  }

  var car = new Car('Toyota', 'Corolla');

  for(var key in car){
      if (typeof car[key] !== 'function'){
        console.log("Property Name: " + key);
        console.log("Property Value: " + car[key]);
      }
  }

Summary

  • Adding Object properties to an existing Object
  • When to use bracket notation to access object property?
  • Adding methods to an existing Object
  • Removing Object properties from an Object
  • Getting the list of object properties
  • Filtering the properties using typeof operator

In the Next Tutorial, we learn one useful thing to interact with Object properties – Getters and Setters in JavaScript

Leave a Reply