Iterating over objects in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of iterating object keys with for...in

What is the output of the following code?

Javascript

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

A "abc"

B "123"

C "a1b2c3"

D "undefined"

💡 Hint

for...in loops over keys of an object.

The for...in loop iterates over the keys of the object, so concatenating keys 'a', 'b', and 'c' results in 'abc'.

❓ Predict Output

intermediate

Output of Object.entries iteration

What is the output of this code snippet?

Javascript

const obj = {x: 10, y: 20};
let sum = 0;
for (const [key, value] of Object.entries(obj)) {
  sum += value;
}
console.log(sum);

A 30

B xy

C undefined

D 1020

💡 Hint

Object.entries returns key-value pairs as arrays.

Object.entries returns [['x',10], ['y',20]]. The loop sums values 10 + 20 = 30.

❓ Predict Output

advanced

Output of iterating object with Object.keys and map

What will this code output?

Javascript

const obj = {a: 1, b: 2, c: 3};
const result = Object.keys(obj).map(key => obj[key] * 2);
console.log(result);

A ["a2", "b4", "c6"]

B TypeError

C [1, 2, 3]

D [2, 4, 6]

💡 Hint

Object.keys returns keys, map transforms values.

Object.keys returns ['a','b','c']. Mapping each key to obj[key]*2 gives [2,4,6].

❓ Predict Output

advanced

Output of for...of with Object.values

What is the output of this code?

Javascript

const obj = {p: 5, q: 10};
let output = '';
for (const val of Object.values(obj)) {
  output += val + '-';
}
console.log(output);

A "510"

B "pq"

C "5-10-"

D SyntaxError

💡 Hint

Object.values returns values only.

Object.values returns [5,10]. The loop concatenates '5-' and '10-' resulting in '5-10-'.

❓ Predict Output

expert

Output of nested object iteration with destructuring

What is the output of this code?

Javascript

const data = {a: {x: 1}, b: {x: 2}};
let sum = 0;
for (const {x} of Object.values(data)) {
  sum += x;
}
console.log(sum);

A TypeError

B 3

C NaN

D undefined

💡 Hint

Object.values returns nested objects, destructuring extracts x.

Object.values(data) returns [{x:1}, {x:2}]. Destructuring {x} extracts values 1 and 2, summed to 3.

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