Understanding Objects in JavaScript

The data structure that mirrors the real world — and the backbone of nearly everything in JS.

---

In my last article, we talked about arrays — ordered lists of values accessed by index. Arrays are great when you have a collection of similar things: a list of fruits, a bunch of scores, a set of tasks. But what happens when you need to describe a single thing with multiple properties?

Let's say I want to represent myself in code. I have a name, an age, a city, an email, and a skill set. Do I create five separate variables? Do I shove them all into an array?

// Option 1: Separate variables — messy, no connection between them
let name = "Pratham";
let age = 22;
let city = "Delhi";

// Option 2: An array — but what does index 0 mean? What's index 2?
let person = ["Pratham", 22, "Delhi"];
// person[0]? Is that the name? The age? No way to tell without checking.

Neither option is great. What you actually want is a way to label each piece of data. And that's exactly what objects give you.

---

What Is an Object?

An object is a collection of key-value pairs. Each key is a label (also called a property name), and each value is the data associated with that label.

Think of it like an ID card. Your ID card doesn't just dump random values — it organizes them:

┌──────────────────────────────┐
│         ID CARD              │
├──────────────┬───────────────┤
│  Name        │  Pratham      │
│  Age         │  22           │
│  City        │  Delhi        │
│  IsStudent   │  true         │
│  Email       │  pratham@...  │
└──────────────┴───────────────┘
   (keys)          (values)

Every piece of information has a name (key) and a value. You don't need to remember positions — you just ask for the property by name. "What's the person's city?" → person.city. Clear, readable, intuitive.

---

Why Do We Need Objects?

Let me make the case with a direct comparison.

Without Objects — Disconnected Variables

let studentName = "Pratham";
let studentAge = 22;
let studentCourse = "Web Dev Cohort 2026";
let studentIsActive = true;

These variables happen to be about the same student, but JavaScript doesn't know that. They're four completely unrelated values floating around in your code.

With an Object — Everything Together

let student = {
  name: "Pratham",
  age: 22,
  course: "Web Dev Cohort 2026",
  isActive: true
};

Now all the data about this student is bundled into one variable. You can pass student to a function, log it, send it to an API — it travels as one cohesive unit. That's the power of objects.

---

Creating Objects

The most common way to create an object is with object literal syntax — curly braces {} with key-value pairs inside.

Syntax

let objectName = {
  key1: value1,
  key2: value2,
  key3: value3
};

Rules for Keys and Values

• Keys are always strings (or Symbols, but ignore that for now). If the key is a simple word, you don't need quotes.
• Values can be anything — strings, numbers, booleans, arrays, even other objects.

Examples

// A person object
let person = {
  name: "Pratham",
  age: 22,
  city: "Delhi",
  isStudent: true
};

// An object with an array as a value
let developer = {
  name: "Pratham",
  skills: ["JavaScript", "React", "Node.js"],
  yearsOfExperience: 1
};

// An empty object (you'll add properties later)
let config = {};

Key-Value Structure — Visual

let person = {
    name: "Pratham",      ←  key: "name"       value: "Pratham"
    age: 22,              ←  key: "age"        value: 22
    city: "Delhi",        ←  key: "city"       value: "Delhi"
    isStudent: true       ←  key: "isStudent"  value: true
};

Each line inside the object is a property. A property = a key + a value. That's the whole structure.

---

Accessing Properties

You have two ways to access the value of a property: dot notation and bracket notation.

Dot Notation — The Clean Way

let person = {
  name: "Pratham",
  age: 22,
  city: "Delhi"
};

console.log(person.name); // "Pratham"
console.log(person.age);  // 22
console.log(person.city); // "Delhi"

Dot notation is what you'll use 90% of the time. It's clean, readable, and easy to type.

Bracket Notation — The Flexible Way

console.log(person["name"]); // "Pratham"
console.log(person["age"]);  // 22
console.log(person["city"]); // "Delhi"

Bracket notation uses a string inside square brackets. It looks a bit like array indexing, but instead of a number, you use the property name as a string.

When Do You Actually Need Bracket Notation?

Dot notation has a limitation: the key must be a valid JavaScript identifier (no spaces, no starting with numbers, no special characters). Bracket notation handles all of these:

let product = {
  "product-name": "Laptop",       // Has a hyphen — dot won't work
  "price in INR": 75000,          // Has spaces — dot won't work
  2024: "Current year"            // Starts with a number — dot won't work
};

// console.log(product.product-name);   // ❌ SyntaxError
console.log(product["product-name"]);   // ✅ "Laptop"
console.log(product["price in INR"]);   // ✅ 75000
console.log(product[2024]);             // ✅ "Current year"

And here's the other big use case — dynamic property access using a variable:

let person = {
  name: "Pratham",
  age: 22,
  city: "Delhi"
};

let key = "name";
console.log(person[key]);   // "Pratham" ✅
// console.log(person.key); // undefined ❌ — looks for a property literally named "key"

This is hugely important when you don't know the property name ahead of time — like when you're looping through keys or reading user input.

Quick Comparison

Feature	Dot Notation	Bracket Notation
Syntax	obj.key	obj["key"]
Readability	✅ Cleaner	Slightly verbose
Dynamic keys (variables)	❌ No	✅ Yes
Keys with spaces/hyphens	❌ No	✅ Yes
When to use	Most of the time	Dynamic or unusual keys

---

Updating Object Properties

Changing a property value is straightforward — just assign a new value to the key.

let person = {
  name: "Pratham",
  age: 22,
  city: "Delhi"
};

// Updating the city
person.city = "Gurugram";
console.log(person.city); // "Gurugram"

// Updating the age
person.age = 23;
console.log(person.age); // 23

console.log(person);
// { name: "Pratham", age: 23, city: "Gurugram" }

Works with bracket notation too:

person["city"] = "Mumbai";
console.log(person.city); // "Mumbai"

The original object is modified directly. Objects in JavaScript are mutable — you change them in place.

---

Adding and Deleting Properties

Objects in JavaScript aren't fixed. You can add new properties and remove existing ones at any time.

Adding a New Property

Just assign a value to a key that doesn't exist yet. JavaScript will create it for you.

let person = {
  name: "Pratham",
  age: 22
};

// Adding new properties
person.city = "Delhi";
person.isStudent = true;
person.skills = ["JavaScript", "React"];

console.log(person);
// {
//   name: "Pratham",
//   age: 22,
//   city: "Delhi",
//   isStudent: true,
//   skills: ["JavaScript", "React"]
// }

Deleting a Property

Use the delete keyword:

let person = {
  name: "Pratham",
  age: 22,
  city: "Delhi",
  tempNote: "Remove this later"
};

delete person.tempNote;

console.log(person);
// { name: "Pratham", age: 22, city: "Delhi" }
// tempNote is completely gone

delete removes the property entirely — not just the value, but the key too. After deletion, person.tempNote would return undefined, and the key won't show up if you loop through the object.

Visual: Before and After

BEFORE delete:                      AFTER delete person.tempNote:
┌──────────┬───────────────────┐    ┌──────────┬───────────────────┐
│ name     │ "Pratham"         │    │ name     │ "Pratham"         │
│ age      │ 22                │    │ age      │ 22                │
│ city     │ "Delhi"           │    │ city     │ "Delhi"           │
│ tempNote │ "Remove this..."  │    └──────────┴───────────────────┘
└──────────┴───────────────────┘     (tempNote is gone — not just empty, GONE)

---

Looping Through Object Keys

Unlike arrays, you can't use a regular for loop with an index to iterate over objects. Objects don't have numeric indexes. Instead, you use for...in or Object.keys().

Method 1: for...in Loop

let student = {
  name: "Pratham",
  age: 22,
  course: "Web Dev Cohort 2026",
  isActive: true
};

for (let key in student) {
  console.log(key + ": " + student[key]);
}
// name: Pratham
// age: 22
// course: Web Dev Cohort 2026
// isActive: true

Notice that inside the loop, key is a string (the property name), so you must use bracket notation student[key] to access the value. student.key would look for a literal property named "key" and return undefined.

Method 2: Object.keys() + for...of

Object.keys() returns an array of the object's keys, which you can then loop through:

let student = {
  name: "Pratham",
  age: 22,
  course: "Web Dev Cohort 2026"
};

let keys = Object.keys(student);
console.log(keys); // ["name", "age", "course"]

for (let key of keys) {
  console.log(key + " → " + student[key]);
}
// name → Pratham
// age → 22
// course → Web Dev Cohort 2026

Method 3: Object.values() — Just the Values

If you only care about the values and not the keys:

let student = {
  name: "Pratham",
  age: 22,
  course: "Web Dev Cohort 2026"
};

let values = Object.values(student);
console.log(values); // ["Pratham", 22, "Web Dev Cohort 2026"]

Method 4: Object.entries() — Both Keys and Values

This gives you an array of [key, value] pairs:

let student = {
  name: "Pratham",
  age: 22,
  course: "Web Dev Cohort 2026"
};

for (let [key, value] of Object.entries(student)) {
  console.log(key + " = " + value);
}
// name = Pratham
// age = 22
// course = Web Dev Cohort 2026

This is my personal favorite — clean, gives you both key and value, and doesn't require bracket notation inside the loop.

---

Array vs Object — When to Use Which

This was a question I had early on: "Both can store multiple values. When do I use an array and when do I use an object?"

Here's the simple answer:

Feature	Array	Object
Structure	Ordered list of values	Unordered key-value pairs
Access by	Numeric index (arr[0])	Named key (obj.name)
Best for	Lists of similar items	Describing a single entity
Order matters?	✅ Yes — order is preserved	⚠️ Not guaranteed (usually is in modern JS)
Example	List of students, list of scores	One student's details

Visual Comparison

ARRAY — A list of students (multiple items, same structure):
┌─────────┬─────────┬─────────┬─────────┐
│  [0]    │  [1]    │  [2]    │  [3]    │
│ "Arjun" │ "Priya" │ "Rahul" │ "Neha"  │
└─────────┴─────────┴─────────┴─────────┘
 → "Who is at position 2?"  →  "Rahul"


OBJECT — One student's details (one item, multiple properties):
┌──────────┬───────────────────┐
│ name     │ "Pratham"         │
│ age      │ 22                │
│ course   │ "Web Dev 2026"    │
│ isActive │ true              │
└──────────┴───────────────────┘
 → "What is the student's course?"  →  "Web Dev 2026"

Use arrays when you have a list of things. Use objects when you need to describe one thing with named properties.

And in real projects? You'll combine them. An array of objects is one of the most common patterns in JavaScript:

let students = [
  { name: "Pratham", age: 22, course: "Web Dev" },
  { name: "Arjun", age: 21, course: "Data Science" },
  { name: "Priya", age: 23, course: "Web Dev" }
];

console.log(students[1].name); // "Arjun" — index 1, then key "name"

---

Let's Practice: Hands-On Assignment

Part 1: Create a Student Object

let student = {
  name: "Pratham Bhardwaj",
  age: 22,
  course: "Web Dev Cohort 2026",
  isActive: true,
  city: "Delhi"
};

console.log(student);
// { name: "Pratham Bhardwaj", age: 22, course: "Web Dev Cohort 2026", isActive: true, city: "Delhi" }

Part 2: Access Some Properties

console.log("Name:", student.name);        // Name: Pratham Bhardwaj
console.log("Course:", student.course);    // Course: Web Dev Cohort 2026
console.log("City:", student["city"]);     // City: Delhi

Part 3: Update a Property

// Moved from Delhi to Gurugram
student.city = "Gurugram";
console.log("Updated city:", student.city); // Updated city: Gurugram

Part 4: Add and Delete Properties

// Adding a new property
student.email = "[e-mail]";
console.log("Email added:", student.email); // Email added: [e-mail]

// Deleting a property
delete student.isActive;
console.log(student);
// { name: "Pratham Bhardwaj", age: 22, course: "Web Dev Cohort 2026", city: "Gurugram", email: "[e-mail]" }

Part 5: Loop Through All Keys and Values

console.log("--- Student Details ---");

for (let [key, value] of Object.entries(student)) {
  console.log(key + ": " + value);
}
// name: Pratham Bhardwaj
// age: 22
// course: Web Dev Cohort 2026
// city: Gurugram
// email: [e-mail]

---

Key Takeaways

1. Objects are collections of key-value pairs. They let you group related data under one variable with meaningful labels.
2. Use dot notation (obj.key) for clean, everyday access. Use bracket notation (obj["key"]) for dynamic keys, keys with spaces, or keys stored in variables.
3. Objects are mutable — you can update, add, and delete properties at any time.
4. Loop through objects using for...in, Object.keys(), Object.values(), or Object.entries().
5. Arrays are for ordered lists of similar items. Objects are for describing a single entity with named properties. In real code, you'll often use arrays of objects.

---

Wrapping Up

Objects are everywhere in JavaScript. When you fetch data from an API, it comes back as objects. When you work with the DOM, elements are objects. When you build React components, props and state are objects. Understanding how to create, read, update, and delete object properties isn't just a beginner topic — it's a skill you'll use in literally every project you ever build.

I'm learning all of this through the ChaiCode Web Dev Cohort 2026 under Hitesh Chaudhary and Piyush Garg, and objects were the moment JavaScript started feeling like a real-world tool rather than an academic exercise. Once you see how data is structured in APIs and databases, you'll realize that objects are the language's way of modeling reality.

Connect with me on LinkedIn or visit PrathamDEV.in if you want to follow along with my learning journey. More articles coming soon — next stop: array methods and DOM manipulation.

Happy coding! 🚀

---

Written by Pratham Bhardwaj | Web Dev Cohort 2026, ChaiCode