Array Traversal Patterns in DSA Typescript - Execution Trace

Concept Flow - Array Traversal Patterns

Start at index 0

↓

Check: index < array.length?

No→End traversal

Yes↓

Process element at index

↓

Increment index by 1

↩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 Typescript

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	Element Accessed	Output	Array State
1	Initialize index	0	N/A	N/A	[10, 20, 30]
2	Check condition i < length	0 < 3	N/A	True	[10, 20, 30]
3	Access element	0	10	10	[10, 20, 30]
4	Increment index	1	N/A	N/A	[10, 20, 30]
5	Check condition i < length	1 < 3	N/A	True	[10, 20, 30]
6	Access element	1	20	20	[10, 20, 30]
7	Increment index	2	N/A	N/A	[10, 20, 30]
8	Check condition i < length	2 < 3	N/A	True	[10, 20, 30]
9	Access element	2	30	30	[10, 20, 30]
10	Increment index	3	N/A	N/A	[10, 20, 30]
11	Check condition i < length	3 < 3	N/A	False	[10, 20, 30]
12	End traversal	N/A	N/A	N/A	[10, 20, 30]

💡 Index reaches array length (3), condition i < 3 is False, traversal ends.

Variable Tracker

Variable	Start	After Step 4	After Step 7	After Step 10	Final
i	undefined	1	2	3	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 arrays are zero-indexed, valid indices are 0 to length-1. When i equals length, it is outside the array bounds, so the condition i < length becomes false (see execution_table row 11).

What happens if we try to access arr[i] when i equals the array length?

Accessing arr[i] at i == length would be undefined or error because that index does not exist. The loop condition prevents this by stopping before i reaches length (see execution_table rows 10 and 11).

Why do we increment the index after processing the element?

Incrementing after processing ensures each element is accessed exactly once in order. If increment happened before processing, the first element would be skipped (see execution_table steps 3 and 4).

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'i' when the element 20 is accessed?

A 0

B 2

C 1

D 3

💡 Hint

Check the 'Index' column in rows where 'Element Accessed' is 20.

At which step does the loop condition become false, ending the traversal?

A Step 9

B Step 11

C Step 10

D Step 12

💡 Hint

Look for the step where 'Check condition i < length' results in 'False'.

If the array had 4 elements instead of 3, how many times would the loop run?

A 4 times

B 3 times

C 5 times

D Depends on element values

💡 Hint

Loop runs while i < array.length; length determines iterations (see variable_tracker for i values).

Concept Snapshot

Array Traversal Pattern:
- Start index at 0
- Loop while index < array length
- Process element at current index
- Increment index by 1
- Stop when index reaches length
This ensures every element is visited once in order.

Full Transcript

Array traversal means visiting each element in order from the first to the last. We start with an index at zero, check if it is less than the array's length, then access the element at that index. After processing, we increase the index by one and repeat. When the index equals the array length, the loop stops because there are no more elements. This pattern ensures all elements are visited exactly once without errors.

Practice

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

easy

A. Prints each element of the array from start to end

B. Prints the array elements in reverse order

C. Prints only the first element of the array

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: Analyze the console.log statement

   Each iteration prints the element at index i, so all elements are printed in order.

3. Final Answer:

   Prints each element of the array from start to end -> Option A

4. Quick Check:

   Standard forward traversal prints all elements [OK]

Hint: For loop from 0 to length prints array forward [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 TypeScript?

easy

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

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

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

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

Solution

1. Step 1: Identify for-of loop syntax

   The for-of loop syntax is: for (let element of array) { ... }

2. Step 2: Match with options

   for (let item of arr) { console.log(item); } matches this syntax and prints each element directly.

3. Final Answer:

   for (let item of arr) { console.log(item); } -> Option B

4. Quick Check:

   for-of loops use 'of' keyword to iterate elements [OK]

Hint: for-of loops use 'of' keyword to get elements directly [OK]

Common Mistakes:

• Using for-in to get elements instead of indexes
• Confusing for-of with traditional for loop syntax
• Using wrong loop conditions

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

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

medium

A. SyntaxError

B. [10, 20, 30]

C. [undefined, 30, 20]

D. [30, 20, 10]

Solution

1. Step 1: Understand the loop direction

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

2. Step 2: Track elements pushed to result

   Elements pushed in order: arr[2] = 30, arr[1] = 20, arr[0] = 10, so result = [30, 20, 10].

3. Final Answer:

   [30, 20, 10] -> Option D

4. Quick Check:

   Reverse traversal collects elements backward [OK]

Hint: Loop from length-1 down to 0 reverses array [OK]

Common Mistakes:

• Assuming forward order output
• Confusing index bounds causing undefined
• Thinking it causes syntax error

4. Identify the error in the following code snippet that attempts 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. The loop condition should be i < arr.length, not i <= arr.length

B. The variable i should start from 1, not 0

C. The array should be traversed using for-of loop only

D. There is no error; code works fine

Solution

1. Step 1: Check loop condition

   The loop runs while i <= arr.length, which means i can be equal to arr.length (3), an invalid index.

2. Step 2: Understand array indexing

   Array indexes go from 0 to arr.length - 1, so accessing arr[3] is undefined and may cause unexpected output.

3. Final Answer:

   The loop condition should be i < arr.length, not i <= arr.length -> Option A

4. Quick Check:

   Array indexes go from 0 to length-1 [OK]

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

Common Mistakes:

• Using <= instead of < in loop condition
• Starting index at 1 instead of 0
• Thinking for-of is mandatory

5. Given an array arr of numbers, which code snippet correctly creates a new array containing only the even numbers from arr using array traversal?

hard

A. const evens = [];
for (let x of arr) {
if (x % 2 === 0) evens.push(x);
}

B. const evens = arr.filter(x => x % 2 === 0);

C. All of the above

D. const evens = [];
for (let i = 0; i < arr.length; i++) {
if (arr[i] % 2 === 0) evens.push(arr[i]);
}

Solution

1. Step 1: Analyze const evens = []; for (let i = 0; i < arr.length; i++) { if (arr[i] % 2 === 0) evens.push(arr[i]); }

   Uses a for loop with index to check each element and push even numbers. Correct traversal and filtering.

2. Step 2: Analyze const evens = arr.filter(x => x % 2 === 0); and C

   const evens = arr.filter(x => x % 2 === 0); uses filter method which internally traverses array and filters evens. const evens = []; for (let x of arr) { if (x % 2 === 0) evens.push(x); } uses for-of loop to traverse and filter evens. Both are correct.

3. Step 3: Combine understanding

   All three options correctly traverse and select even numbers.

4. Final Answer:

   All of the above -> Option C

5. Quick Check:

   Multiple traversal patterns can filter arrays correctly [OK]

Hint: Any loop or filter method can select elements by condition [OK]

Common Mistakes:

• Assuming only for loop works
• Confusing filter syntax
• Forgetting to check modulo condition