Understanding Objects in JavaScript

You've stored a list of values in an array. But what if you need to store related information about one thing — a person's name, age, and city all together? An array can't describe that relationship clearly.

// array — you lose track of what each value means
const person = ["Rahul", 25, "Mumbai", "Developer"];

// what is index 0? index 2? hard to tell without context
console.log(person[2]); // "Mumbai" — but you have to remember the position

Objects solve this. They store data as key-value pairs — each piece of information has a label that describes it.

// object — every value has a clear name
const person = {
  name: "Rahul",
  age: 25,
  city: "Mumbai",
  role: "Developer"
};

console.log(person.city); // "Mumbai" — immediately clear what this is

What is an Object?

An object is a collection of key-value pairs. Each key is a label (like a column name), and each value is the data stored under that label.

Key       Value
────────  ──────────
name   →  "Rahul"
age    →  25
city   →  "Mumbai"
role   →  "Developer"

Think of it like a profile card. A profile card has fields — Name, Age, City, Role — and each field has a value. That's exactly what an object is.

Array vs Object — the key difference

// use array when you have a LIST of things
const fruits = ["apple", "banana", "mango"];

// use object when you have PROPERTIES of one thing
const student = { name: "Priya", age: 22, course: "JavaScript" };

Creating an Object

Use curly braces {} with key-value pairs separated by commas:

const laptop = {
  brand: "Dell",
  model: "XPS 15",
  ram: 16,
  storage: 512,
  isAvailable: true
};

Keys are always strings (you don't need quotes around them unless they have spaces or special characters). Values can be any data type — string, number, boolean, array, even another object.

Empty object — add properties later

const user = {};

Object with an array as a value

const student = {
  name: "Amit",
  age: 21,
  subjects: ["Math", "Physics", "Chemistry"] // array inside object
};

Nested object — object inside object

const employee = {
  name: "Sneha",
  address: {
    city: "Bangalore",
    state: "Karnataka",
    pincode: "560001"
  }
};

console.log(employee.address.city); // "Bangalore"

Accessing Properties

Two ways to read values from an object:

Dot notation — the standard way

const person = {
  name: "Rahul",
  age: 25,
  city: "Mumbai"
};

console.log(person.name); // "Rahul"
console.log(person.age);  // 25
console.log(person.city); // "Mumbai"

Clean and readable. Use this whenever you know the key name in advance.

Bracket notation — when the key is dynamic

console.log(person["name"]); // "Rahul"
console.log(person["age"]);  // 25

When is bracket notation useful? When the key is stored in a variable:

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

// dot notation won't work here
console.log(person.key);  // undefined ❌ — looks for key literally named "key"

Also when the key has spaces or special characters:

const profile = {
  "full name": "Rahul Sharma",
  "home-city": "Mumbai"
};

console.log(profile["full name"]);  // "Rahul Sharma" ✅
console.log(profile["home-city"]); // "Mumbai" ✅
// profile.full name  — ❌ SyntaxError

Accessing a property that doesn't exist

console.log(person.email); // undefined — no error, just undefined

Updating Object Properties

Assign a new value to an existing key:

const user = {
  name: "Priya",
  age: 22,
  city: "Delhi"
};

console.log(user.age); // 22

user.age = 23;         // update age
user.city = "Mumbai";  // update city

console.log(user.age);  // 23
console.log(user.city); // "Mumbai"

Objects declared with const can still have their properties updated — const just means you can't reassign the whole object to a new value.

const person = { name: "Rahul" };

person.name = "Amit";  // ✅ updating a property — allowed
person = { name: "Karan" }; // ❌ reassigning the object — not allowed

Adding New Properties

Just assign a value to a key that doesn't exist yet:

const user = {
  name: "Sneha",
  age: 24
};

// add new properties
user.email = "sneha@example.com";
user.city  = "Chennai";

console.log(user);
// { name: "Sneha", age: 24, email: "sneha@example.com", city: "Chennai" }

Deleting Properties

Use the delete keyword:

const product = {
  name: "Laptop",
  price: 55000,
  discount: 5000,
  category: "Electronics"
};

delete product.discount;

console.log(product);
// { name: "Laptop", price: 55000, category: "Electronics" }

After delete, accessing that key returns undefined:

console.log(product.discount); // undefined

Looping Through Object Keys

for...in loop — designed for objects

const student = {
  name: "Karan",
  age: 21,
  course: "Web Development",
  city: "Pune"
};

for (const key in student) {
  console.log(key + ": " + student[key]);
}

// name: Karan
// age: 21
// course: Web Development
// city: Pune

key gives you the key name. student[key] gives you the value. Notice bracket notation is necessary here — the key is a variable.

Object.keys() — get all keys as an array

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

Object.values() — get all values as an array

const values = Object.values(student);
console.log(values); // ["Karan", 21, "Web Development", "Pune"]

Object.entries() — get key-value pairs as arrays

const entries = Object.entries(student);
console.log(entries);
// [["name","Karan"], ["age",21], ["course","Web Development"], ["city","Pune"]]

Practical use — loop with both key and value cleanly:

Object.entries(student).forEach(([key, value]) => {
  console.log(`\({key}: \){value}`);
});
// name: Karan
// age: 21
// course: Web Development
// city: Pune

Methods — Functions Inside Objects

Objects can also store functions as values. These are called methods:

const calculator = {
  brand: "Casio",
  add(a, b) {
    return a + b;
  },
  multiply(a, b) {
    return a * b;
  }
};

console.log(calculator.add(10, 5));      // 15
console.log(calculator.multiply(4, 6));  // 24

When a function lives inside an object, it can use this to access other properties of that same object:

const user = {
  name: "Priya",
  age: 22,
  greet() {
    console.log(`Hi, I'm \({this.name} and I'm \){this.age} years old.`);
  }
};

user.greet(); // Hi, I'm Priya and I'm 22 years old.

Quick Summary

// Create
const student = {
  name: "Rahul",
  age: 21,
  course: "JavaScript"
};

// Access
console.log(student.name);        // "Rahul"  — dot notation
console.log(student["course"]);   // "JavaScript" — bracket notation

// Update
student.age = 22;

// Add
student.city = "Mumbai";

// Delete
delete student.city;

// Loop
for (const key in student) {
  console.log(`\({key}: \){student[key]}`);
}

// Object methods
console.log(Object.keys(student));   // ["name", "age", "course"]
console.log(Object.values(student)); // ["Rahul", 22, "JavaScript"]

🧪 Your Turn — Assignment Challenge

1. Create an object representing a student

const student = {
  name: "Amit Sharma",
  age: 20,
  course: "Web Development"
};

2. Add more properties

student.city    = "Bangalore";
student.isActive = true;

console.log(student);

3. Update one property

student.age = 21;
console.log(student.age); // 21

4. Print all keys and values using a loop

for (const key in student) {
  console.log(`\({key}: \){student[key]}`);
}

// name: Amit Sharma
// age: 21
// course: Web Development
// city: Bangalore
// isActive: true

Try adding a method to the object. Try using Object.entries(). Try deleting a property and then checking its value. Experimenting is the fastest way to really get it.

Wrapping Up

Objects are how JavaScript represents real-world things in code. A user, a product, a booking, a blog post — they're all objects with properties. Everything in JavaScript is built on objects at some level.

Learn to read them, write them, loop through them, and update them — and you've unlocked one of the most important building blocks of the language.