JavaScript Objects: The object we must have!

Most of us have gone for vegetable shopping or shopping in general, didn't we?

For shopping we need a bag to hold the bought items. Oh! so we already know what objects are.

What are objects?

Just like a bag, an object can hold multiple data items in the form of key:value pairs. When we buy 2 kg of tomatoes, the unique item in the bag is tomato and the value is it's quantity. In the similar fashion, objects have unique keys but can have same values across different keys.

How to create an object in Javascript?

1. let bag = {};
2. let bag = new Object();

This is how easy it is to create a beautiful Javascript object. We can use either of them!

Do we remember it acts as a bag? Yes we do, awesome!

So you must be saying I also remember that objects should be in key: value pairs.

so now let's see how an object can be created,

let bag = {
    maggiePackets: 3,
    milkCans: 2,
};

so the bag here is an object, containing different keys like maggiePackets, milkCans which have values 3 and 2 respectively.

In short,

let objectName = {
  key1 : value1,  
  key2 : value2,
  keyN : valueN,
};

We can always add or remove an object from the bag while shopping, similarly we can also add or remove a data item from the object.

Note - Each key : value pair is a property of the object.

How to read or access a property of an object?

Properties can be read using 2 notations.

1. Dot (.) notation

2. Bracket [] notation

This was our object, remember?

let bag = {
    maggiePackets: 3,
    milkCans: 2,
};

Now let's learn to access or read the properties,

1. Using dot notation

bag.maggiePackets;
// Output -> 3

bag.milkCans;
// Output -> 2

bag.maggiePackets();
// Output -> 3

bag.milkCans();
// Output -> 2

1. Using bracket notation

bag["maggiePackets"];
// Output -> 3

bag["milkCans"];
// Output -> 2

bag["maggiePackets"]();
// Output -> 3

bag["milkCans"]();
// Output -> 2

You must be thinking, when we have dot notation then why do we need bracket notation then?

let bag = {
    maggiePackets: 3,
    milkCans: 2,
};

let key = "maggiePackets";

bag.key;
// Output -> undefined

bag[key];
// Output -> 3

Note -> (.) Dot notation cannot be used in such conditions when you are assigning key with a string, whereas bracket [] notation should be used.

How to delete a property from an object?

Imagine now your mum says, hey! we do not need "maggiePackets" and orders you to remove it out of bag. So now just alike when you need to delete the "maggiePackets" property from your bag object, you will use delete keyword to delete maggiePackets out of your object.

C'mon! let's do hands on.

let bag = {
    maggiePackets: 3,
    milkCans: 2,
};

delete bag.maggiePackets;
// returns true

or

delete bag["maggiePackets"]
// returns true

Before deletion, the value was 3, after the deletion the value will become undefined

How to traverse an object like a pro!

To traverse an object we need to use for in loop

let bag = {
    maggiePackets: 3,
    milkCans: 2,
};

 // Object properties are always in
// key : value pairs

for(let key in bag) {
   console.log(key + " : " + bag[key]);
}
  // Output ->
  // maggiePackets : 3
  // milkCans : 2

ex -
 for(let key in objectName) {
      key -> To access key
      objectName[key] -> To access value against particular key          
 }

Thank you for being with me till now, if you have enjoyed reading this, kindly share the article with the needy & remember to give a follow back!