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
- Dot Notation
const myDetails = {
name : "Shubh",
age : 22,
city : "jalandhar"
}
console.log(myDetails.age);
console.log(myDetails.city);
console.log(myDetails.name);
- 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
Adding property
const myDetails = {
name : "Shubh",
age : 22,
city : "jalandhar"
}
myDetails.salary = '10Lpa',
console.log(myDetails);
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
| Feature |
JavaScript Arrays |
JavaScript Objects |
| Index Type |
Numeric indexes (0, 1, 2, ...) |
Named keys (strings or symbols) |
| Order |
Ordered collection |
Unordered collection |
| Use Case |
Storing lists, sequences, ordered data |
Storing data with key-value pairs, attributes |
| Accessing Elements |
Accessed by index (e.g., arr[0]) |
Accessed by key (e.g., obj["key"]) |
| Iteration |
Typically iterated using loops like for or forEach |
Iterated using for...in, Object.keys(), or Object.entries() |
Try it yourself
Here are the questions that you can practice by your own
Create an object representing a student
Add properties like name, age, course
Update one property
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❤️
