Loop through an array is a common task in JavaScript, enabling you to perform operations on each element in the array. There are several ways to iterate over arrays, each with its own advantages and use cases. In this article, we will explore different methods to loop through an array in JavaScript, providing detailed explanations and complete code examples for each approach.
Approach 1. Using the for Loop
The for loop is one of the most basic and widely used methods for iterating over an array. It provides full control over the iteration process.
Example
let arr = [10, 20, 30, 40, 50]; for (let i = 0; i < arr.length; i++) { console.log(arr[i]); }
In this example, the for loop iterates through the fruits array, and the console.log statement prints each fruit to the console.
Explanation
- let i = 0: Initializes the loop counter.
- i < arr.length: Sets the condition for the loop to run.
- i++: Increments the loop counter after each iteration.
Approach 2. Using the for…of Loop
The for…of loop provides a simpler syntax for iterating over arrays and other iterable objects.
Example
let arr = [10, 20, 30, 40, 50]; for (let element of arr) { console.log(element); }
In this example, the for…of loop iterates through the colors array, printing each color to the console.
Explanation
- let element of arr: Directly assigns each element of the array to the variable color in each iteration.
Approach 3. Using the forEach() Method
The forEach() method is an array method that executes a provided function once for each array element.
Example
let arr = [10, 20, 30, 40, 50]; arr.forEach(function(element) { console.log(element); });
In this example, the forEach() method iterates through the numbers array, printing each number to the console.
Explanation
- numbers.forEach(function(number) { … }): Calls the provided function with each element of the array.
Approach 4. Using the 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.
Example
let nums = [1, 2, 3, 4, 5]; let squaredNums = nums.map(function(element) { return element * element; }); console.log(squaredNums);
In this example, the map method iterates through the originalNumbers array, creating a new array squaredNumbers where each element is the square of the corresponding element in the original array.
Explanation
- originalNumbers.map(function(number) { … }): Applies the provided function to each element and returns a new array.
Approach 5. Using the for…in Loop
The for…in loop is generally used for iterating over object properties, but it can also be used for arrays.
Example
let arr = [10, 20, 30, 40, 50]; for (let index in arr) { console.log(arr[index]); }
In this example, the for…in loop iterates through the animals array, printing each animal to the console.
Explanation
- let index in arr: Assigns the index of each element to the variable index in each iteration.
Approach 6. Using the while Loop
The while loop is another basic loop structure that can be used to iterate over an array.
Example
let arr = [10, 20, 30, 40, 50]; let i = 0; while (i < arr.length) { console.log(arr[i]); i++; }
In this example, the while loop iterates through the cars array, printing each car to the console.
Explanation
- while (i < arr.length): Runs the loop as long as the condition is true.
- i++: Increments the loop counter after each iteration.
Approach 7. Using the do…while Loop
The do…while loop is similar to the while loop, but it ensures that the loop body is executed at least once.
Example
let arr = [10, 20, 30, 40, 50]; let i = 0; do { console.log(arr[i]); i++; } while (i < arr.length);
In this example, the do…while loop iterates through the cities array, printing each city to the console.
Explanation
- do { … } while (i < cities.length): Executes the loop body first, then checks the condition.