Understanding Objects in JavaScript

If you've been learning JavaScript, you've likely used Arrays to store lists of data. But what happens when you need to describe something more complex — like a person, a car, or a laptop?

An array like ["MacBook", 16, 2026] doesn't tell us much. What does the 16 mean? RAM? Screen size? Price in thousands?

That is where Objects come to the rescue!

---

1. Why Objects? The Problem with Arrays

Before we learn what objects are, let's understand the problem they solve. Imagine you're building a user profile for a website. You might start with an array:

// What does each value mean?? 
const user = ["Prakash", 20, "Rajasthan", true, "developer"];

// To get the profession, you need to remember it's at index 4
console.log(user[4]); // "developer" — but why 4? Who knows!

This is a nightmare. Index numbers are meaningless. If you add a new field in the middle, every index after it breaks. Your code becomes impossible to read and maintain.

Now here's the same data as an object:

// Crystal clear — no guessing!
const user = {
  name: "Prakash",
  age: 20,
  state: "Rajasthan",
  isLoggedIn: true,
  profession: "developer"
};

// Now it's obvious what you're getting
console.log(user.profession); // "developer" — perfectly readable!

💡 Rule of Thumb: Use an Array when you have a list of similar items (e.g., a list of product names). Use an Object when you're describing a single thing with multiple different attributes.

2. What Are Objects? The Key-Value Structure

In JavaScript, an object is a standalone entity that holds related data together. Think of it like a real-world object. A car has a color, a brand, and a top speed. In code, an object allows us to group these related variables into one neat package.

Objects work on a key-value pair system:

• Key → The name/label of the property (e.g., name)

• Value → The data assigned to that label (e.g., "Prakash")

Think of it like filling out a form:

Key	:	Value
name	:	"Prakash"
age	:	20
state	:	"Rajasthan"
isStudent	:	true

Values can be any data type - strings, numbers, booleans, arrays, or even other objects.

---

3. Creating an Object

The most common way to create an object is using Object Literals the curly braces {}.

// A real-world example: A Person Object
const person = {
  name: "Prakash",
  age: 20,
  state: "Rajasthan"
};

Each key-value pair is separated by a comma. The key and value are separated by a colon.

You might also see the new Object() syntax in older code:

// The verbose way — avoid this in modern JS
const person = new Object();
person.name = "Prakash";
person.age = 20;
person.state = "Rajasthan";

Best Practice: Always use Object Literals {}. They're shorter, more readable, and the standard in modern JavaScript.

4. Accessing Properties — Two Ways

Once you have an object, you need to read its data. JavaScript gives you two ways to do this.

A. Dot Notation (Most Common)

Use this when you know the property name upfront. Clean and readable.

const person = {
  name: "Prakash",
  age: 20,
  state: "Rajasthan",
  skills: ["JavaScript", "React", "Node.js"]
};

console.log(person.name);      // "Prakash"
console.log(person.age);       // 20
console.log(person.skills);    // ["JavaScript", "React", "Node.js"]

// You can chain it to access items inside an array!
console.log(person.skills[0]); // "JavaScript"

B. Bracket Notation

Use this when the key has a space, starts with a number, or when you're using a variable to look up a key dynamically.

const profile = {
  name: "Prakash",
  age: 20,
  "full name": "Prakash Kumar",  // key with a SPACE
  "2024score": 95                // key starting with a number
};

// CASE 1: Key has a space (dot notation would crash here!)
console.log(profile["full name"]); // "Prakash Kumar"
// profile.full name ← this would be a SYNTAX ERROR ❌

// CASE 2: Dynamic access with a variable
const query = "age";
console.log(profile[query]);       // 20 — reads the variable, not literal "query"

// CASE 3: Looping with bracket notation
const keys = ["name", "age"];
keys.forEach(key => {
  console.log(profile[key]); // "Prakash", then 20
});

Pro Tip: Bracket notation is incredibly useful when building search features or filters — any time the key is determined at runtime (from user input, for example).

---

5. Updating, Adding & Deleting Properties

Objects are mutable - you can freely change them after creation. Even if you declare the object with const, its properties can still be modified.

Updating a Property

const person = {
  name: "Prakash",
  age: 20,
  state: "Rajasthan"
};

person.age = 21; // Prakash just had a birthday! 🎂
console.log(person.age); // 21

Adding a New Property

person.isStudent = true;
person.college = "IIT Jodhpur";

console.log(person);
// { name: "Prakash", age: 21, state: "Rajasthan", isStudent: true, college: "IIT Jodhpur" }

Deleting a Property

delete person.state;

console.log(person.state); // undefined

Checking if a Property Exists

console.log("isStudent" in person); // true
console.log("state" in person);     // false — we deleted it!

Why const doesn't freeze objects: const prevents you from doing person = {} (reassigning the variable). But it doesn't stop you from modifying what's inside the object. Use Object.freeze(person) if you truly want an immutable object.

---

6. Array vs Object — What's the Difference?

This trips up a lot of beginners. Here's the definitive breakdown:

Feature	Array []	Object {}
Purpose	An ordered list of similar items	Description of one specific thing
Access	arr[0] — by index number	obj.key — by name
Ordering	Ordered — index 0, 1, 2...	Unordered — key-based
When to use	Shopping cart items, scores, names	A user, a product, a car
Loop type	for...of or forEach	for...in

// Use ARRAY when all items are the same kind of thing
const students = ["Prakash", "Riya", "Arjun", "Meera"];
const scores   = [85, 92, 78, 96];

// Use OBJECT when describing one specific entity
const student = {
  name: "Prakash",
  score: 85,
  grade: "A",
  passed: true
};

// COMBINE BOTH: Array of Objects — an extremely common pattern!
const classroom = [
  { name: "Prakash", score: 85, grade: "A"  },
  { name: "Riya",    score: 92, grade: "A+" },
  { name: "Arjun",   score: 78, grade: "B+" }
];

// Access: first student's name
console.log(classroom[0].name);  // "Prakash"
console.log(classroom[1].grade); // "A+"

Array of Objects is one of the most common patterns in real-world JavaScript — you'll see this in every API response, database query result, and React component.

7. Looping Through an Object

To walk through every key-value pair in an object, we use the for...in loop.

const person = {
  name: "Prakash",
  age: 21,
  isStudent: true,
  college: "IIT Jodhpur"
};

// for...in gives you each KEY one at a time
for (let key in person) {
  console.log(key + ": " + person[key]);
}

// Output:
// name: Prakash
// age: 21
// isStudent: true
// college: IIT Jodhpur

Object Utility Methods

JavaScript also provides three handy built-in methods to extract parts of an object as arrays:

const person = { name: "Prakash", age: 21, college: "IIT Jodhpur" };

// Object.keys() → array of all keys
console.log(Object.keys(person));
// ["name", "age", "college"]

// Object.values() → array of all values
console.log(Object.values(person));
// ["Prakash", 21, "IIT Jodhpur"]

// Object.entries() → array of [key, value] pairs
console.log(Object.entries(person));
// [["name","Prakash"], ["age",21], ["college","IIT Jodhpur"]]

// Practical use: loop with destructuring
for (const [key, value] of Object.entries(person)) {
  console.log(`\({key} → \){value}`);
}

8. Nested Objects & Methods

Objects can contain other objects inside them — this is called nesting. Objects can also hold functions as values — these are called methods.

Nested Objects

const student = {
  name: "Prakash",
  age: 21,

  // Nested object: address lives inside student
  address: {
    city: "Jodhpur",
    state: "Rajasthan",
    pincode: "342001"
  },

  // Array inside an object
  skills: ["JavaScript", "React", "Node.js"]
};

// Access nested properties: chain the dots
console.log(student.address.city);   // "Jodhpur"
console.log(student.address.state);  // "Rajasthan"
console.log(student.skills[0]);      // "JavaScript"

// Update a nested property
student.address.city = "Jaipur"; // Prakash moved cities!

Methods — Functions Inside Objects

const calculator = {
  brand: "Casio",

  // Functions stored as values are called "methods"
  add: function(a, b) {
    return a + b;
  },

  // Modern shorthand (preferred)
  multiply(a, b) {
    return a * b;
  },

  subtract(a, b) {
    return a - b;
  }
};

console.log(calculator.add(10, 5));      // 15
console.log(calculator.multiply(4, 3));  // 12
console.log(calculator.subtract(9, 4));  // 5

---

9. Real-World Example - E-Commerce Product

Let's put everything together with the kind of data structure you'd actually use when building an e-commerce site.

const product = {
  id: "MBP-001",
  name: "MacBook Pro 14",
  brand: "Apple",
  price: 199999,       // in rupees ₹
  inStock: true,
  rating: 4.8,
  reviewCount: 2341,

  // Nested object
  specs: {
    chip: "Apple M3 Pro",
    ram: 18,
    storage: 512,
    display: "14.2-inch Liquid Retina XDR",
    battery: "22 hours"
  },

  // Array of strings
  colors: ["Space Black", "Silver"],

  // Array of objects
  reviews: [
    { user: "Riya_Dev",  stars: 5, comment: "Incredible performance!" },
    { user: "TechArjun", stars: 4, comment: "Great but expensive" }
  ],

  // Methods
  getDescription() {
    return `\({this.name} by \){this.brand} — ₹${this.price.toLocaleString()}`;
  },

  isAffordable(budget) {
    return this.price <= budget;
  }
};

// Reading various properties
console.log(product.name);              // "MacBook Pro 14"
console.log(product.specs.ram);         // 18
console.log(product.colors[0]);         // "Space Black"
console.log(product.reviews[0].user);   // "Riya_Dev"
console.log(product.reviews[0].stars);  // 5

// Calling methods
console.log(product.getDescription());
// "MacBook Pro 14 by Apple — ₹1,99,999"

console.log(product.isAffordable(150000)); // false
console.log(product.isAffordable(250000)); // true

// Looping through specs
console.log("=== Tech Specs ===");
for (let spec in product.specs) {
  console.log(`  \({spec}: \){product.specs[spec]}`);
}
// chip: Apple M3 Pro
// ram: 18
// storage: 512
// display: 14.2-inch Liquid Retina XDR
// battery: 22 hours

This is almost exactly the kind of data you'd receive from a backend API. The ability to navigate nested objects, loop through properties, and call methods is a daily reality as a JavaScript developer.

---

Where You'll Use Objects Every Day

• User Auth & Profiles — { id, name, email, role, avatar }

• Shopping Cart — { productId, qty, price, discount }

• API Responses — Every REST API returns JSON, which is just objects

• Config & Settings — { theme, language, notifications }

• React State & Props — Almost always objects under the hood

Conclusion

Objects are the backbone of JavaScript. They make your data readable, searchable, and organized. By mastering:

• Key-Value pairs

• Dot and Bracket notation

• Updating, Adding, Deleting

• Nested objects and methods

• Looping with for...in and Object.entries()

---

I write articles on blog.prakashtsx.com and also post development-related content on:

• Twitter / X

• LinkedIn