Iterating over arrays in Javascript - Step-by-Step Execution

Concept Flow - Iterating over arrays

Start with array

↓

Set index i = 0

↓

Check: i < array.length?

No→Exit loop

Yes↓

Access array[i

↓

Execute loop body

↓

Increment i by 1

↩Back to Check

We start with an array and an index at 0. We check if the index is less than the array length. If yes, we access the element at that index, run the loop body, then increase the index by 1. Repeat until the index reaches the array length.

Execution Sample

Javascript

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

This code prints each element of the array one by one.

Execution Table

Iteration	i	Condition (i < arr.length)	Action	Output
1	0	0 < 3 → true	Print arr[0] = 10	10
2	1	1 < 3 → true	Print arr[1] = 20	20
3	2	2 < 3 → true	Print arr[2] = 30	30
4	3	3 < 3 → false	Exit loop

💡 i reaches 3, condition 3 < 3 is false, loop ends

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
i	undefined	0	1	2	3
arr[i]	N/A	10	20	30	N/A

Key Moments - 3 Insights

Why does the loop stop when i equals arr.length?

Because the condition i < arr.length becomes false at that point, as shown in execution_table row 4, so the loop exits.

Why do we start i at 0 instead of 1?

Array indexes start at 0 in JavaScript, so to access the first element, i must be 0. This is shown in execution_table row 1 where i=0 accesses arr[0].

What happens if we use i <= arr.length instead of i < arr.length?

The loop would try to access arr[arr.length], which is undefined and may cause unexpected behavior. The condition must be strictly less than arr.length.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of i during the third iteration?

A 2

B 3

C 1

D 0

💡 Hint

Check the 'i' column in execution_table row 3.

At which iteration does the loop condition become false?

A Iteration 2

B Iteration 4

C Iteration 3

D Iteration 1

💡 Hint

Look at the 'Condition' column in execution_table row 4.

If the array length was 4 instead of 3, 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 < arr.length, so it runs once per index from 0 to length-1.

Concept Snapshot

for loop syntax to iterate arrays:
for (let i = 0; i < array.length; i++) {
  // use array[i]
}
Starts i at 0, runs while i < length, increments i by 1 each time.
Access elements by array[i].

Full Transcript

This visual trace shows how a for loop iterates over an array in JavaScript. We start with index i at 0 and check if i is less than the array length. If true, we access the element at array[i] and run the loop body, then increase i by 1. This repeats until i equals the array length, when the loop stops. The execution table shows each iteration's index, condition check, action, and output. The variable tracker shows how i and array[i] change step by step. Common confusions include why the loop stops at i equals length, why i starts at 0, and what happens if the condition is changed incorrectly. The quiz tests understanding of these steps.