JS 5

Excellent! You're doing well.

Now we reach one of the most important chapters in all of JavaScript.

If you master Chapter 5, you'll understand how almost every React app stores data.

---

Chapter 5 — Objects

🎯 Goal (1 line)

Learn how to group related information into a single object.

---

Think Like a Programmer

Imagine you're building a user profile.

Without objects:

const name = "Alice";
const age = 25;
const city = "Delhi";
const isAdmin = true;

This works...

But what if you have 100 users?

You'd end up with hundreds of variables.

Instead:

const user = {
  name: "Alice",
  age: 25,
  city: "Delhi",
  isAdmin: true
};

Everything about one user is stored in one place.

Think of an object like a person's ID card.

User
──────────────
Name: Alice
Age: 25
City: Delhi
Admin: true

Each piece of information is called a property.

---

Reading Properties

Use a dot (.)

const user = {
  name: "Alice",
  age: 25
};

console.log(user.name);

Output

Alice

---

Updating Properties

const user = {
  name: "Alice"
};

user.name = "Bob";

console.log(user.name);

Output

Bob

Notice:

We used const, but we changed a property.

That's allowed.

You're not replacing the whole object.

---

Adding a Property

const user = {
  name: "Alice"
};

user.city = "Mumbai";

console.log(user);

Output

{
  name: "Alice",
  city: "Mumbai"
}

---

MCQs

---

Q1

What is an object?

A. A list

B. A group of related values

C. A loop

D. A function

✅ Answer

B

---

Q2

Which creates an object?

A.

const user = [];

B.

const user = {};

C.

const user = ();

D.

const user = "";

✅ Answer

B

---

Q3

Output?

const user = {
  name: "Alice"
};

console.log(user.name);

A.

Alice

B.

name

C.

undefined

D.

Error

✅ Answer

A

---

Q4

Output?

const car = {
  brand: "Tesla"
};

console.log(car.brand);

A.

Tesla

B.

brand

C.

undefined

D.

Error

✅ Answer

A

---

Q5

How do you read age?

const user = {
  age: 20
};

A.

user(age)

B.

user.age

C.

user->age

D.

age.user

✅ Answer

B

---

Q6

Output?

const user = {
  age: 25
};

user.age = 30;

console.log(user.age);

A.

25

B.

30

C.

undefined

D.

Error

✅ Answer

B

---

Q7

Find the bug.

const user = {
  name: "Sam"
};

console.log(user.age);

A. No bug

B. Property doesn't exist

C. Missing let

D. Missing push()

✅ Answer

B

Since age doesn't exist, it prints:

undefined

---

Q8

Output?

const phone = {
  brand: "Apple"
};

phone.model = "iPhone";

console.log(phone.model);

A.

Apple

B.

iPhone

C.

undefined

D.

Error

✅ Answer

B

---

Q9

Which is better?

A.

const studentName = "John";
const studentAge = 20;
const studentCity = "Delhi";

B.

const student = {
  name: "John",
  age: 20,
  city: "Delhi"
};

✅ Answer

B

Objects keep related data together.

---

Q10

Output?

const product = {
  name: "Laptop",
  price: 50000
};

console.log(product.price);

A.

Laptop

B.

50000

C.

price

D.

Error

✅ Answer

B

---

Q11

Output?

const person = {
  firstName: "Tom",
  lastName: "Lee"
};

console.log(person.firstName);

A.

Tom

B.

Lee

C.

Tom Lee

D.

undefined

✅ Answer

A

---

Q12

Output?

const book = {
  title: "JavaScript"
};

book.author = "John";

console.log(book);

A.

{
  title: "JavaScript",
  author: "John"
}

B.

{
  title: "JavaScript"
}

C.

undefined

D.

Error

✅ Answer

A

---

Q13

Find the bug.

const user = {
  name: "Alice"
};

user = {
  name: "Bob"
};

A. No bug

B. Can't replace a const object

C. Missing push()

D. Missing return

✅ Answer

B

You can change properties.

You cannot replace the whole object.

---

Q14

Output?

const user = {
  name: "Alice"
};

user.name = "Emma";

console.log(user);

A.

{
  name: "Emma"
}

B.

{
  name: "Alice"
}

C.

undefined

D.

Error

✅ Answer

A

---

Q15 (Hardest)

Predict the output.

const product = {
  name: "Phone",
  price: 1000
};

product.price = 1200;

product.stock = 10;

console.log(product);

A.

{
  name: "Phone",
  price: 1200,
  stock: 10
}

B.

{
  name: "Phone",
  price: 1000
}

C.

Error

D.

undefined

✅ Answer

A

---

Mini Coding Challenge

Predict the output.

const employee = {
  name: "David",
  salary: 60000
};

employee.salary = 70000;

console.log(employee.salary);

✅ Solution

Output

70000

---

Mini Project — Student Profile

const student = {
  name: "Rahul",
  age: 22,
  course: "JavaScript"
};

console.log(student.name);
console.log(student.age);
console.log(student.course);

student.course = "React";

console.log(student.course);

✅ Output

Rahul
22
JavaScript
React

---

💼 Real-World Example

Imagine data coming from a server:

const user = {
  id: 1,
  name: "Pramod",
  email: "pramod@example.com",
  isLoggedIn: true
};

console.log(user.name);
console.log(user.email);

This is exactly the kind of data you'll work with in React, APIs, and Node.js.

---

🚨 Common Beginner Mistakes

❌ Confusing arrays and objects

Array:

const colors = ["Red", "Blue"];

Access:

colors[0];

Object:

const user = {
  name: "Alice"
};

Access:

user.name;

---

❌ Trying to replace a const object

Wrong:

user = {};

Correct:

user.name = "Bob";

---

🧠 What You Must Remember (80/20)

These patterns appear in almost every JavaScript and React project:

const user = {
  name: "Alice",
  age: 25
};

user.name;          // Read
user.age = 26;      // Update
user.city = "Delhi"; // Add

---

📌 Next Chapter (Very Important)

Chapter 6 — Loops

You'll learn how to repeat tasks automatically instead of writing the same code over and over. Loops are essential for displaying lists of users, products, comments, and more—something you'll do constantly in real-world applications and React.