The Project | About Us | Contribute | Donations | License

HOME

In JavaScript, arrays are a fundamental data structure used to store multiple values in a single variable. Iterating over arrays is a common task, and JavaScript provides several methods to accomplish this. In this section, we will cover various ways to iterate over arrays, including for loops, for...of loops, forEach method, and other array methods like map, filter, and reduce.

Using `for` Loop

The for loop is a traditional way to iterate over arrays. It provides full control over the iteration process.

Syntax

for (initialization; condition; increment) {
    // code to be executed
}

Example

let fruits = ["Apple", "Banana", "Cherry"];

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

Explanation

Initialization: let i = 0 sets the starting point.
Condition: i < fruits.length ensures the loop runs as long as i is less than the length of the array.
Increment: i++ increases the counter by 1 after each iteration.
Body: console.log(fruits[i]) prints each element of the array.

Using `for...of` Loop

The for...of loop is a more modern and readable way to iterate over arrays.

Syntax

for (variable of iterable) {
    // code to be executed
}

Example

let fruits = ["Apple", "Banana", "Cherry"];

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

Explanation

variable: let fruit is a variable that holds the current element.
iterable: fruits is the array being iterated over.
Body: console.log(fruit) prints each element of the array.

Using `forEach` Method

The forEach method executes a provided function once for each array element.

Syntax

array.forEach(function(currentValue, index, array) {
    // code to be executed
});

Example

let fruits = ["Apple", "Banana", "Cherry"];

fruits.forEach(function(fruit, index) {
    console.log(index + ": " + fruit);
});

Explanation

currentValue: fruit is the current element being processed.
index: index is the index of the current element.
array: fruits is the array being iterated over.
Body: console.log(index + ": " + fruit) prints the index and the element.

Using `map` Method

The map method creates a new array populated with the results of calling a provided function on every element in the calling array.

Syntax

let newArray = array.map(function(currentValue, index, array) {
    // code to be executed
});

Example

let numbers = [1, 2, 3, 4];
let squaredNumbers = numbers.map(function(number) {
    return number * number;
});

console.log(squaredNumbers); // [1, 4, 9, 16]

Explanation

currentValue: number is the current element being processed.
index: index is the index of the current element.
array: numbers is the array being iterated over.
Body: return number * number returns the squared value of each element.

Using `filter` Method

The filter method creates a new array with all elements that pass the test implemented by the provided function.

Syntax

let newArray = array.filter(function(currentValue, index, array) {
    // code to be executed
});

Example

let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(function(number) {
    return number % 2 === 0;
});

console.log(evenNumbers); // [2, 4, 6]

Explanation

currentValue: number is the current element being processed.
index: index is the index of the current element.
array: numbers is the array being iterated over.
Body: return number % 2 === 0 returns true for even numbers.

Using `reduce` Method

The reduce method executes a reducer function on each element of the array, resulting in a single output value.

Syntax

let result = array.reduce(function(accumulator, currentValue, index, array) {
    // code to be executed
}, initialValue);

Example

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce(function(accumulator, number) {
    return accumulator + number;
}, 0);

console.log(sum); // 10

Explanation

accumulator: accumulator accumulates the callback's return values.
currentValue: number is the current element being processed.
index: index is the index of the current element.
array: numbers is the array being iterated over.
initialValue: 0 is the initial value of the accumulator.
Body: return accumulator + number adds each element to the accumulator.

Practical Exercise

Task

Write a function sumOfSquares that takes an array of numbers and returns the sum of the squares of the numbers.

Solution

function sumOfSquares(numbers) {
    return numbers.reduce(function(accumulator, number) {
        return accumulator + number * number;
    }, 0);
}

// Test the function
let numbers = [1, 2, 3, 4];
console.log(sumOfSquares(numbers)); // 30

Explanation

The reduce method is used to iterate over the array.
The accumulator starts at 0.
For each element, the square of the number is added to the accumulator.
The final result is the sum of the squares of the numbers.

Common Mistakes and Tips

Off-by-One Errors: Ensure your loop conditions are correct to avoid skipping the first or last element.
Using forEach for Early Exit: Remember that forEach does not support breaking out of the loop early. Use for or for...of if you need to exit early.
Mutating Arrays: Be cautious when mutating arrays within iteration methods, as it can lead to unexpected results.

Conclusion

In this section, we explored various ways to iterate over arrays in JavaScript, including for loops, for...of loops, forEach, map, filter, and reduce methods. Each method has its use cases and advantages. Understanding these methods will help you manipulate arrays more effectively and write cleaner, more efficient code. In the next section, we will delve into array destructuring, a powerful feature for extracting values from arrays.

Iterating Over Arrays

Using for Loop

Syntax

Example

Explanation

Using for...of Loop

Syntax

Example

Explanation

Using forEach Method

Syntax

Example

Explanation

Using map Method

Syntax

Example

Explanation

Using filter Method

Syntax

Example

Explanation

Using reduce Method

Syntax

Example

Explanation

Practical Exercise

Task

Solution

Explanation

Common Mistakes and Tips

Conclusion

JavaScript: From Beginner to Advanced

Module 1: Introduction to JavaScript

Module 2: Control Structures

Module 3: Functions

Module 4: Objects and Arrays

Module 5: Advanced Objects and Functions

Module 6: The Document Object Model (DOM)

Module 7: Browser APIs and Advanced Topics

Module 8: Testing and Debugging

Module 9: Performance and Optimization

Module 10: JavaScript Frameworks and Libraries

Module 11: Final Project

Using `for` Loop

Using `for...of` Loop

Using `forEach` Method

Using `map` Method

Using `filter` Method

Using `reduce` Method