Why Array Traversal Patterns in DSA Javascript?

The Big Idea

What if you could instantly and perfectly check every item in a huge list without missing a single one?

The Scenario

Imagine you have a list of your favorite songs written on paper. To find a specific song or to check all songs, you have to look at each one, one by one, from the start to the end.

The Problem

Going through the list manually is slow and tiring, especially if the list is very long. You might lose your place or skip songs by mistake. It's hard to keep track and easy to make errors.

The Solution

Array traversal patterns are like having a clear, step-by-step way to look at each song in your list without missing any. They help you move through the list smoothly and find or process items quickly and correctly.

Before vs After

✗ Before

const songs = ['Song1', 'Song2', 'Song3'];
// Manually check each song
console.log(songs[0]);
console.log(songs[1]);
console.log(songs[2]);

✓ After

const songs = ['Song1', 'Song2', 'Song3'];
for (let index = 0; index < songs.length; index++) {
  console.log(songs[index]);
}

What It Enables

With array traversal patterns, you can easily and reliably process every item in a list, no matter how big, making your programs smarter and faster.

Real Life Example

When you scroll through your photo gallery on your phone, the app uses array traversal patterns to show each photo one by one without missing any.

Key Takeaways

Manual checking of list items is slow and error-prone.

Array traversal patterns provide a clear, reliable way to visit each item.

This makes handling lists easier, faster, and less error-prone.

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