⬅ Back

ARRAY ITERATION IN JAVASCRIPT

This note explains array iteration in simple language.

Array iteration means going through array elements one by one and doing some action for each element.

This is a very important topic because in real programs you often need to print values, count values, check values, build a new result, or search inside an array.

1. What is array iteration?

An array stores many values. Very often, a program needs to work with every element in that array.

That process is called iteration.

Example idea

const planets = ["Earth", "Mars", "Venus"];

With this array, you may want to print every planet, count them, check their names, or build another result from them.

Diagram 1. What iteration means

Array
│
├─ "Earth"
├─ "Mars"
└─ "Venus"

Iteration:
go to first element
↓
go to second element
↓
go to third element

Explanation

Iteration means moving through the array step by step, from one element to the next.

2. Why array iteration is useful

Without iteration, you would need to write code for every element manually.

Bad idea

console.log(planets[0]);
console.log(planets[1]);
console.log(planets[2]);

This works only for very small arrays. If the array has 100 or 1000 elements, this is not practical. So we use loops.

Diagram 2. Manual access vs iteration

Manual:
element 0
element 1
element 2
element 3
...

Iteration:
one loop
handles all elements

Explanation

A loop helps you repeat the same action for all array elements automatically.

3. Iterating with a for loop

A normal for loop is a classic way to iterate over an array.

const planets = ["Earth", "Mars", "Venus"];

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

Output

Earth
Mars
Venus

Diagram 3. Structure of the for loop

for (start; condition; step) {
  code
}

start     → let i = 0
condition → i < planets.length
step      → i += 1

Explanation

The loop starts at index 0, continues while the index is smaller than the array length, and increases the index by 1 on each iteration.

4. Understanding the counter i

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

The variable i is the counter. It stores the current index.

Diagram 4. Counter values step by step

Array: ["Earth", "Mars", "Venus"]

1st iteration:
i = 0 → planets[0] → "Earth"

2nd iteration:
i = 1 → planets[1] → "Mars"

3rd iteration:
i = 2 → planets[2] → "Venus"

Explanation

The counter gives access to the correct index at each step.

5. Why the condition uses .length

In the loop, JavaScript checks whether the index is still valid.

i < planets.length

For this array, the length is 3:

const planets = ["Earth", "Mars", "Venus"];

So the valid indexes are 0, 1, and 2. When i becomes 3, the condition is false, and the loop stops.

Diagram 5. Why the loop stops

planets.length = 3

Check values of i:
i = 0 → 0 < 3 → true
i = 1 → 1 < 3 → true
i = 2 → 2 < 3 → true
i = 3 → 3 < 3 → false
stop

Explanation

That is why the loop does not go outside the array.

6. Full step-by-step execution of the for loop

const planets = ["Earth", "Mars", "Venus"];

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

Diagram 6. Full execution flow

Start:
i = 0

Check:
0 < 3 → true
Print planets[0] → "Earth"
Increase i → 1

Check:
1 < 3 → true
Print planets[1] → "Mars"
Increase i → 2

Check:
2 < 3 → true
Print planets[2] → "Venus"
Increase i → 3

Check:
3 < 3 → false
Stop

Explanation

This is exactly how JavaScript moves through the array using a for loop.

7. Why for is useful

The regular for loop is useful when you need the index, a custom start value, a custom stop condition, or a custom step.

For example, you can start from the second element, skip elements, stop before the end, or go backwards.

Diagram 7. When for is a good choice

Use for when you need:
1. the index
2. custom start
3. custom stop
4. custom step

Explanation

The for loop gives you more control than for...of.

8. The for...of loop

for...of is a simpler way to iterate over an array. It is very convenient when you do not need the index.

Syntax

for (const element of array) {
  // loop body
}

Diagram 8. Structure of for...of

for (const element of array) {
  code
}

element → current value
array   → source array

Explanation

Instead of working with indexes, for...of gives you the values directly.

9. Example of for...of

const planets = ["Earth", "Mars", "Venus"];

for (const planet of planets) {
  console.log(planet);
}

Output

Earth
Mars
Venus

Diagram 9. How for...of moves through values

Array: ["Earth", "Mars", "Venus"]

1st iteration:
planet = "Earth"

2nd iteration:
planet = "Mars"

3rd iteration:
planet = "Venus"

Explanation

Here you do not see indexes. You work directly with the values.

10. for vs for...of

for

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

for...of

for (const planet of planets) {
  console.log(planet);
}

Diagram 10. Main difference

for
→ works with indexes

for...of
→ works with values directly

Explanation

This is the biggest difference between the two styles.

11. When to use for...of

Use for...of when you only need the element value, you do not need the index, and you want cleaner and simpler code.

Diagram 11. When for...of is best

Use for...of when:
1. index is not needed
2. you just want each value
3. you want more readable code

Explanation

For simple iteration, for...of is often easier to read.

12. Example: printing array values

With for

const colors = ["red", "green", "blue"];

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

With for...of

const colors = ["red", "green", "blue"];

for (const color of colors) {
  console.log(color);
}

Both produce the same output.

Diagram 12. Same result, different style

for        → get value through colors[i]
for...of   → get value directly as color

Result:
red
green
blue

Explanation

If you do not need the index, for...of is usually shorter.

13. Example: when the index is needed

Sometimes you need the index itself. For example, maybe you want to print both index and value.

const planets = ["Earth", "Mars", "Venus"];

for (let i = 0; i < planets.length; i += 1) {
  console.log(i, planets[i]);
}

Output

0 Earth
1 Mars
2 Venus

Diagram 13. Index + value

i = 0 → planets[0] → "Earth"
i = 1 → planets[1] → "Mars"
i = 2 → planets[2] → "Venus"

Explanation

This is a case where the normal for loop is better, because for...of does not give the index directly.

14. Example: starting from another position

A for loop can start from a custom index.

const planets = ["Earth", "Mars", "Venus"];

for (let i = 1; i < planets.length; i += 1) {
  console.log(planets[i]);
}

Output

Mars
Venus

Diagram 14. Starting from index 1

Array:
0 → "Earth"
1 → "Mars"
2 → "Venus"

Start at i = 1
↓
Skip "Earth"
↓
Print "Mars", "Venus"

Explanation

This is easy with a for loop because you control the starting value of the counter.

15. Example: skipping elements

A for loop can also skip elements by changing the step.

const numbers = [10, 20, 30, 40, 50, 60];

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

Output

10
30
50

Diagram 15. Step of 2

Indexes visited:
0 → 2 → 4

Values:
10 → 30 → 50

Explanation

Because i += 2, the loop jumps over every second element.

16. for...of always goes from first to last

for...of always iterates in the normal order: first element, second element, third element, and so on.

You cannot directly set a custom start, a custom step, or a custom end condition in the loop header.

Diagram 16. Fixed direction of for...of

for...of
always goes:
first → second → third → ... → last

Explanation

That is why for...of is simpler, but also less flexible than for.

17. Stopping a for...of loop with break

Even though you cannot define a custom stop condition in the for...of header, you can still stop the loop early using break.

const planets = ["Earth", "Mars", "Venus", "Jupiter"];

for (const planet of planets) {
  if (planet === "Venus") {
    break;
  }

  console.log(planet);
}

Output

Earth
Mars

Diagram 17. break inside for...of

planet = "Earth"  → print
planet = "Mars"   → print
planet = "Venus"  → break
stop

Explanation

When JavaScript sees break, the loop ends immediately.

18. Stopping a normal for loop with break

The same can be done in a normal for loop.

const planets = ["Earth", "Mars", "Venus", "Jupiter"];

for (let i = 0; i < planets.length; i += 1) {
  if (planets[i] === "Venus") {
    break;
  }

  console.log(planets[i]);
}

Output

Earth
Mars

Diagram 18. break in a for loop

i = 0 → "Earth"  → print
i = 1 → "Mars"   → print
i = 2 → "Venus"  → break
stop

Explanation

break works in both loop types.

19. Building a result while iterating

Iteration is not only for printing values. You can also use iteration to calculate or build something.

Example: building one string

const planets = ["Earth", "Mars", "Venus"];
let result = "";

for (const planet of planets) {
  result += planet + " ";
}

console.log(result); // "Earth Mars Venus "

Diagram 19. Building result step by step

Start:
result = ""

After "Earth":
result = "Earth "

After "Mars":
result = "Earth Mars "

After "Venus":
result = "Earth Mars Venus "

Explanation

Each iteration updates the result. This is a common pattern in programming.

20. Counting with iteration

You can also use iteration to count elements that match a condition.

const numbers = [1, 2, 3, 4, 5];
let count = 0;

for (const number of numbers) {
  if (number > 2) {
    count += 1;
  }
}

console.log(count); // 3

Diagram 20. Counting matching elements

Numbers:
1, 2, 3, 4, 5

Condition: number > 2

3 → yes
4 → yes
5 → yes

Total count = 3

Explanation

Iteration lets you check every value one by one.

21. Accessing values by index vs direct values

With for

planets[i]

With for...of

planet

Diagram 21. Two ways to get current value

for:
index → array[index] → value

for...of:
value directly

Explanation

This is why for...of often looks cleaner.

22. Real rule for choosing the loop

Use for when:

Use for...of when:

Diagram 22. Choosing the right loop

Need index or custom control?
→ use for

Need only values?
→ use for...of

Explanation

This is the most practical decision rule.

23. Common beginner mistakes

Mistake 1. Starting from 1 instead of 0

Wrong if you want all elements:

for (let i = 1; i < planets.length; i += 1)

This skips the first element.

Mistake 2. Using <= instead of <

Wrong:

for (let i = 0; i <= planets.length; i += 1)

This goes one step too far and tries to access:

planets[planets.length]

That value is undefined.

Diagram 23. < vs <=

Correct:
i < array.length

Wrong for full normal iteration:
i <= array.length

Explanation

The last valid index is length - 1, not length.

More common mistakes

Mistake 3. Forgetting that for...of gives a value, not an index

Wrong idea:

for (const planet of planets) {
  console.log(planets[planet]);
}

Here planet already is the value like "Earth", not the index.

Correct:

for (const planet of planets) {
  console.log(planet);
}

Mistake 4. Forgetting i += 1

Wrong:

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

This may create an infinite loop because i never changes.

Diagram 24. Common mistakes in loops

1. Starting at 1 by accident
2. Using <= instead of <
3. Confusing value with index in for...of
4. Forgetting to increase the counter

Explanation

These are very common beginner errors in array iteration.

24. Practical examples

Example 1. Print all fruits

const fruits = ["apple", "banana", "orange"];

for (const fruit of fruits) {
  console.log(fruit);
}

Example 2. Print indexes and values

const fruits = ["apple", "banana", "orange"];

for (let i = 0; i < fruits.length; i += 1) {
  console.log(i, fruits[i]);
}

Example 3. Stop at a certain value

const fruits = ["apple", "banana", "orange", "grape"];

for (const fruit of fruits) {
  if (fruit === "orange") {
    break;
  }

  console.log(fruit);
}

Example 4. Skip the first value

const fruits = ["apple", "banana", "orange"];

for (let i = 1; i < fruits.length; i += 1) {
  console.log(fruits[i]);
}

Diagram 25. Useful loop patterns

Print values only        → for...of
Need index and value     → for
Need custom start        → for
Need skip elements       → for
Need simple full pass    → for...of

Explanation

These are common real-life loop patterns.

25. Quick summary

Array iteration

Going through array elements one by one.

for loop

Useful when you need the index or custom control.

for...of loop

Useful when you only need the current value.

break

Stops the loop early.

i < array.length

The standard safe condition for iterating through all elements with a for loop.

Diagram 26. Final map of array iteration

Array iteration
│
├─ for
│  ├─ index
│  ├─ custom start
│  ├─ custom step
│  └─ custom stop logic
│
└─ for...of
   ├─ simpler syntax
   ├─ direct values
   └─ no direct index

Explanation

This is the full beginner picture of array iteration.

26. Revision block

1. Array iteration means going through elements one by one
2. A for loop uses an index counter
3. Array indexes start at 0
4. The usual condition is i < array.length
5. for...of gives the current value directly
6. Use for when you need the index
7. Use for...of when you only need the values
8. break stops a loop early
9. Be careful not to use <= when iterating normally
10. Do not confuse index and value

27. Final conclusion

Array iteration is one of the foundations of JavaScript.

If you understand how a for loop works with arrays, how for...of works, when to choose each one, how to use break, and how to avoid common loop mistakes, then you already have a strong base for working with collections of data.

Array iteration is used everywhere in full stack development: rendering lists, checking items, counting results, filtering values, processing API data, and building output.

⬅ Back