Why objects are needed in Javascript - See It in Action

Why Objects Are Needed in JavaScript

📖 Scenario: Imagine you run a small bookstore. You want to keep track of books with their title, author, and price. Using separate variables for each book detail is confusing and hard to manage. Objects help group related information together, just like a real book has all its details in one place.

🎯 Goal: You will create an object to store book details, add a new property for stock count, and then print the full book information. This shows why objects are useful to keep related data organized.

📋 What You'll Learn

Create an object called book with properties title, author, and price with exact values

Add a new property stock to the book object with a number value

Use a for...in loop to go through all properties of book

Print each property and its value in the format: property: value

💡 Why This Matters

🌍 Real World

Objects are used everywhere in programming to represent real things with many details, like books, users, or products.

💼 Career

Understanding objects is essential for web development, as JavaScript uses objects to handle data, user info, and more.

1

Create the book object with details

Create an object called book with these exact properties and values: title set to "JavaScript Basics", author set to "Jane Doe", and price set to 29.99.

Javascript

// Create the book object with title, author, and price
// Your code here

Hint

Use curly braces {} to create an object and separate properties with commas.

2

Add a stock property to the book object

Add a new property called stock to the existing book object and set it to the number 12.

Javascript

const book = {
  title: "JavaScript Basics",
  author: "Jane Doe",
  price: 29.99
};

// Add stock property to book
// Your code here

Hint

Use dot notation to add a new property to an existing object.

3

Use a for...in loop to access all properties of book

Write a for...in loop using the variable key to go through all properties of the book object.

Javascript

const book = {
  title: "JavaScript Basics",
  author: "Jane Doe",
  price: 29.99
};

book.stock = 12;

// Loop through book properties
// Your code here

Hint

Use for (const key in book) to loop over all keys in the object.

4

Print each property and its value

Inside the for...in loop, write a console.log statement to print each property and its value in the format: property: value using key and book[key].

Javascript

const book = {
  title: "JavaScript Basics",
  author: "Jane Doe",
  price: 29.99
};

book.stock = 12;

for (const key in book) {
  // Print property and value
  // Your code here
}

Hint

Use a template string with backticks and ${} to insert variables inside the string.

Practice

1. Why do we use objects in JavaScript?
const person = { name: 'Alice', age: 25 };

easy

A. To group related data under one name

B. To perform mathematical calculations

C. To create loops

D. To write comments

Solution

1. Step 1: Understand the purpose of objects

   Objects group related data, like name and age, under one variable.

2. Step 2: Compare with other options

   Options B, C, and D describe other programming tasks, not grouping data.

3. Final Answer:

   To group related data under one name -> Option A

4. Quick Check:

   Objects group data = A [OK]

Hint: Objects hold related info together [OK]

Common Mistakes:

• Thinking objects are for calculations
• Confusing objects with loops
• Believing objects are for comments

2. Which of the following is the correct way to create an object in JavaScript?

easy

A. const obj = [name: 'John', age: 30];

B. const obj = (name: 'John', age: 30);

C. const obj = { name: 'John', age: 30 };

D. const obj = ;

Solution

1. Step 1: Recall object syntax in JavaScript

   Objects use curly braces {} with key: value pairs inside.

2. Step 2: Check each option

   const obj = { name: 'John', age: 30 }; uses correct curly braces and key-value pairs syntax.

3. Final Answer:

   const obj = { name: 'John', age: 30 }; -> Option C

4. Quick Check:

   Curly braces with key:value = A [OK]

Hint: Objects use curly braces with key:value pairs [OK]

Common Mistakes:

• Using parentheses instead of braces
• Using square brackets for objects
• Using angle brackets incorrectly

3. What will be the output of this code?

const car = { brand: 'Toyota', year: 2020 };
console.log(car.brand);

medium

A. car.brand

B. 2020

C. undefined

D. 'Toyota'

Solution

1. Step 1: Access the object property

   car.brand accesses the value of the brand key in the car object.

2. Step 2: Identify the value stored

   The brand key has the value 'Toyota', so console.log outputs 'Toyota'.

3. Final Answer:

   'Toyota' -> Option D

4. Quick Check:

   car.brand = 'Toyota' [OK]

Hint: Access object properties with dot notation [OK]

Common Mistakes:

• Printing the key name instead of value
• Confusing property access syntax
• Expecting the year instead of brand

4. Find the error in this object creation:

const book = { title: 'JS Guide', pages = 300 };

medium

A. Using '=' instead of ':' for key-value

B. Object keys must be strings

C. Missing comma between properties

D. Missing semicolon after object

Solution

1. Step 1: Check key-value syntax in object

   Object properties use colon ':' to separate key and value, not '='.

2. Step 2: Identify the error in code

   The code uses pages = 300, which is incorrect syntax for objects.

3. Final Answer:

   Using '=' instead of ':' for key-value -> Option A

4. Quick Check:

   Key:value uses ':' not '=' [OK]

Hint: Use colon ':' between key and value in objects [OK]

Common Mistakes:

• Using '=' instead of ':'
• Forgetting commas between properties
• Thinking keys must be quoted always

5. You want to store information about a student including name, age, and grades for math and science. Which is the best way to organize this data using objects?

hard

A. const student = ['John', 20, 90, 85];

B. const student = { name: 'John', age: 20, grades: { math: 90, science: 85 } };

C. const student = { 'John', 20, 90, 85 };

D. const student = { name = 'John', age = 20, math = 90, science = 85 };

Solution

1. Step 1: Identify how to group related data

   Use an object with keys for name, age, and a nested object for grades.

2. Step 2: Check each option's structure

   const student = { name: 'John', age: 20, grades: { math: 90, science: 85 } }; correctly nests grades inside the student object with proper syntax.

3. Final Answer:

   const student = { name: 'John', age: 20, grades: { math: 90, science: 85 } }; -> Option B

4. Quick Check:

   Nested objects organize related info best [OK]

Hint: Use nested objects for grouped related data [OK]

Common Mistakes:

• Using arrays without keys for mixed data
• Incorrect object syntax with '='
• Not grouping grades inside an object