Javascript Objects – Understanding Key -Value Pair Of Javascript

First of all, What is a Javascript object?

A Javascript objects is a collection of properties. Each property has a pair of key and value. Where key refers to the property name and value is the actual value of the property.

Why we use objects?

For example, you want to store all the specifications of mobile in Javascript. How do you do that?

Of course, you use variables to store. But, you need to create multiple variables. For each specification, you need to create a separate variable.

It’s not a good practice. That’s why the Javascript objects are there.

Javascript object stores different values of one type.

If you use objects, you don’t need to create multiple variables.

For example, I want to store the specifications of iPhone X.

Let’s see how can we store them using variables.

var mobile_model = ' iPhone X ';
var mobile_ram = '3GB';
var mobile_storage = '64GB';
var mobile_camera = '12+12 MP Dual rear camera';
var mobile_display = '14.73 centimeters (5.8-inch)';
var mobile_os = 'iOS v11.1.1';
var mobile_battery = '2716 mAH lithium ion battery ';
var mobile_warrenty = '1 year';

Consider the above code, for each feature of mobile, we create a new variable. It’s not looking like a good programming practice.

Let’s write the above code using objects.

var mobile = {
    model : ' iPhone X ',
    ram : '3GB',
    storage : '64GB',
    camera : '12+12 MP Dual rear camera',
    display :'14.73 centimeters (5.8-inch)',
    battery :'2716 mAH lithium ion battery '
    os :'iOS v11.1.1',    
    warrenty : '1 year'
};

Have a look at the above code. How clean and neat it was, compared to the first one. In the above code, we create an object called mobile and added all the features as properties.

Ok! Let’s jump into the actual concept.

How to create an object?

The simple way to create an object is to write all the object properties within a flower brackets { }. The properties must be separated with a comma (,) operator.

See the syntax below.

{ key1 :  value1, key2 : value2, key3 : value3 };

For Example, Let’s create an empty object.

//creating an object with no properties

var obj = { } ;

In the above example, variable obj holds an object, without having any properties.

//creating an object with properties

var obj = { name : 'shiva', age : 23, grade : 'A' };
Creating an object with an object constructor

You can also create an object by using the new keyword.

Syntax:

var object_name = new Object();

Example:

var obj = new Object();
//returns { }
How to insert properties to an object?

To insert properties to an object, follow the below syntax.

object_name.property_key = property_value;

Here the property_key is the name of the property and the property_value is the value of the property.

For Example:

var user = { }; // creating an empty object
user.name = 'Joovin South'; // adding name property to the object
user.age = 23; // adding age property to the object
console.log(user); // displaying user object

//prints {name:'Joovin South', age:23}
Accessing object properties.

To access an object property, write the object name and period along with property_name.

Syntax:

object_name.property_name;

For Example:

var user = { name : ' Joovin South', age:23 };

console.log(user.name); // accessing name property of user object
//displays 'Joovin South' 
Iterating object properties

There is a special looping statement in javascript to iterate through the javascript objects. And it is for/in loop.

Iterating object properties using for/in loop

var mobile = {
    model : ' iPhone X ',
    ram : '3GB',
    storage : '64GB',
    camera : '12+12 MP Dual rear camera',
    display :'14.73 centimeters (5.8-inch)',
    battery :'2716 mAH lithium ion battery '
    os :'iOS v11.1.1',    
    warrenty : '1 year'
}; //mobile object

//iterate all the properties of the mobile object using for/in loop.

for(var prop in  mobile){
    console.log(prop + " ===> " + mobile[prop]);
};

// output 
model ===>  iPhone X 
ram ===> 3GB
storage ===> 64GB
camera ===> 12+12 MP Dual rear camera
display ===> 14.73 centimeters (5.8-inch)
battery ===> 2716 mAH lithium ion battery 
os ===> iOS v11.1.1
warrenty ===> 1 year

It may be a bit handy to understand if you don’t know looping statements.

But, don’t’ worry it’s an easy statement and easy to understand.

In the above example, the loop iterates all the properties of an object and display each property one by one. At the looping stage, it doesn’t store the property value, it stores only the property key.

So, we need to access the object property using that key.

To read more about looping statement click the link below.

Looping statement in javascript

Property value types

A property value can be any form of javascript value. It can be a string value, number, boolean, array or even function.

For Example:

var obj = {
       name : 'Joovin South',
       marks : [60,70,80],
       grade : function(){
                  console.log(" A grade ");
                },
       passed : true
};

In the above example, I store the string, array, boolean and function as an object property in obj.

To access function property of an object you need to call like below.

obj.grade();

Finally, I am hoping! now you understand the concept of Javascript objects and how to use them.

If you like this article, please share with your friends and if you have any doubts feel free to comment below.

Try my other Javascript tutorials.

  1. Learn javascript in one-day
  2. Javascript operators
  3. Learn how the Javascript stores the data – Javascript variables
  4. Javascript strings
  5. 20 Javascript string methods that every developer must know

 

Thanks for reading!

Was this post helpful?
Let us know if you liked the post. That’s the only way we can improve.
Yes0
No0
Powered by Pixelbart

Leave a Reply

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