JavaScript loop through Array means a execute a block of code a number of times using a loops statement. It’s also called Array iteration (repeating steps)
Here are several options:
- Sequential for loop
- Array.prototype.forEach
- ES6 for-of statement
Example of JavaScript loop through Array
Let’s see one by one every method exampels:
1. Sequential for loop statement
This is easiest way and Works on every environment.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <script> var arr1 = ["A", "B", "C", "D"]; var arrayLength = arr1.length; for (var i = 0; i < arrayLength; i++) { console.log(arr1[i]); //Do something } </script> </body> </html> |
Output:
Read more: JavaScript array loop
2. Array forEach method
The ES5 specification introduced a lot of beneficial array methods, one of them, the Array.prototype.forEach and it gives us a concise way to iterate over an array:
Let’s see example of adding a number
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <body> <script type="text/javascript"> var sum = 0; var numbers = [65, 44, 12, 4]; numbers.forEach(myFunction); function myFunction(item) { sum += item; } alert(sum) </script> </body> </html> |
Output: 125
Read more: JavaScript foreach loop Example
3. ES6 for-of statement
This method should be avoided.
It shouldn’t be used for array-like objects because:
- The order of iteration is not guaranteed; the array indexes may not be visited in numeric order.
- Inherited properties are also enumerated.
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <body> <script> let colors = ['red', 'green', 'blue']; for (const color of colors){ console.log(color); } </script> </body> </html> |
Output: red
green
blue
Do comment you suggestions and doubts below in the comment section.
Note: All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version
Degree in Computer Science and Engineer: App Developer and has multiple Programming languages experience. Enthusiasm for technology & like learning technical.