Deep dive into Object Literals | JavaScript & Object Oriented Programming | Part 4

In the Previous Tutorial, we learned the following –

• What is an Object?
• Different ways to create objects
• What is an Object Literal?
• How to create object by using Object Literal?
• How to access object properties?
• How to declare and call methods?

In this tutorial, we will deep dive into the world of objects and learn new things.

To run the examples of this tutorial you would need to setup your environment by following This Tutorial. Do not worry, it’s a quick 2 mins job. JavaScript doesn’t require lot of configurations.

Using Object Literal as the object property

As discussed at the start of this tutorial a JavaScript object is really powerful. The value of a property can also be another object. Let’s update myjs.js file and write an object that would resemble a real-world complex scenario.

var car = {
    brand: {
      make: 'Volkswagen',
      model: 'Golf'
    },
    selectedGear: 1,

    run: function(){
      console.log('Car is running... Gear ' + this.selectedGear);
    }
  };

In this example the value of brand property is a new object literal which has two properties – make and model.

Did you Notice?

If you want to refer object properties inside the method you MUST refer it by using this keyword as discussed in the Previous Tutorial.

Inside run(), we accessed the selectedGear property of the object that invoked run(). We used the dot notation with this keyword to reference current object.

this.selectedGear

Save the file, go to the browser console and enter this command –

car.brand.make

You should see the message in the console.

Volkswagen

Did you Notice?

We accessed nested object properties with dot notation in this fashion – car.brand.make. The nesting can be multileveled – obj.propx.propy.propz

Using existing object as an object property

You can also have an existing object as the value of another objects property. In the below example we have created two object literals brandDetails and car. Let’s update myjs.js

var brandDetails = {
    make: 'Volkswagen',
    model: 'Golf'
  }
  
  var car = {
      brand: brandDetails,
      selectedGear: 1,
  
      run: function(){
        console.log('Car is running... Gear ' + this.selectedGear);
        }
    };
  
    console.log(car.brand.make);

I hope you now see the following message –

Volkswagen

Do you Know?

In ES6, if you have variables with the same name as the property names, you can also omit the colon and the value. Notice how we omitted colon and value from the brand property in the below example –

var brand = {
    make: 'Volkswagen',
    model: 'Golf'
  }
  
  var car = {
      brand,
      selectedGear: 1,
  
      run: function(){
        console.log('Car is running... Gear ' + this.selectedGear);
        }
    };
  
    console.log(car.brand.make);

Create methods to update properties

In the above example to change the gear, technically, you can run this command –

car.selectedGear = 2

and then if you run this command – 

car.run()

you can see the car is running with the changed gear. But this is a very pad practice.

You should never expose your object properties outside to the users of your object. Instead you should use methods for getting and setting data.

While discussing Data Abstraction, I’ll explain how we can hide object properties. For now let’s focus on creating a method that can change gear.

changeGear: function(gear) {
            console.log('Changing gear to ' + gear);
          this.selectedGear = gear;
      }

Updated myjs.js

var brand = {
    make: 'Volkswagen',
    model: 'Golf'
  }
  
  var car = {
      brand: brand,
      selectedGear: 1,
  
      run: function(){
        console.log('Car is running... Gear ' + this.selectedGear);
      },

      changeGear: function(gear) {
        console.log('Changing gear to ' + gear);
        this.selectedGear = gear;
      }
    };
  
    console.log(car.run());
    car.changeGear(2);
    console.log(car.run());

Save the code and check browser console.

Car is running... Gear 1
Changing gear to 2
Car is running... Gear 2

Summary

• Using Object Literal as the object property
• Using an existing object as an object property
• Omitting colon and value from the property if the value variable is having the same name as the property
• Why you should create methods to update properties

Congratulations, we learned a lot of stuffs in this tutorial. Let’s learn a new way to create objects in the Next Tutorial.