Array Traversal Patterns in DSA Javascript - Build from Scratch

Array Traversal Patterns

📖 Scenario: You are working on a simple inventory system for a small store. The store keeps a list of product names in an array. You need to go through this list to perform different tasks.

🎯 Goal: Learn how to traverse an array step-by-step using a for loop in JavaScript. You will create the array, set up a counter, loop through the array to count products, and finally print the total count.

📋 What You'll Learn

Create an array called products with these exact items: 'Apples', 'Bananas', 'Oranges', 'Grapes', 'Peaches'

Create a variable called count and set it to 0

Use a for loop with the variable i to traverse the products array

Inside the loop, increase count by 1 for each product

Print the value of count after the loop finishes

💡 Why This Matters

🌍 Real World

Array traversal is a basic skill used in many real-world programs, such as inventory management, data processing, and user interface updates.

💼 Career

Understanding how to loop through arrays is essential for software developers, data analysts, and anyone working with lists of data in programming.

1

Create the products array

Create an array called products with these exact items: 'Apples', 'Bananas', 'Oranges', 'Grapes', 'Peaches'

DSA Javascript

// Create the products array with the given items
// Your code here

Hint

Use square brackets [] to create an array and separate items with commas.

2

Set up the count variable

Create a variable called count and set it to 0

DSA Javascript

const products = ['Apples', 'Bananas', 'Oranges', 'Grapes', 'Peaches'];
// Create a variable called count and set it to 0
// Your code here

Hint

Use let to create a variable that can change later.

3

Traverse the array with a for loop

Use a for loop with the variable i to traverse the products array. Inside the loop, increase count by 1 for each product.

DSA Javascript

const products = ['Apples', 'Bananas', 'Oranges', 'Grapes', 'Peaches'];
let count = 0;
// Use a for loop with i to go through products
// Inside the loop, add 1 to count
// Your code here

Hint

Start i at 0, loop while i is less than products.length, and increase i by 1 each time.

4

Print the total count

Write a console.log statement to print the value of count after the loop finishes.

DSA Javascript

const products = ['Apples', 'Bananas', 'Oranges', 'Grapes', 'Peaches'];
let count = 0;
for (let i = 0; i < products.length; i++) {
    count += 1;
}
// Print the count
// Your code here

Hint

Use console.log(count); to show the number of products.

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