Array Iteration
- This lesson explains various methods to iterate over arrays.
Introduction to Array Iteration
An array is used to store multiple values in a single variable.
Very often, we need to access each element of an array one by one to:Display data
Perform calculations
Apply conditions
Modify values
This process is called array iteration.
What is Array Iteration ?
Array iteration means traversing through each element of an array, from the first element to the last, and performing an operation on each element.
Why Do We Need Array Iteration ?
Without iteration:
We cannot process all elements efficiently
Code becomes repetitive
With iteration:
Code becomes dynamic
Logic is reusable
Arrays become powerful
Iteration Techniques
JavaScript provides multiple ways to iterate over arrays.
In this lesson, we will focus on:for loop
for...of loop
forEach() method
Each technique has its own use case.
Iteration Using for Loop
What is the for Loop ?
The for loop is the traditional and most flexible way to iterate over an array.
It uses an index number to access array elements.
Syntax of for Loop with Array
for (let i = 0; i < array.length; i++) {
// code using array[i]
}
Array Iteration using for Loop
Uses index-based looping to access each element of an array.
// Iterating array using for loop
let fruits = ["Apple", "Banana", "Mango"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}Explanation
i = 0 starts from first index
i < fruits.length ensures loop runs till last element
fruits[i] accesses each element
When to Use for Loop ?
When index is required
When modifying array elements
When complex logic is needed
Iteration Using for...of Loop
What is for...of Loop ?
The for...of loop is a modern and cleaner way to iterate over iterable objects like arrays.It directly gives the value, not the index.
Syntax of for...of
for (let element of array) {
// code using element
}
for...of Loop
Directly accesses each value in an array without using index.
// Iterating using for...of
let colors = ["Red", "Green", "Blue"];
for (let color of colors) {
console.log(color);
}- Difference Between for and for...of
Feature for Loop for...of Loop Uses index Yes No Syntax Longer Cleaner Best for Index-based logic Value-based logic Modifying array Easy Limited When to Use for...of ?
When index is not needed
When readability is important
When working with values only
Iteration Using forEach() Method
What is forEach() ?
forEach() is a built-in array method used to execute a function for each array element.
Syntax of forEach()
array.forEach(function(element, index, array) {
// code
});
forEach Method in Arrays
Executes a function for each element in the array with optional index access.
// Using forEach with normal function
let cities = ["Delhi", "Mumbai", "Chennai"];
cities.forEach(function(city) {
console.log(city);
});
// Using arrow function
let prices = [100, 200, 300];
prices.forEach(price => {
console.log(price);
});
// Using index in forEach
let animals = ["Dog", "Cat", "Lion"];
animals.forEach((animal, index) => {
console.log(index + " : " + animal);
});Important Points About forEach()
Does not return a new array
Cannot be stopped using break
Best for simple operations
When to Use forEach() ?
When performing action on each element
When code readability matters
When no need to stop loop early
for vs for...of vs forEach()
Feature for for...of forEach() Index access Yes No Yes Can break loop Yes Yes No Syntax Traditional Modern Functional Readability Medium High High Performance Fast Fast Slightly slower Common Beginner Mistakes
Using forEach() when break is needed
Confusing for...in with for...of
Forgetting array length in for loop
Trying to return values from forEach()
Best Practices for Array Iteration
Use for when index control is needed
Use for...of for simple value iteration
Use forEach() for clean and readable code
Avoid unnecessary nesting
Choose clarity over short syntax
Real-Life Example
for loop: Checking roll numbers one by one
for...of loop: Reading names from a list
forEach(): Performing the same task on each item