Understanding Objects in JavaScript

What Is an Object?

Think of an ID card. It holds multiple pieces of information about one person name, age, city, occupation all in one place. That's exactly what a JavaScript object does. Instead of storing separate variables for each detail, you bundle everything into a single, named structure.

An object is a collection of key-value pairs. Each piece of data has a key (a label) and a value (the actual data). Together they describe one thing in detail.

Array vs Object — What's the Difference?

Both arrays and objects store multiple values. The key difference is how you access them.

[ ] Array:

const person = [
  "Neeraj",
  22,
  "Mumbai"
];

person[0]; // "Neeraj"
person[1]; // 22
//Accessed by index number. No labels — you have to remember what position 0 means.

{ } Object:

const person = {
  name: "Neeraj",
  age:  22,
  city: "Mumbai"
};

person.name; // "Neeraj"
person.age;  // 22
//Accessed by key name. Self-describing — the labels make the code readable.

1. Creating an Object

Objects are created using curly braces { }. Inside, you write key-value pairs separated by commas. Keys are strings (without quotes in most cases), and values can be any data type.

const person = {
  name:      "Neeraj",
  age:       22,
  city:      "Mumbai",
  isStudent: true
};

console.log(person);
// { name: "Neeraj", age: 22, city: "Mumbai", isStudent: true }

2. Accessing Properties

There are two ways to read a value from an object dot notation and bracket notation.

.Dot Notation:

person.name  // "Neeraj"
person.age   // 22
person.city  // "Mumbai"

[ ] Bracket Notation:

person["name"]  // "Neeraj"
person["age"]   // 22
person["city"]  // "Mumbai"

Both return the exact same value. Dot notation is shorter and used most of the time. Bracket notation is useful when the key name is stored in a variable or has spaces.

when to use bracket notation:

const key = "name";
console.log(person[key]); // "Neeraj" ← dynamic key access

// Key with a space — only bracket notation works
const user = { "full name": "Neeraj Dev" };
console.log(user["full name"]); // "Neeraj Dev"
// user.full name  ← ❌ this would be a syntax error

3. Updating Properties

To change the value of an existing key, just assign a new value to it using the same dot or bracket notation.

const person = {
  name: "Neeraj",
  age:  22,
  city: "Mumbai"
};

// Update age
person.age = 23;
console.log(person.age); // 23

// Update city
person.city = "Delhi";
console.log(person.city); // "Delhi"

const and Objects:

Even when an object is declared with const, you can still update its properties. const prevents you from reassigning the variable to a completely new object but the contents can still change.

4. Adding and Deleting Properties

You can add a new property to an object at any time just assign a value to a key that doesn't exist yet. To remove a property, use the delete keyword.

const person = { name: "Neeraj", age: 22 };

// Add a new property
person.email = "neeraj@example.com";
person.city  = "Mumbai";

console.log(person);
// { name: "Neeraj", age: 22, email: "neeraj@example.com", city: "Mumbai" }

delete person.email;

console.log(person);
// { name: "Neeraj", age: 22, city: "Mumbai" } ← email is gone

Use delete carefully:

delete permanently removes the key from the object. If you just want to clear a value, consider setting it to null instead: person.email = null.

5. Looping Through an Object

Unlike arrays, objects don't have a simple index to loop over. Instead, use the for...in loop — it goes through each key in the object one by one.

const person = {
  name: "Neeraj",
  age:  22,
  city: "Mumbai"
};

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

// name: Neeraj
// age: 22
// city: Mumbai

Object.keys(), Object.values(), Object.entries()

Three built-in methods that make working with objects even easier:

object utility method:

const person = { name: "Neeraj", age: 22, city: "Mumbai" };

console.log(Object.keys(person));
// ["name", "age", "city"]

console.log(Object.values(person));
// ["Neeraj", 22, "Mumbai"]

console.log(Object.entries(person));
// [["name","Neeraj"], ["age",22], ["city","Mumbai"]]

Quick Rule:

Use Object.keys() when you only need the labels.

Use Object.values() when you only need the data.

Use Object.entries() when you need both together.

Your Assignment: Build a student object from scratch and work with it.

// Step 1: Create the student object
const student = {
  name:   "Your Name",
  age:    20,
  course: "JavaScript",
  grade:  "B"
};

// Step 2: Access properties
console.log(student.name);
console.log(student["course"]);

// Step 3: Update a property
student.grade = "A";
console.log("Updated grade:", student.grade);

// Step 4: Add a new property
student.city = "Mumbai";

// Step 5: Loop and print all keys + values
console.log("\n--- Student Profile ---");
for (let key in student) {
  console.log(key + ": " + student[key]);
}

Bonus: Try deleting the grade property and then log the object again. What do you see?

Key Takeaways:

• An object is a collection of key-value pairs it describes one thing with multiple properties.

• Use arrays for ordered lists. Use objects for structured data about a single entity.

• Access properties with dot notation (person.name) or bracket notation (person["name"]).

• Updating a property is as simple as reassigning it: person.age = 23.

• Add new properties by assigning to a new key. Remove them with delete.

• Loop through objects using for...in or Object.keys() / Object.values() / Object.entries().