Iterating over objects in Javascript - Mini Project: Build & Apply

Iterating over objects

📖 Scenario: You work in a small shop and have a list of products with their prices stored in an object. You want to check and display each product's price.

🎯 Goal: Build a simple program that iterates over an object of products and their prices, then prints each product name with its price.

📋 What You'll Learn

Create an object called products with exact product-price pairs

Create a variable called currency to store the currency symbol

Use a for...in loop with variable product to iterate over products

Print each product and its price with the currency symbol

💡 Why This Matters

🌍 Real World

Shop owners and cashiers often need to list products and prices from a database or object to show customers.

💼 Career

Knowing how to iterate over objects is essential for web developers working with data structures and displaying information dynamically.

1

Create the products object

Create an object called products with these exact entries: "apple": 1.2, "banana": 0.5, "orange": 0.8

Javascript

// Create the products object with the given entries
// Your code here

Hint

Use const products = {} and add the exact key-value pairs inside curly braces.

2

Add a currency symbol variable

Create a variable called currency and set it to the string "$"

Javascript

const products = {"apple": 1.2, "banana": 0.5, "orange": 0.8};
// Create the currency variable
// Your code here

Hint

Use const currency = "$"; to store the currency symbol.

3

Iterate over the products object

Use a for...in loop with variable product to iterate over products and create a variable price to get the price for each product

Javascript

const products = {"apple": 1.2, "banana": 0.5, "orange": 0.8};
const currency = "$";
// Use for...in loop to iterate over products
// Your code here

Hint

Use for (const product in products) and inside the loop get the price with products[product].

4

Print each product and its price

Inside the for...in loop, write a console.log statement to print the product name and its price with the currency symbol, formatted like: apple: $1.2

Javascript

const products = {"apple": 1.2, "banana": 0.5, "orange": 0.8};
const currency = "$";
for (const product in products) {
    const price = products[product];
    // Print product and price here
    // Your code here
}

Hint

Use console.log(`${product}: ${currency}${price}`); inside the loop to print each line.

Practice

1. Which of the following is the correct way to loop over all keys in a JavaScript object obj?

easy

A. obj.forEach(key => console.log(key));

B. for (let i = 0; i < obj.length; i++) { console.log(obj[i]); }

C. for (let key in obj) { console.log(key); }

D. for (let key of obj) { console.log(key); }

Solution

1. Step 1: Understand looping over object keys

   The for...in loop is designed to iterate over all enumerable keys in an object.

2. Step 2: Check each option's validity

   for (let key in obj) { console.log(key); } uses for...in correctly. for (let i = 0; i < obj.length; i++) { console.log(obj[i]); } tries to use a numeric index on an object, which doesn't work. for (let key of obj) { console.log(key); } uses for...of which works on iterable objects like arrays, not plain objects. obj.forEach(key => console.log(key)); tries to use forEach on an object, which is invalid.

3. Final Answer:

   for (let key in obj) { console.log(key); } -> Option C

4. Quick Check:

   Use for...in to loop keys [OK]

Hint: Use for...in to loop keys in objects [OK]

Common Mistakes:

• Using for...of on plain objects
• Trying to use numeric indexes on objects
• Using forEach directly on objects

2. Which syntax correctly accesses the value of each key inside a for...in loop over object data?

easy

A. for (let key in data) { console.log(data[key]); }

B. for (let key in data) { console.log(key.value); }

C. for (let key in data) { console.log(data.key); }

D. for (let key in data) { console.log(data->key); }

Solution

1. Step 1: Understand how to access object values by key

   Inside a for...in loop, key is a string representing the property name. To get the value, use bracket notation: data[key].

2. Step 2: Evaluate each option

   for (let key in data) { console.log(data.key); } uses dot notation with a variable, which looks for a property literally named 'key'. for (let key in data) { console.log(data[key]); } correctly uses bracket notation. for (let key in data) { console.log(key.value); } tries to access key.value, but key is a string, not an object. for (let key in data) { console.log(data->key); } uses invalid syntax.

3. Final Answer:

   for (let key in data) { console.log(data[key]); } -> Option A

4. Quick Check:

   Access values with data[key] inside for...in [OK]

Hint: Use bracket notation data[key] to get values [OK]

Common Mistakes:

• Using dot notation with variable key
• Treating key as an object
• Using invalid syntax like arrows

3. What will be the output of the following code?

const obj = {a: 1, b: 2, c: 3};
let result = [];
for (let key in obj) {
  result.push(key + obj[key]);
}
console.log(result);

medium

A. ['1', '2', '3']

B. ['1a', '2b', '3c']

C. ['a', 'b', 'c']

D. ['a1', 'b2', 'c3']

Solution

1. Step 1: Understand the loop and concatenation

   The loop iterates over keys 'a', 'b', 'c'. For each key, it concatenates the key string with its value (number converted to string).

2. Step 2: Trace the result array

   First iteration: 'a' + 1 = 'a1', second: 'b' + 2 = 'b2', third: 'c' + 3 = 'c3'. These are pushed into the array.

3. Final Answer:

   ['a1', 'b2', 'c3'] -> Option D

4. Quick Check:

   Keys + values concatenated = ['a1', 'b2', 'c3'] [OK]

Hint: Concatenate key + value inside for...in loop [OK]

Common Mistakes:

• Confusing order of concatenation
• Expecting numeric addition instead of string concat
• Using keys or values alone

4. Identify the error in this code snippet:

const user = {name: 'Alice', age: 25};
for (let key of user) {
  console.log(key + ': ' + user[key]);
}

medium

A. Using for...of on a plain object causes a TypeError

B. Missing declaration of key variable

C. Incorrect string concatenation syntax

D. Accessing user[key] is invalid

Solution

1. Step 1: Check the loop type and object

   for...of works on iterable objects like arrays or strings. Plain objects are not iterable, so this causes a TypeError.

2. Step 2: Confirm other parts are correct

   The variable key is declared correctly. String concatenation and accessing user[key] are valid if the loop worked.

3. Final Answer:

   Using for...of on a plain object causes a TypeError -> Option A

4. Quick Check:

   for...of needs iterable, plain object is not [OK]

Hint: Use for...in or Object.keys() for objects, not for...of [OK]

Common Mistakes:

• Using for...of on plain objects
• Confusing variable declaration errors
• Thinking user[key] is invalid

5. Given the object const scores = {alice: 10, bob: 0, carol: 5, dave: null};, which code snippet correctly creates a new object with only keys having truthy values?

hard

A. const filtered = {};
for (let key in scores) {
if (scores.key) filtered.key = scores.key;
}

B. const filtered = {};
for (let key in scores) {
if (scores[key]) filtered[key] = scores[key];
}

C. const filtered = Object.keys(scores).filter(k => scores[k]).reduce((obj, k) => { obj[k] = scores[k]; }, {});

D. const filtered = Object.values(scores).filter(v => v);

Solution

1. Step 1: Understand filtering truthy values in an object

   We want to keep keys where the value is truthy (not 0, null, undefined, false, '').

2. Step 2: Analyze each option

   const filtered = {}; for (let key in scores) { if (scores[key]) filtered[key] = scores[key]; } uses a for...in loop and checks scores[key] truthiness correctly, adding to filtered. const filtered = {}; for (let key in scores) { if (scores.key) filtered.key = scores.key; } incorrectly uses dot notation with variable key. const filtered = Object.keys(scores).filter(k => scores[k]).reduce((obj, k) => { obj[k] = scores[k]; return obj; }, {}); tries to use Object.keys() with filter and reduce, but the code is missing a return statement in the arrow function (syntax error). const filtered = Object.values(scores).filter(v => v); filters values only, losing keys and returning an array, not an object.

3. Final Answer:

   const filtered = {}; for (let key in scores) { if (scores[key]) filtered[key] = scores[key]; } -> Option B

4. Quick Check:

   Use for...in with if (scores[key]) to filter [OK]

Hint: Use for...in and if (obj[key]) to filter truthy keys [OK]

Common Mistakes:

• Using dot notation with variable keys
• Confusing Object.values() with keys
• Missing return in reduce arrow function