How to access JavaScript Object properties ?

Hello Folks !

Let's know how to access a JavaScript object ? Wait !! But first what does a JavaScript object mean ?

JavaScript object is a standalone entity that holds multiple values in terms of properties and methods.

Confusing ?

JavaScript Object is just a variable with an additional advantage to store many values. Let's take an example. As you know a variable can contain only one value, like this,

var car = 'Porsche' ;
console.log(car);       // prints Porsche

Now , what if you want to store more information about the same car like model, price and color. Of course you can store that information using more variables , but what happens when you need to store the information about more than 30 cars for your
car-expo website ? Too many variables to keep track off right ?

Here comes JavaScript Objects for rescue !! [ To infinity and beyond 😉 ]

We can store more information related to a single car in a single object , in this way :

var carOne = {
        name : "Porsche" ,
        color : "Velvet Red " ,
        model : "Taycan"
};

Looks easy to maintain right ? Here , an object is written as a collection of name : value pairs ( separated by ' , ' ) which are called properties.

In the above example, carOne object has 3 properties namely : name, color and model. Next , let us access these properties.

There are 2 ways to access the properties of an object -

Dot Notation ( . )
Bracket Notation ( [ ] )

Let's have a look at both of them.

Dot Notation

This is usually used when you know the name of the property you're trying to access. Carrying on with the same car example :

var carOne = {
        name : "Porsche" ,
        color : "Velvet Red" ,
        model : "Taycan"
};

var carName = carOne.name ;
var carColor = carOne.color ;
var carModel = carOne.model ;

Here , variable carName would have a value of the string Porsche , similarly carColor and carModel would have values Velvet Red and Taycan respectively.

Bracket Notation

This notation is used when there is a blank space in between the property name you are trying to access.

Here's another example :

var bike = {
        "name" : "Royal Enfield Classic 350" ,
        "color" : "Classic Black",
        "Average Rating" : "4.5"
};

var bikeName = bike["name"];
var bikeAvgRating = bike["Average Rating"];

Variable bikeName would have a value of the string Royal Enfield Classic 350 and bikeAvgRating would have a value of 4.5.

But how will you know if a certain property exists or not for an object.

We can use .hasOwnProperty(propertyName) method of objects to determine if that object has the given property name. The method returns true or false if the property is found or not.

For Example,

var song = {
        name: "Dynamite",
        genre: "Hip-Hop",
};

var hasSongName = song.hasOwnProperty("name");
var hasReleasedDate = song.hasOwnProperty("Released");

Here , variable hasSongName will have boolean value true and hasReleasedDate will have boolean value false as there is no property called "Released" in the song object.

In conclusion , JavaScript object and its properties make information or data to be accessed faster, stored systematically, maintained with ease and retrieve data in a simpler way.