Understanding JavaScripts Objects
JavaScript is one of the most popular programming languages used for web development. One of the most important concepts in JavaScript is Objects.
Objects help us store related data together in a structured way. In this article, we will understand what objects are, why they are useful, and how to work with them in JavaScript.
What Are Objects in JavaScript?
An object is a collection of data stored as key-value pairs.
Each piece of data has:
Key (property name)
Value (data stored in that property)
Think of an object like a real-world person.
Example:
Name: Parth
Age: 21
City: Hyderabad
In JavaScript, this can be stored like this:
const person = {
name: "Parth",
age: 21,
city: "Hyderabad"
};
Here:
name,age,city→ keys"Parth",21,"Hyderabad"→ values
So an object helps us group related information together.
Why Are Objects Needed?
If we store data separately, it becomes messy.
Example without object:
const name = "Parth";
const age = 21;
const city = "Hyderabad";
But these values are related to the same person. So objects help us organize them.
Advantages of objects:
Organize related data together
Make code more readable
Easy to update and manage data
Creating Objects
Objects are created using curly braces {}.
Example:
const person = {
name: "Rahul",
age: 20,
city: "Delhi"
};
Each property is written as:
key : value
Properties are separated using commas.
Accessing Object Properties
We can access object properties in two ways.
1️⃣ Dot Notation
console.log(person.name);
console.log(person.age);
Output:
Rahul
20
This is the most common way to access object properties.
2️⃣ Bracket Notation
console.log(person["city"]);
Output:
Delhi
Bracket notation is useful when:
Property name is dynamic
Property name has spaces
Updating Object Properties
We can change the value of a property easily.
Example:
person.age = 21;
console.log(person.age);
Output:
21
So we simply assign a new value.
Adding New Properties
We can also add new properties to an object.
Example:
person.country = "India";
console.log(person);
Output:
{
name: "Rahul",
age: 21,
city: "Delhi",
country: "India"
}
Deleting Properties
To remove a property we use the delete keyword.
Example:
delete person.city;
console.log(person);
Now the city property will be removed.
Looping Through Object Keys
To iterate over object properties we use a for...in loop.
Example:
const person = {
name: "Rahul",
age: 21,
city: "Delhi"
};
for (let key in person) {
console.log(key, person[key]);
}
Output:
name Rahul
age 21
city Delhi
Here:
keyrepresents the property nameperson[key]gives the value
Array vs Object
Arrays and objects both store data, but they are used differently.
| Array | Object |
|---|---|
| Uses index numbers | Uses keys |
| Ordered collection | Key-value structure |
Example: [10, 20, 30] |
Example: {name: "Rahul"} |
Example:
const numbers = [10, 20, 30]; // array
const person = { name: "Rahul", age: 21 }; // object
Arrays are best for lists, while objects are best for structured data.
Assignment Example: Student Object
Let’s create an object representing a student.
const student = {
name: "Aman",
age: 19,
course: "Computer Science"
};
Update a property
student.age = 20;
Print all keys and values
for (let key in student) {
console.log(key + ": " + student[key]);
}
Output:
name: Aman
age: 20
course: Computer Science
Visual Representation of an Object
person
├── name → "Rahul"
├── age → 21
└── city → "Delhi"
Each key points to a value.
Conclusion
Objects are one of the most powerful features of JavaScript. They allow us to store related information together using key-value pairs.
In this article, we learned:
What objects are
How to create objects
Accessing properties
Updating and deleting properties
Looping through objects
Difference between arrays and objects
Understanding objects is an important step toward mastering JavaScript and building real-world applications.