You know how arrays help you store collections of values and how array methods help you work with that data. But if you look at real-world applications, data is rarely just a list.
It usually looks something like this:
const user = {
name: "Shikhar",
age: 25,
city: "Delhi"
};
This is an object. And objects are everywhere in JavaScript.
If arrays represent lists, objects represent real-world entities.
What is an Object?
An object is a collection of key-value pairs. Each piece of data is stored with a name (key) and a value.
const person = {
name: "Shikhar",
age: 25,
city: "Delhi"
};
Here:
name,age,city→ keys"Shikhar",25,"Delhi"→ values
Why Do We Need Objects?
Let’s say you want to store user information.
Without objects:
let name = "Shikhar";
let age = 25;
let city = "Delhi";
This works, but there is no relationship between these variables.
Now with objects:
const user = {
name: "Shikhar",
age: 25,
city: "Delhi"
};
Now everything is grouped together logically.
This is how real-world data is structured.
Real-World Mental Model
Think of an object like a form:
Name: Shikhar
Age: 25
City: Delhi
Each field has a label and a value. That is exactly how objects work.
Creating Objects
Object Literal (Most Common)
const person = {
name: "Shikhar",
age: 25
};
Empty Object
const obj = {};
You can add values later.
Accessing Properties
There are two ways to access object properties.
Dot Notation
console.log(person.name);
This is the most common way.
Bracket Notation
console.log(person["age"]);
When to Use Bracket Notation
When the key is dynamic:
const key = "city";
console.log(person[key]);
Dot notation does not work here.
Updating Object Properties
person.age = 26;
console.log(person.age); // 26
Objects are mutable, so values can change.
Adding New Properties
person.country = "India";
Now the object becomes:
{
name: "Shikhar",
age: 26,
city: "Delhi",
country: "India"
}
Deleting Properties
delete person.city;
Removes the property completely.
Looping Through Objects
Objects are not iterable like arrays, but you can loop through their keys.
Using for...in
for (let key in person) {
console.log(key, person[key]);
}
Using Object.keys()
const keys = Object.keys(person);
for (let key of keys) {
console.log(key, person[key]);
}
Objects vs Arrays (Important Difference)
This is where many beginners get confused.
Array
const arr = ["Shikhar", 25, "Delhi"];
Ordered
Accessed by index
Object
const obj = {
name: "Shikhar",
age: 25,
city: "Delhi"
};
Unordered (conceptually)
Accessed by key
Key Difference
Arrays → when order matters
Objects → when meaning matters
Nested Objects
Objects can contain other objects.
const user = {
name: "Shikhar",
address: {
city: "Delhi",
pincode: 110001
}
};
console.log(user.address.city);
This is very common in APIs.
Objects Are Reference Types (Very Important)
const obj1 = { name: "Shikhar" };
const obj2 = obj1;
obj2.name = "Rahul";
console.log(obj1.name); // Rahul
Both variables point to the same object.
Object Methods (Functions Inside Objects)
const user = {
name: "Shikhar",
greet: function() {
console.log("Hello " + this.name);
}
};
user.greet();
Functions inside objects are called methods.
Real-World Example
const student = {
name: "Rahul",
age: 20,
course: "Computer Science"
};
student.age = 21;
for (let key in student) {
console.log(key + ": " + student[key]);
}
Common Mistakes
Using dot notation with dynamic keys
Forgetting objects are references
Confusing arrays and objects
Trying to use array methods directly on objects
Visual Understanding
Think of an object like this:
name → Shikhar
age → 25
city → Delhi
Each key maps to a value.
Array vs Object
Array → [value, value, value]
Object → { key: value }
Final Thought
Objects are not just another data structure. They are the foundation of how real-world data is represented in JavaScript. Every API response, every database record, every application state is built using objects.
If you understand objects well, everything that comes next becomes easier.
