DEV Community

Cover image for Understanding Objects in JavaScript
Ritam Saha
Ritam Saha

Posted on

Understanding Objects in JavaScript

#webdev #javascript #programming #beginners

Introduction

Hello, fellow coders!

Imagine you’re filling your Voter form. You don’t write everything in one long paragraph, right? You neatly fill:

Name: Rahul Sharma
Age: 28
City: Mumbai....

That’s exactly what a JavaScript Object does – it stores related information in clean key-value pairs, just like a bio-data!

Whether you’re building a college student portal, a Zomato-like food app, or even a shaadi.com style matrimonial site, objects are the backbone. They keep your data organised like a joint family living happily under one roof.

In this blog, we’ll cover everything from scratch with super-simple examples and real-life analogies. Let’s turn you into an object expert by the end!

What are Objects?

In JavaScript, an object is a non-primitive data type that is simply a dynamic collection of key-value pairs.

  • Key = the label (like “name”, “age”, “city”). Can be string or symbol
  • Value = the actual data (like “Rahul Sharma”, 28, “Mumbai”) which can be of any data-type even an object itself

An object is a self-contained unit that combines data (properties) and behavior (functions/methods).

Think of it as your grandma’s old “khata” (account book) or a neatly filled Aadhaar form — everything is stored with its own clear label so you can find any detail instantly without confusion.

Why Do We Need Objects?

Imagine you are building a big college student management app and you need to store details of 100 students.
Without objects and arrays, most beginners start declaring hundreds of separate variables like this:

let student1Name = "Rahul Sharma";
let student1Age = 20;
let student1Course = "B.Tech";
let student1City = "Kolkata";

let student2Name = "Priya Patel";
let student2Age = 21;
// ... and 96 more students!
Enter fullscreen mode Exit fullscreen mode

Managing 100+ loose variables becomes a nightmare!

  • The code looks messy and unorganised (like a house where every family member’s clothes are scattered everywhere).
  • If you forget to use const and use let instead, anyone (or even your own code by mistake) can change the values anytime: 
student1Age = 50;     // Oops! Someone accidentally changed the age
student1Course = "MBBS";  // Data got corrupted
Enter fullscreen mode Exit fullscreen mode

In a real project, this kind of accidental manipulation can create serious bugs — wrong marks displayed, wrong fees calculated, or even wrong student records shown to parents.

Even if you try to group everything into arrays to reduce the number of variables, new problems appear:

let student1 = ["Rahul Sharma", 20, "B.Tech", "Kolkata"];
Enter fullscreen mode Exit fullscreen mode

Now you have to remember that index 0 is always name, index 1 is age, index 2 is course… and which variable storing which student's data!! Nightmare!

  • What if someone adds or removes a field? All indices after that shift and your entire code breaks.
  • In a team project or after 2–3 months, even you will forget “Was index 3 city or hobby?”
  • Printing or updating specific details becomes confusing and error-prone.

This is exactly why we need objects. They solve all these headaches in one go — they keep related data together with meaningful labels, prevent accidental mix-ups, and make your code clean, safe, and easy to manage, just like a well-organised Indian joint family where everyone knows exactly which cupboard belongs to whom.
Objects turn chaos into order. That’s why almost every real-world JavaScript app (student portals, Zomato, Paytm, matrimonial sites) uses them heavily.

Creating Objects

The easiest way – use curly braces{}:

const person = {
  name: "Rahul Sharma",
  age: 28,
  city: "Mumbai",
  isMarried: false
};

console.log(person);
Enter fullscreen mode Exit fullscreen mode

You can also create an empty object first (like keeping a blank beforehand):

const person = {}; // empty object
// then fill it later
Enter fullscreen mode Exit fullscreen mode

Accessing Properties – two simple ways!

Dot Notation: Most common way to access the property. When you know the property key directly and it follows standard JavaScript identifier rules.

console.log(person.name); // "Rahul Sharma"
console.log(person.age); // 28
Enter fullscreen mode Exit fullscreen mode

Bracket Notation : This is less commonly used, but when you need to access properties dynamically, this is the only way to access or set a property. You wrap the property name, represented as a string, inside square brackets [].

const key = "city";
console.log(person[key]);     // "Mumbai"
Enter fullscreen mode Exit fullscreen mode

Updating Object Properties

You can use dot notation or bracket notation to assign a new value. By this you can modify any property of the actual object.

person.age = 29;             // age changed from 28 to 29
person.city = "Pune";        // city changed from 'Mumbai' to 'Pune'
Enter fullscreen mode Exit fullscreen mode

Adding & Deleting Properties

We can also add new properties to an object by the same two ways - dot notation and bracket notation.

person.country = "India"
Enter fullscreen mode Exit fullscreen mode

Now the object becomes:

{
  name: "Rahul Sharma",
  age: 29,
  city: "Pune",
  isMarried: false,
  country: "India",
}
Enter fullscreen mode Exit fullscreen mode

To remove a property completely from an object, we use the delete keyword. It removes the whole key-value pair.

delete person.isMarried;
Enter fullscreen mode Exit fullscreen mode

Output:

{
  name: "Rahul Sharma",
  age: 29,
  city: "Pune",
  country: "India",
}
Enter fullscreen mode Exit fullscreen mode

Looping through object keys

Since objects don't have default numerical keys like arrays, we use the for...in loop to iterate through their keys.

Example:

for (let key in person) {
  console.log(key + " : " + person[key]);
}
Enter fullscreen mode Exit fullscreen mode

Output:

name : Rahul Sharma
age : 29
city : Pune
country : India
Enter fullscreen mode Exit fullscreen mode

Array vs Object – The Crystal Clear Difference

This is the part most beginners get confused about, so let’s make it super clear:

Feature Array (Queue/List) Object
Order Very important (index 0, 1, 2…) Order doesn’t matter
How you access By number: fruits[0] By key: person.name
Real-life example Queue at chaiwala or temple prasad line Your Aadhaar card or PAN details
When to use List of marks, friends, mangoes Details of ONE person, student, product
Can you add own keys? No – default 0-based indexing Yes – custom keys like “hobby”, “city”

Bottom line: Use array when order matters. Use object when you want meaningful labels.

Conclusion: Objects – Your New Best Friend in JavaScript

You’ve now mastered the basics of JavaScript objects – the most used feature in real-world coding.
From storing a person’s details to building entire apps, objects keep your code clean, readable, and super flexible – just like a well-organised Indian household.

Remember:

  • Arrays = lists
  • Objects = meaningful details

If you enjoyed this, share it with your college group or colleagues and tag a friend who still thinks arrays and objects are the same thing or doesn't get bothered!

Top comments (0)