Array Traversal Patterns in DSA Javascript

Mental Model

Going through each item in an array one by one to look at or change it.

Analogy: Like reading a list of names on a paper from top to bottom, checking each name carefully.

[0] -> [1] -> [2] -> [3] -> null
 ↑
start at first element

Dry Run Walkthrough

Input: array: [5, 10, 15, 20], goal: print each element

Goal: Visit each element in order and print its value

Step 1: start at index 0, print 5

[0:5↑] -> [1:10] -> [2:15] -> [3:20] -> null

Why: We begin with the first element to start traversal

Step 2: move to index 1, print 10

[0:5] -> [1:10↑] -> [2:15] -> [3:20] -> null

Why: Move forward to next element to continue traversal

Step 3: move to index 2, print 15

[0:5] -> [1:10] -> [2:15↑] -> [3:20] -> null

Why: Keep moving forward to visit all elements

Step 4: move to index 3, print 20

[0:5] -> [1:10] -> [2:15] -> [3:20↑] -> null

Why: Last element to visit before finishing

Result:

[0:5] -> [1:10] -> [2:15] -> [3:20] -> null
Printed: 5 10 15 20

Annotated Code

DSA Javascript

class ArrayTraversal {
  static printElements(arr) {
    for (let i = 0; i < arr.length; i++) {
      console.log(arr[i]); // print current element
    }
  }
}

const inputArray = [5, 10, 15, 20];
ArrayTraversal.printElements(inputArray);

for (let i = 0; i < arr.length; i++) {

advance index i from 0 to last element to visit each array item

console.log(arr[i]); // print current element

output the current element at index i

Output

5

10

15

20

Complexity Analysis

Time: O(n) because we visit each of the n elements once

Space: O(1) because we use only a few variables regardless of array size

vs Alternative: Compared to random access, traversal is simple and linear; no extra memory or complex steps needed

Edge Cases

empty array []

loop does not run, nothing is printed

DSA Javascript

for (let i = 0; i < arr.length; i++) {

array with one element [7]

prints the single element once

DSA Javascript

for (let i = 0; i < arr.length; i++) {

When to Use This Pattern

When you need to process or check every item in a list one by one, use array traversal to visit each element in order.

Common Mistakes

Mistake: Using <= instead of < in loop condition causing out-of-bounds error
Fix: Change loop condition to i < arr.length to avoid accessing invalid index

Mistake: Modifying array length inside traversal causing unexpected behavior
Fix: Avoid changing array size during traversal or handle carefully with updated length

Summary

It goes through each element in an array one by one.

Use it when you want to look at or change every item in a list.

Remember to start at the first element and move forward until the end.

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