Array Traversal Patterns in DSA Javascript - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to print each element of the array using a for loop.

DSA Javascript

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

Drag options to blanks, or click blank then click option'

A>=

B<

C>

D<=

Attempts:

3 left

💡 Hint

Common Mistakes

Using '<=' causes an out-of-bounds error.

Using '>' or '>=' will not enter the loop.

The loop should run while i is less than arr.length to avoid going out of bounds.

2fill in blank

medium

Complete the code to sum all elements in the array using a for...of loop.

DSA Javascript

const numbers = [5, 10, 15];
let sum = 0;
for (const [1] of numbers) {
  sum += [1];
}
console.log(sum);

Drag options to blanks, or click blank then click option'

Aindex

Bi

Cnum

Delement

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names inside the loop body.

Using index variables which are not available in for...of loops.

The variable name inside the for...of loop can be any valid identifier; here 'num' is used consistently.

3fill in blank

hard

Fix the error in the code to correctly print elements in reverse order.

DSA Javascript

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

Drag options to blanks, or click blank then click option'

A>=

B>

C<=

D<

Attempts:

3 left

💡 Hint

Common Mistakes

Using '>' excludes the first element at index 0.

Using '<=' or '<' will not work for reverse traversal.

The loop should continue while i is greater than or equal to 0 to include the first element.

4fill in blank

hard

Fill both blanks to create an array of squares for numbers greater than 3.

DSA Javascript

const numbers = [1, 2, 3, 4, 5];
const squares = numbers.filter(n => n [1] 3).map(n => n [2] 2);
console.log(squares);

Drag options to blanks, or click blank then click option'

A>

B**

C*

D<

Attempts:

3 left

💡 Hint

Common Mistakes

Using '<' in filter returns wrong numbers.

Using '*' instead of '**' for exponentiation in map.

Filter selects numbers greater than 3, then map squares them using '**' operator.

5fill in blank

hard

Fill all three blanks to create an object mapping each word to its length if length is more than 4.

DSA Javascript

const words = ['apple', 'bat', 'carrot', 'dog'];
const result = {};
for (const word of words) {
  if (word.length [3] 4) {
    result[[1]] = [2];
  }
}
console.log(result);

Drag options to blanks, or click blank then click option'

Aword

Bword.length

C>

Dword.toUpperCase()

Attempts:

3 left

💡 Hint

Common Mistakes

Using word.toUpperCase() as key changes keys unexpectedly.

Using '<' in filter returns wrong words.

The object keys are words, values are their lengths, filtered by length > 4.

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