Loop through an array in JavaScript
JavaScript array can hold many values under a single name, and you can access the values by referring to an index number. There are different ways to loop over arrays in JavaScript , but it can be difficult choosing the right one. Below is a brief explanation of many useful JavaScript statements and methods applicable to looping over arrays and objects.JavaScript Array for loop
JavaScript for loop iterate over each item in an array. JavaScript arrays are zero based, which means the first item is referenced with an index of 0. Syntax
for (initialization; condition; final expression)
example
var myArray = ["JavaScript","Loop"];
for (var i = 0; i < myArray.length; i++) {
console.log(myArray[i]);
//Do something
}
Output:
JavaScript
Loop
For loop Works on every environment and you can use break and continue flow control statements.
JavaScript Array forEach
Modern JavaScript has added a forEach method to the native array object. The forEach methods takes the callback function as an argument and runs on each object present in the array.
const myArray = ["East", "West", "North", "South"]
myArray.forEach(function (val, ind) {
console.log(val, ind);
});
Output:
East 0
West 1
North 2
South 3
You cannot use break and continue in JavaScript forEach.
JavaScript for-of statement
The for-of statement statement works for any kind of iterable object and also for generators (any object that has a \[Symbol.iterator\] property).
let numbers = ['one', 'two', 'three'];
for (const number of numbers){
console.log(number);
}
Output:
one
two
three
JavaScript for-of statement can iterate over a large variety of objects and really useful to iterate serially asynchronous values.
Fastest way to loop through an array in JavaScript

The absolute fastest way to loop through a javascript array is: while(){} .
var i = 0, arrLen = myArray.length;
while (i < arrLen) {
// your code
i++
}
Why is using "for...in" for array iteration a bad idea?
There are many reason that you should not use "for...in" .- Inherited properties are also enumerated
Array.prototype.myProp = "Bad Idea";
var array = ['one', 'two', 'three'];
for (var i in array) {
console.log(array[i]);
}
Output:
one
two
three
Bad Idea
From the above example you can understand that it can be particularly a problem if you use some library that relies heavily on native prototypes augmentation.
- It's construct
var myVar = [];
myVar[5] = 5;
for (var elem in myVar) {
console.log(elem);
}
Output:
5
From the above output, you can see the for..in loop shows only the explicitly set index of "5", and ignores 0-4.
In normal JavaScript for loop , iterate over numeric indexes from 0 to 5, as everyone expects.
var myVar = [];
myVar[5] = 5;
for (var i = 0; i < myVar.length; i++) {
console.log(myVar[i]);
}
Output:
undefined
undefined
undefined
undefined
undefined
5
- It's slow
Related Topics
- JavaScript Popup Boxes
- Opening a new window in JavaScript
- How to Create Drop-Down Lists in JavaScript
- How do I include a JavaScript file in another JavaScript file?
- Print the content of a Div using JavaScript/jQuery
- How to get the current URL using JavaScript ?
- How to Detect a Mobile Device with JavaScript/jQuery
- How to validate an email address in JavaScript
- How to Remove a Specific Item from an Array in JavaScript
- What is JavaScript closures?
- How To Remove a Property from a JavaScript Object
- How to get selected value from Dropdown list in JavaScript
- How do I get the current date in JavaScript?
- How to Open URL in New Tab | JavaScript
- How to delay/wait/Sleep in code execution | JavaScript
- How to round to at most 2 decimal places | JavaScript
- How to convert string to boolean | JavaScript
- How to check undefined in JavaScript?
- How To Copy to Clipboard | JavaScript
- How to encode a URL using JavaScript?
- How to force Input field to enter numbers only | JavaScript
- How to create multiline string in JavaScript
- How to Check for an Empty String in JavaScript?