Array Traversal Patterns in DSA Javascript - Execution Trace

Concept Flow - Array Traversal Patterns

Start at index 0

↓

Check: index < array.length?

No→END

Yes↓

Process element at index

↓

Increment index

↩Back to Check

Start from the first element, check if index is within array bounds, process element, then move to next index until all elements are visited.

Execution Sample

DSA Javascript

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

Traverse the array from start to end, printing each element.

Execution Table

Step	Operation	Index (i)	Condition (i < length)	Element Accessed	Output	Next Index
1	Initialize i	0	0 < 3 (true)	arr[0] = 10	10	1
2	Increment i	1	1 < 3 (true)	arr[1] = 20	20	2
3	Increment i	2	2 < 3 (true)	arr[2] = 30	30	3
4	Increment i	3	3 < 3 (false)	N/A	Loop ends	N/A

💡 Index i reaches 3 which is not less than array length 3, loop terminates.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4
i	undefined	0	1	2	3
Output	[]	[10]	[10, 20]	[10, 20, 30]	[10, 20, 30]

Key Moments - 3 Insights

Why does the loop stop when i equals the array length?

Because the condition i < arr.length becomes false at step 4, preventing out-of-bounds access as shown in the execution_table.

What happens if we start i at 1 instead of 0?

The loop would skip the first element (index 0). The execution_table shows i starting at 0 to include all elements.

Why do we use i < arr.length and not i <= arr.length?

Using i <= arr.length would cause an attempt to access arr[arr.length], which is undefined. The execution_table's condition check prevents this.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of i at step 3?

A 3

B 2

C 1

D 0

💡 Hint

Check the 'Index (i)' column at step 3 in the execution_table.

At which step does the loop condition become false?

A Step 4

B Step 3

C Step 2

D Step 1

💡 Hint

Look at the 'Condition (i < length)' column to find when it is false.

If the array length was 4, how many times would the loop run?

A 5 times

B 3 times

C 4 times

D 2 times

💡 Hint

The loop runs while i < array length, so it runs once per element.

Concept Snapshot

Array Traversal Pattern:
- Start index at 0
- Loop while index < array length
- Access element at current index
- Increment index
- Stops when index reaches array length

Full Transcript

This visual trace shows how to traverse an array using a for loop. We start with index i at 0, check if i is less than the array length, then access the element at i and print it. After processing, we increase i by 1 and repeat. The loop stops when i equals the array length to avoid accessing outside the array. The execution table tracks each step, showing index values, condition checks, elements accessed, and outputs. The variable tracker shows how i and output change over time. Key moments clarify why the loop stops at the array length and why starting index matters. The quiz tests understanding of index values and loop termination.

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