06 Understanding Objects in JavaScript

Hey readers! Welcome to another blog of JavaScript series, in this blog we are going to discuss about the objects in JavaScript, why are they even required? what is the syntax to write it and looping on the objects as well.

As of now we know about the arrays in javaScript, so the question that comes in our mind is if array is already there then what is the requirement of the objects? well we can understand it with a example:

Suppose I want to store my name , age and city then using array this is i can store my details

const myDetails = ["shubh", 22, "jalandhar"];

Now lets try to store the same data in the object

const myDetails = {
    name : "Shubh",
    age : 22,
    city : "jalandhar"
}

When one you found more meaningful? obvoiusly the object one right? so this is why we need objects to store the data with meaning

So, Object is nothing just a collection of key-value pairs , where key is the label (like name, age, city ) and the value is actual data which we are storing "shubh" 22,"jalandhar")

Creating objects

we can create object using curly braces { }

const myDetails = {
    name : "Shubh",
    age : 22,
    city : "jalandhar"
}
console.log(myDetails)

Accessing properties

In the object we can access the properties using two notations

1. Dot Notation

const myDetails = {
    name : "Shubh",
    age : 22,
    city : "jalandhar"
}

console.log(myDetails.age);
console.log(myDetails.city);
console.log(myDetails.name);

1. Bracket Notation

const myDetails = {
    name : "Shubh",
    age : 22,
    city : "jalandhar"
}

console.log(myDetails['name']);
console.log(myDetails['age']);

Updating object properties

we can update the properties of the object like this

const myDetails = {
    name : "Shubh",
    age : 22,
    city : "jalandhar"
}

myDetails.age = 21,
console.log(myDetails);

Adding and Deleting properties

1. Adding property

   const myDetails = {
       name : "Shubh",
       age : 22,
       city : "jalandhar"
   }
   
   myDetails.salary = '10Lpa',
   console.log(myDetails);
   

2. Deleting property

   const myDetails = {
       name : "Shubh",
       age : 22,
       city : "jalandhar",
       salary : '10Lpa'
   }
   
   delete myDetails.salary
   console.log(myDetails);
   

Looping through object

to simply loop over the object we can use the for...in loop, like this:

const myDetails = {
    name : "Shubh",
    age : 22,
    city : "jalandhar",
    salary : '10Lpa'
}

for (const key in myDetails) {
    console.log(myDetails[key]);
}

// output :
/*
    Shubh
    22
    jalandhar
    10Lpa

*/

Array vs Objects

Try it yourself

Here are the questions that you can practice by your own

1. Create an object representing a student

2. Add properties like name, age, course

3. Update one property

4. Print all keys and values using a loop

Conclusion

Objects are used when we want give details with label

• Object : key-value pair

• values of the object are accesed using dot notation, brackets notation

• we can add, remove or update the values of the object

• for looping we have to use for...in through keys

Hope you enjoyed reading❤️