Array Traversal Patterns in DSA Javascript - Practice Problems & Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of nested array traversal with condition

What is the output of the following JavaScript code that traverses a 2D array and collects values greater than 3?

DSA Javascript

const arr = [[1, 4], [3, 5], [2, 6]];
const result = [];
for (let i = 0; i < arr.length; i++) {
  for (let j = 0; j < arr[i].length; j++) {
    if (arr[i][j] > 3) {
      result.push(arr[i][j]);
    }
  }
}
console.log(result);

A [4, 5, 6]

B [1, 3, 2]

C [4, 3, 5, 6]

D [5, 6]

💡 Hint

Focus on the condition inside the nested loops and which values satisfy it.

The code checks each element in the 2D array and adds it to the result only if it is greater than 3. Values 4, 5, and 6 satisfy this condition.

❓ Predict Output

intermediate

Output of reverse traversal with step

What is the output of this code that traverses an array backwards, skipping every other element?

DSA Javascript

const arr = [10, 20, 30, 40, 50, 60];
const result = [];
for (let i = arr.length - 1; i >= 0; i -= 2) {
  result.push(arr[i]);
}
console.log(result);

A [60, 50, 40, 30, 20, 10]

B [50, 30, 10]

C [60, 40, 20]

D [60, 40, 30]

💡 Hint

Look at the loop decrement and how it skips elements.

The loop starts at index 5 (value 60) and decreases by 2 each time, so it picks elements at indices 5, 3, and 1 which are 60, 40, and 20.

🔧 Debug

advanced

Identify the error in array traversal with forEach

What error will this code produce when trying to traverse and modify an array using forEach?

DSA Javascript

const arr = [1, 2, 3];
arr.forEach((num, index) => {
  if (num === 2) {
    arr.splice(index, 1);
  }
});
console.log(arr);

A [1, 3]

B [1, 2, 3]

C TypeError: arr.splice is not a function

D No error, but unexpected output due to modification during traversal

💡 Hint

Consider what happens when you modify an array while looping with forEach.

Modifying the array during forEach traversal can cause unexpected behavior because the internal index tracking gets confused, but no error is thrown.

❓ Predict Output

advanced

Output of map with nested arrays and flattening

What is the output of this code that maps and flattens a nested array?

DSA Javascript

const arr = [[1, 2], [3, 4], [5]];
const result = arr.map(subArr => subArr.map(x => x * 2)).flat();
console.log(result);

A [2, 4, [6, 8], 10]

B [2, 4, 6, 8, 10]

C [1, 2, 3, 4, 5]

D [[2, 4], [6, 8], [10]]

💡 Hint

Remember that map returns arrays and flat removes one level of nesting.

Each inner array is doubled element-wise, then flat removes one level of nesting, resulting in a single array with doubled values.

🧠 Conceptual

expert

Time complexity of nested array traversal with early break

Consider a nested loop traversing a 2D array of size n x n. The inner loop breaks early when a condition is met. What is the best case time complexity of this traversal?

A O(n)

B O(n^2)

C O(log n)

D O(1)

💡 Hint

Think about how early breaks affect the number of inner loop iterations.

If the inner loop breaks immediately for each outer iteration, the total operations are proportional to n, so best case is O(n).

Practice

1. What does the following code do?
for (let i = 0; i < arr.length; i++) { console.log(arr[i]); }

easy

A. Prints only the first element of the array

B. Prints the array elements in reverse order

C. Prints each element of the array from first to last

D. Prints the length of the array

Solution

1. Step 1: Understand the loop range

   The loop starts at 0 and runs while i is less than arr.length, so it covers all valid indexes.

2. Step 2: Check the action inside the loop

   Each iteration prints arr[i], which is the element at index i, so all elements are printed in order.

3. Final Answer:

   Prints each element of the array from first to last -> Option C

4. Quick Check:

   Loop from 0 to length prints all elements [OK]

Hint: Loop from 0 to length prints all elements in order [OK]

Common Mistakes:

• Thinking it prints in reverse order
• Assuming it prints only one element
• Confusing index with value

2. Which of the following is the correct syntax to traverse an array arr using a for...of loop in JavaScript?

easy

A. for (let element of arr) { console.log(element); }

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

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

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

Solution

1. Step 1: Identify the for...of syntax

   The for...of loop iterates over values directly, so syntax is for (let element of arr).

2. Step 2: Check each option

   for (let element of arr) { console.log(element); } matches the correct for...of syntax. Others use different loops or incorrect conditions.

3. Final Answer:

   for (let element of arr) { console.log(element); } -> Option A

4. Quick Check:

   for...of loops over values [OK]

Hint: Use 'for (let x of arr)' to loop over values directly [OK]

Common Mistakes:

• Using 'for...in' instead of 'for...of'
• Using <= instead of < in loop condition
• Confusing index and element in loops

3. What is the output of the following code?

const arr = [10, 20, 30];
let result = '';
for (let i = arr.length - 1; i >= 0; i--) {
  result += arr[i] + ' ';
}
console.log(result.trim());

medium

A. 10 20 30

B. 30 20 10

C. SyntaxError

D. 30 10 20

Solution

1. Step 1: Understand the loop direction

   The loop starts at index 2 (arr.length - 1) and decrements to 0, so it goes backward through the array.

2. Step 2: Trace the concatenation

   Elements are added in order: arr[2] = 30, arr[1] = 20, arr[0] = 10, separated by spaces.

3. Final Answer:

   30 20 10 -> Option B

4. Quick Check:

   Loop backward prints reversed array [OK]

Hint: Loop from length-1 down to 0 prints array in reverse [OK]

Common Mistakes:

• Confusing loop direction and printing original order
• Off-by-one errors in loop condition
• Forgetting to trim trailing space

4. Find the error in this code snippet that tries to print all elements of arr:

const arr = [1, 2, 3];
for (let i = 0; i <= arr.length; i++) {
  console.log(arr[i]);
}

medium

A. Using <= causes accessing undefined element at the end

B. Missing declaration of i

C. Should use for...of loop instead

D. Array length is incorrect

Solution

1. Step 1: Analyze loop condition

   The loop runs while i <= arr.length, so i reaches arr.length which is out of bounds.

2. Step 2: Understand effect of out-of-bounds access

   Accessing arr[arr.length] returns undefined, so console.log prints undefined after last element.

3. Final Answer:

   Using <= causes accessing undefined element at the end -> Option A

4. Quick Check:

   Loop should use < not <= for array indexes [OK]

Hint: Use i < arr.length, not <=, to avoid undefined access [OK]

Common Mistakes:

• Using <= instead of < in loop condition
• Ignoring undefined output at end
• Thinking array length is zero-based

5. Given a nested array arr = [[1, 2], [3, 4], [5, 6]], which code correctly prints all elements in order using nested loops?

hard

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

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

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

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

Solution

1. Step 1: Understand nested array structure

   arr is an array of arrays, so to access each element, two loops are needed: outer for sub-arrays, inner for elements.

2. Step 2: Check each option

   for (let i = 0; i < arr.length; i++) { for (let j = 0; j < arr[i].length; j++) { console.log(arr[i][j]); } } uses two loops with correct ranges and indexes to print each element. for (let i of arr) { console.log(i); } prints sub-arrays, not elements. for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } prints sub-arrays. for (let i in arr) { for (let j in arr) { console.log(arr[i][j]); } } incorrectly loops inner array length.

3. Final Answer:

   for (let i = 0; i < arr.length; i++) { for (let j = 0; j < arr[i].length; j++) { console.log(arr[i][j]); } } -> Option D

4. Quick Check:

   Nested loops needed for nested arrays [OK]

Hint: Use nested loops: outer for arrays, inner for elements [OK]

Common Mistakes:

• Using single loop prints sub-arrays, not elements
• Using wrong inner loop length
• Confusing for...in with for...of in nested loops