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

JavaScript for...in statement will go up in the prototype chain, also enumerating over inherited properties, a thing that sometimes is not desired.

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:

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

It's slow because you have to walk all properties of the array object and its whole prototype chain and will still only get the property's name, ie to get the value, an additional lookup will be required

Next : How to Remove a Specific Item from an Array in JavaScript

Related Topics