Iterating over arrays in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of forEach with asynchronous callback

What is the output of this code snippet?

Javascript

const arr = [1, 2, 3];
arr.forEach(async (num) => {
  await new Promise(resolve => setTimeout(resolve, 10));
  console.log(num * 2);
});
console.log('Done');

A

2
4
6

B

2
4
6
Done

C Done

D

Done
2
4
6

💡 Hint

Remember that forEach does not wait for async callbacks to finish.

The forEach loop starts all async callbacks but does not wait for them. So 'Done' is logged immediately, then after delays, 2, 4, 6 are logged.

❓ Predict Output

intermediate

Output of map with side effects

What is the output of this code?

Javascript

const numbers = [1, 2, 3];
const result = numbers.map((num, index) => {
  console.log(index);
  return num * 2;
});
console.log(result);

A

0
1
2
[2, 4, 6]

B [2, 4, 6]

C 0 1 2 [2, 4, 6]

D undefined

💡 Hint

map calls the callback for each element and returns a new array.

The map callback logs the index for each element (0,1,2) then returns doubled values. The final console.log prints the new array.

🔧 Debug

advanced

Why does this for...of loop skip the last element?

Consider this code. Why does it skip printing the last element? const arr = [10, 20, 30]; for (let i of arr) { if (i === 20) break; console.log(i); }

Javascript

const arr = [10, 20, 30];
for (let i of arr) {
  if (i === 20) break;
  console.log(i);
}

A Because the console.log is inside the if statement and skips 30.

B Because the loop only iterates twice by default.

C Because the break stops the loop when i equals 20, so 30 is never reached.

D Because the array length is incorrectly set to 2.

💡 Hint

What does the break statement do inside a loop?

The break stops the loop immediately when i equals 20, so the last element 30 is never processed or printed.

📝 Syntax

advanced

Identify the syntax error in this array iteration

Which option contains the syntax error?

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

B for arr in i { console.log(i); }

C for (let i of arr) console.log(i);

D for (let i in arr) { console.log(arr[i]); }

💡 Hint

Check the order of keywords in the for loop syntax.

Option B has incorrect syntax: 'for arr in i' is invalid. The correct syntax is 'for (let i of arr)'.

🚀 Application

expert

Find the sum of squares of even numbers using array iteration

Which code snippet correctly calculates the sum of squares of even numbers in the array [1,2,3,4,5,6]?

A

const arr = [1,2,3,4,5,6];
const sum = arr.filter(n => n % 2 === 0).map(n => n ** 2).reduce((a,b) => a + b, 0);
console.log(sum);

B

const arr = [1,2,3,4,5,6];
const sum = arr.map(n => n ** 2).filter(n => n % 2 === 0).reduce((a,b) => a + b, 0);
console.log(sum);

C

const arr = [1,2,3,4,5,6];
const sum = arr.reduce((a,b) => a + b ** 2, 0);
console.log(sum);

D

const arr = [1,2,3,4,5,6];
const sum = arr.reduce((a,b) => a + (b % 2 === 0 ? b ** 2 : 0), 0);
console.log(sum);

💡 Hint

Filter first to keep even numbers, then square, then sum.

Option A filters even numbers first, then squares them, then sums. Option A squares all first, then filters even squares (wrong). Option A sums squares of even numbers correctly but uses reduce only. Option A sums squares of all numbers (wrong).

Practice

1. Which of the following is the correct way to iterate over all elements in an array arr using for...of?

easy

A. arr.forEach(item => console.log(item));

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

C. for (const i in arr) { console.log(arr[i]); }

D. for (const item of arr) { console.log(item); }

Solution

1. Step 1: Understand for...of syntax

   The for...of loop directly accesses each element in the array, not the index.

2. Step 2: Identify the correct loop structure

   for (const item of arr) { console.log(item); } uses for (const item of arr), which correctly iterates over elements.

3. Final Answer:

   for (const item of arr) { console.log(item); } -> Option D

4. Quick Check:

   for...of loops over elements = C [OK]

Hint: Use for...of to get elements directly [OK]

Common Mistakes:

• Confusing for...in with for...of
• Using index instead of element in for...of
• Trying to use forEach syntax inside for...of

2. Which of the following is the correct syntax to use forEach to print each element of array nums?

easy

A. nums.forEach(function(item) { console.log(item); });

B. forEach(nums, item => console.log(item));

C. nums.forEach => console.log(item);

D. nums.forEach(item) { console.log(item); }

Solution

1. Step 1: Recall forEach method syntax

   forEach is called on the array with a function as argument: array.forEach(function(item) { ... }).

2. Step 2: Match correct syntax

   nums.forEach(function(item) { console.log(item); }); correctly uses nums.forEach(function(item) { console.log(item); }); which is valid.

3. Final Answer:

   nums.forEach(function(item) { console.log(item); }); -> Option A

4. Quick Check:

   array.forEach(function) syntax = A [OK]

Hint: Remember array.forEach(function) calls function on each item [OK]

Common Mistakes:

• Trying to call forEach as a standalone function
• Missing parentheses around function argument
• Using arrow syntax incorrectly without parentheses

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

const arr = [1, 2, 3];
let sum = 0;
for (const num of arr) {
  sum += num;
}
console.log(sum);

medium

A. 6

B. 123

C. 0

D. undefined

Solution

1. Step 1: Understand the loop and sum calculation

   The loop goes through each number in arr: 1, 2, 3, adding each to sum.

2. Step 2: Calculate the total sum

   sum = 0 + 1 + 2 + 3 = 6.

3. Final Answer:

   6 -> Option A

4. Quick Check:

   Sum of [1,2,3] = 6 [OK]

Hint: Add each element inside the loop to get total sum [OK]

Common Mistakes:

• Concatenating numbers as strings instead of adding
• Not initializing sum to 0
• Using wrong loop variable

4. Find the error in this code snippet that tries to print each element of items:

const items = ['a', 'b', 'c'];
for (let i = 0; i <= items.length; i++) {
  console.log(items[i]);
}

medium

A. The console.log statement is missing parentheses

B. The variable i should be declared with const

C. The loop condition should be i < items.length instead of i <= items.length

D. The array items is not defined

Solution

1. Step 1: Analyze the loop condition

   The loop runs while i <= items.length. Since array indices go from 0 to items.length - 1, this causes an out-of-bounds access at i = items.length.

2. Step 2: Correct the loop condition

   Change condition to i < items.length to avoid accessing undefined element.

3. Final Answer:

   The loop condition should be i < items.length instead of i <= items.length -> Option C

4. Quick Check:

   Loop index must be less than length, not less or equal [OK]

Hint: Use i < array.length to avoid out-of-range errors [OK]

Common Mistakes:

• Using <= instead of < in loop condition
• Trying to declare loop variable with const
• Ignoring array length boundaries

5. You have an array data = [0, 1, false, 2, '', 3]. You want to create a new array containing only the truthy values by iterating over data. Which code correctly does this?

hard

A. const result = data.filter(item => item == true);

B. const result = [];
data.forEach(item => { if (item) result.push(item); });

C. const result = [];
for (let i = 0; i < data.length; i++) { result.push(data[i]); }

D. const result = data.map(item => item ? item : null);

Solution

1. Step 1: Understand truthy filtering

   We want to keep only values that are truthy (not 0, false, '', null, undefined).

2. Step 2: Check each option

   const result = []; data.forEach(item => { if (item) result.push(item); }); uses forEach to push only truthy items, which is correct. const result = data.filter(item => item == true); uses == true which misses some truthy values like numbers. const result = []; for (let i = 0; i < data.length; i++) { result.push(data[i]); } copies all items without filtering. const result = data.map(item => item ? item : null); replaces falsy with null, not filtering.

3. Final Answer:

   const result = []; data.forEach(item => { if (item) result.push(item); }); -> Option B

4. Quick Check:

   Use forEach with if (item) to filter truthy [OK]

Hint: Use forEach with if (item) to keep truthy values [OK]

Common Mistakes:

• Using == true instead of checking truthiness
• Copying all elements without filtering
• Using map instead of filter or manual push