Rectangle 27 1

For each over an array in JavaScript?


> var i = 5; [i, i--, i];
[5, 5, 4]
array.length
for (var i = 0; i < array.length; i++) { ... }   // Forwards

for (var i = array.length; i--; )    { ... }   // Reverse
for (var i = array.length; i --> 0 ;) {
for (var i = array.length; i--; ) {
     // process array[i]
}
  • If you modify the array while looping, at or after index i (for example you remove or insert an item at array[i]), then a forward loop would skip the item that shifted left into position i, or re-process the ith item that was shifted right. In a traditional for loop, you could update i to point to the next item that needs processing - 1, but simply reversing the direction of iteration is often a simpler and more elegant solution.
  • It gives you a free scope for closures.
  • It indicates that i is not going to be shifted within the block (which is always a possible surprise hiding in long for and while loops.)
  • It is shorter to type, and read, than some of the other options available. Although it loses to forEach() and to ES6's for ... of.
  • It processes the items in reverse order. If you were building a new array from the results, or printing things on screen, naturally the output will be reversed with respect to the original order.
  • It reduces leakage of local variables and accidental collision with (and mutation of) outer variables.
  • Removing siblings from the DOM in reverse order is usually more efficient. (The browser needs to do less shifting of elements in its internal arrays.)
  • Repeatedly inserting siblings into the DOM as a first child in order to retain their order is less efficient. (The browser would keep having to shift things right.) To create DOM nodes efficiently and in order, just loop forwards and append as normal (and also use a "document fragment").
  • Similarly, when modifying or removing nested DOM elements, processing in reverse can circumvent errors. For example, consider modifying the innerHTML of a parent node before handling its children. By the time the child node is reached it will be detached from the DOM, having been replaced by a newly created child when the parent's innerHTML was written.
  • The reverse loop is confusing to junior developers. (You may consider that an advantage, depending on your outlook.)
  • You do not need to declare a temporary len variable, or compare against array.length on each iteration, either of which might be a minute optimisation.

"Just do this to every item in the list, I don't care about the order!"

(If the discussion of intent makes no sense to you, then you and your code may benefit from watching Crockford's lecture on Programming Style & Your Brain.)

Ah, the good old "Arrow and a Wink" code pattern. I love it! +1 from me!

Although the performance gains are usually insignificant, it sort of screams:

Because i-- runs before each iteration, on the first iteration we will actually be accessing the item at array.length - 1 which avoids any issues with Array-out-of-bounds undefined items.

How about this for a reverse loop? var i= array.length; while(i--) { ...

However in practice that is not actually a reliable indication of intent, since it is indistinguishable from those occasions when you do care about the order, and really do need to loop in reverse. So in fact another construct would be needed to accurately express the "don't care" intent, something currently unavailable in most languages, including ECMAScript, but which could be called, for example, forEachUnordered().

I forgot to add the benchmarks. I also forgot to mention how reverse looping is a significant optimization on 8-bit processors like the 6502, where you really do get the comparison for free!

I think the reverse for loop deserves a mention here:

If order doesn't matter, and efficiency is a concern (in the innermost loop of a game or animation engine), then it may be acceptable to use the reverse for loop as your go-to pattern. Just remember that seeing a reverse for loop in existing code does not necessarily mean that the order irrelevant!

In general for higher level code where clarity and safety are greater concerns, I would recommend using Array::forEach as your default pattern:

In the traditional forwards for loop, i++ and ++i are interchangeable (as Douglas Crockford points out). However in the reverse for loop, because our decrement is also our condition expression, we must stick with i-- if we want to process the item at index 0.

So on the final iteration, i was previously 1 and the i-- expression changes it to 0 but actually yields 1 (truthy), and so the condition passes. On the next iteration i-- changes i to -1 but yields 0 (falsey), causing execution to immediately drop out of the bottom of the loop.

Some developers use the reverse for loop by default, unless there is a good reason to loop forwards.

Some people like to draw a little arrow in the reverse for loop, and end with a wink:

Sorry @Kabb5 I was AFK. Yes that loop is quite clear and essentially the same.

The loop will stop iterating when the condition i-- evaluates to a falsey value (when it yields 0).

The trick is that unlike --i, the trailing i-- operator decrements i but yields the value before the decrement. Your console can demonstrate this:

Then when you do see the reverse for loop in your code, that is a hint that it is reversed for a good reason (perhaps one of the reasons described above). And seeing a traditional forward for loop may indicate that shifting can take place.

You will notice that i-- is the middle clause (where we usually see a comparison) and the last clause is empty (where we usually see i++). That means that i-- is also used as the condition for continuation. Crucially, it is executed and checked before each iteration.

Note
Rectangle 27 1

For each over an array in JavaScript?


...
// (This is all presumably in some scoping function)
var forEach = Array.prototype.forEach;

// Then later...
forEach.call(node.childNodes, function(child) {
    // Do something with `child`
});
// Arrow function (ES2015):
var divs = Array.from(document.querySelectorAll(".some-class"), element => element.tagName);

// Standard function (since `Array.from` can be shimmed):
var divs = Array.from(document.querySelectorAll(".some-class"), function(element) {
    return element.tagName;
});
// `a` is a sparse array
var key;
var a = [];
a[0] = "a";
a[10] = "b";
a[10000] = "c";
for (key in a) {
    if (a.hasOwnProperty(key)  &&        // These are explained
        /^0$|^[1-9]\d*$/.test(key) &&    // and then hidden
        key <= 4294967294                // away below
        ) {
        console.log(a[key]);
    }
}
Array.from
Array.prototype.forEach.call(node.childNodes, function(child) {
    // Do something with `child`
});
Node
childNodes
for (key in a) {
    // "Good enough" for most cases
    if (String(parseInt(key, 10)) === key && a.hasOwnProperty(key)) {
        console.log(a[key]);
    }
}
for (key in a) {
    if (arrayHasOwnIndex(a, key)) {
        console.log(a[key]);
    }
}
for-in
for-of
forEach
function arrayHasOwnIndex(array, prop) {
    return array.hasOwnProperty(prop) && /^0$|^[1-9]\d*$/.test(prop) && prop <= 4294967294; // 2^32 - 2
}
let a = ["a", "b", "c"];
for (let index = 0; index < a.length; ++index) {
    let value = a[index];
}
//console.log(index); // Would cause "ReferenceError: index is not defined"
//console.log(value); // Would cause "ReferenceError: value is not defined"
let divs = document.querySelectorAll("div");
for (let index = 0; index < divs.length; ++index) {
    divs[index].addEventListener('click', e => {
        alert("Index is: " + index);
    });
}
reduce
reduceRight
var a = ["a", "b", "c"];
a.forEach(function(entry) {
    console.log(entry);
});
var a = ["a", "b", "c"];
var it = a.values();
var entry;
while (!(entry = it.next()).done) {
    console.log(entry.value);
}
var divs = Array.from(document.querySelectorAll("div"));
var divs = Array.prototype.slice.call(document.querySelectorAll("div"));
var divs = [...document.querySelectorAll("div")];
var index, len;
var a = ["a", "b", "c"];
for (index = 0, len = a.length; index < len; ++index) {
    console.log(a[index]);
}
var index;
var a = ["a", "b", "c"];
for (index = a.length - 1; index >= 0; --index) {
    console.log(a[index]);
}
var trueArray = Array.prototype.slice.call(arrayLikeObject);
var trueArray = [...iterableObject];
var val;
var a = ["a", "b", "c"];
for (val of a) {
    console.log(val);
}

Use a simple for loop

Use the slice method of arrays

  • Array#forEach (spec | MDN) (or its relatives some and such) (ES5+ only),
  • Don't use for-in unless you use it with safeguards or are at least aware of why it might bite you.
  • Use a simple for loop
  • a for-of loop (ES2015+ only),
  • a simple old-fashioned for loop,
  • entries(): Returns an iterator where each value is an array in the form [key, value] for that iteration.
  • every (stops looping the first time the iterator returns false or something falsey)
  • filter (creates a new array including elements where the filter function returns true and omitting the ones where it returns false)
  • keys(): Returns an iterator where each value is the key for that iteration (so for our a above, that would be "0", then "1", then "2").
  • map (creates a new array from the values returned by the iterator function)
  • or for-in with safeguards.
  • reduce (builds up a value by repeated calling the iterator, passing in previous values; see the spec for the details; useful for summing the contents of an array and many other things)
  • some (stops looping the first time the iterator returns true or something truthy)
  • values(): This is the one I used above. It returns an iterator where each value is the value for that iteration.

(As of this writing, Firefox 29 supports entries and keys but not values.)

(I couldn't find the equivalent verbiage in the ES2015 spec, but it's bound to still be the case.) Again, as of this writing the common host-provided array-like objects in modern browsers (NodeList instances, for instance) do handle [[HasProperty]] correctly, but it's important to test.

@JimB: That's covered above (and length isn't a method). :-)

@Pius: If you want to break the loop, you can use some. (I would have preferred allowing breaking forEach as well, but they, um, didn't ask me. ;-) )

@T.J.Crowder True, even though it looks more like a work-around as it's not its primary purpose.

@user889030: You need a , after k=0, not a ;. Remember, programming is many things, one of which is close attention to detail... :-)

Additionally, forEach is the "loop through them all" function, but ES5 defined several other useful "work your way through the array and do things" functions, including:

And when you do that, not just value but also index is recreated for each loop iteration, meaning closures created in the loop body keep a reference to the index (and value) created for that specific iteration:

Array.from (ES2015, but shimmable) creates an array from an array-like object, optionally passing the entries through a mapping function first. So:

Aside from true arrays, there are also array-like objects that have a length property and properties with numeric names: NodeList instances, the arguments object, etc. How do we loop through their contents?

At least some, and possibly most or even all, of the array approaches above frequently apply equally well to array-like objects:

But with modern JavaScript engines, it's rare you need to eke out that last bit of juice.

ES2015 adds iterators to JavaScript. The easiest way to use iterators is the new for-of statement. It looks like this:

Host objects may implement these internal methods in any manner unless specified otherwise; for example, one possibility is that [[Get]] and [[Put]] for a particular host object indeed fetch and store property values but [[HasProperty]] always generates false.

I would also like to add that .forEach cannot be broken efficiently. You have to throw an exception to perform the break.

I'll quickly note that you can use the ES2015 options now, even on ES5 engines, by transpiling ES2015 to ES5. Search for "ES2015 transpiling" / "ES6 transpiling" for more...

If the length of the array won't change during the loop, and it's in performance-sensitive code (unlikely), a slightly more complicated version grabbing the length up front might be a tiny bit faster:

If you had five divs, you'd get "Index is: 0" if you clicked the first and "Index is: 4" if you clicked the last. This does not work if you use var instead of let.

If you use Array.prototype functions with host-provided array-like objects (DOM lists and other things provided by the browser rather than the JavaScript engine), you need to be sure to test in your target environments to make sure the host-provided object behaves properly. Most do behave properly (now), but it's important to test. The reason is that most of the Array.prototype methods you're likely to want to use rely on the host-provided object giving an honest answer to the abstract [[HasProperty]] operation. As of this writing, browsers do a very good job of this, but the ES5 spec did allow for the possibility a host-provided object may not be honest; it's in 8.6.2 (several paragraphs below the big table near the beginning of that section), where it says:

If you're going to do that a lot, you might want to grab a copy of the function reference into a variable for reuse, e.g.:

If you're using an environment that supports the Array features of ES5 (directly or using a shim), you can use the new forEach (spec | MDN):

If you're worried about the runtime cost of making a function call for each array entry, don't be; details.

In ES2015 and higher, you can make your index and value variables local to the for loop:

It's also possible to use ES2015's spread notation (MDN currently calls it an operator; it isn't one), with JavaScript engines that support this feature:

JavaScript has powerful semantics for looping through arrays and array-like objects. I've split the answer into two parts: Options for genuine arrays, and options for things that are just array-like, such as the arguments object, other iterable objects (ES2015+), DOM collections, and so on.

Note the two checks:

Now, you won't want to write that every time, so you might put this in your toolkit:

Obviously, a simple for loop applies to array-like objects.

Or if you wanted to get an array of the tag names of the elements with a given class, you'd use the mapping function:

Or if you're interested in just a "good enough for most cases" test, you could use this, but while it's close, it's not quite correct:

Other times, you may want to convert an array-like object into a true array. Doing that is surprisingly easy:

See the Caveat for host-provided objects below. In particular, note that this will fail in IE8 and earlier, which don't let you use host-provided objects as this like that.

So for instance, if we want to convert a NodeList into a true array, with spread syntax this becomes quite succinct:

Sometimes the old ways are the best:

Sometimes, you might want to use an iterator explicitly. You can do that, too, although it's a lot clunkier than for-of. It looks like this:

Still, it can be useful, particularly for sparse arrays, if you use appropriate safeguards:

That's a tiny bit of added overhead per loop iteration on most arrays, but if you have a sparse array, it can be a more efficient way to loop because it only loops for entries that actually exist. E.g., for the array above, we loop a total of three times (for keys "0", "10", and "10000" remember, they're strings), not 10,001 times.

The iterator is a function (specifically, a generator) that returns a new object each time you call next. The object returned by the iterator has a property, done, telling us whether it's done, and a property value with the value for that iteration.

The meaning of value varies depending on the iterator; arrays support (at least) three functions that return iterators:

The various functions on Array.prototype are "intentionally generic" and can usually be used on array-like objects via Function#call or Function#apply. (See the Caveat for host-provided objects at the end of this answer, but it's a rare issue.)

Under the covers, that gets an iterator from the array and loops through it, getting the values from it. This doesn't have the issue that using for-in has, because it uses an iterator defined by the object (the array), and arrays define that their iterators iterate through their entries (not their properties). Unlike for-in in ES5, the order in which the entries are visited is the numeric order of their indexes.

Unless you're supporting obsolete browsers like IE8 (which NetApps shows at just over 4% market share as of this writing in September2016), you can happily use forEach in a general-purpose web page without a shim. If you do need to support obsolete browsers, shimming/polyfilling forEach is easily done (search for "es5 shim" for several options).

We can use the slice method of arrays, which like the other methods mentioned above is "intentionally generic" and so can be used with array-like objects, like this:

You have three options in ECMAScript5 ("ES5"), the version most broadly supported at the moment, and will soon have two more in ECMAScript2015 ("ES2015", "ES6"), the latest version of JavaScript that vendors are working on supporting:

You'll get people telling you to use for-in, but that's not what for-in is for. for-in loops through the enumerable properties of an object, not the indexes of an array. The order is not guaranteed, not even in ES2015 (ES6). ES2015 does define an order to object properties (via [[OwnPropertyKeys]], [[Enumerate]], and things that use them like Object.getOwnPropertyKeys), but it does not define that for-in will follow that order. (Details in this other answer.)

for-in with the same safeguards as with an array should work with array-like objects as well; the caveat for host-provided objects on #1 above may apply.

for-of will use the iterator provided by the object (if any); we'll have to see how this plays with the various array-like objects, particularly host-provided ones.

forEach accepts an iterator function and, optionally, a value to use as this when calling that iterator function (not used above). The iterator function is called for each entry in the array, in order, skipping non-existent entries in sparse arrays. Although I only used one argument above, the iterator function is called with three: The value of each entry, the index of that entry, and a reference to the array you're iterating over (in case your function doesn't already have it handy).

forEach has the benefit that you don't have to declare indexing and value variables in the containing scope, as they're supplied as arguments to the iteration function, and so nicely scoped to just that iteration.

Note
Rectangle 27 1

For each over an array in JavaScript?


var length = arr.length,
    element = null;
for (var i = 0; i < length; i++) {
  element = arr[i];
  // Do something with element i.
}

@wardha-Web It is intentional. It enables us to declare multiple variables with a single var-keyword. If we had used a semicolon, then element would have been declared in the global scope (or, rather, JSHint would have screamed at us before it reached production).

In ECMAScript 5 there will be a forEach method on the array prototype, but it is not supported in legacy browsers. So to be able to use it consistently you must either have an environment that supports it (for example, Node.js for server side JavaScript), or use a "Polyfill". The Polyfill for this functionality is, however, trivial and since it makes the code easier to read, it is a good polyfill to include.

Is the comma at the end of first line intentional, or is it a typo(could be semicolon)?

Note, however, that this approach is only good if you have a dense array, and each index is occupied by an element. If the array is sparse, then you can run into performance problems with this approach, since you will iterate over a lot of indices that do not really exist in the array. In this case, a for .. in-loop might be a better idea. However, you must use the appropriate safeguards to ensure that only the desired properties of the array (that is, the array elements) are acted upon, since the for..in-loop will also be enumerated in legacy browsers, or if the additional properties are defined as enumerable.

The standard way to iterate an array in JavaScript is a vanilla for-loop:

why is for(instance in objArray) not a correct usage ? it looks more simple to me, but i hear you speak of it as not a correct way for usage ?

Note
Rectangle 27 1

For each over an array in JavaScript?


...
// (This is all presumably in some scoping function)
var forEach = Array.prototype.forEach;

// Then later...
forEach.call(node.childNodes, function(child) {
    // Do something with `child`
});
// Arrow function (ES2015):
var divs = Array.from(document.querySelectorAll(".some-class"), element => element.tagName);

// Standard function (since `Array.from` can be shimmed):
var divs = Array.from(document.querySelectorAll(".some-class"), function(element) {
    return element.tagName;
});
// `a` is a sparse array
var key;
var a = [];
a[0] = "a";
a[10] = "b";
a[10000] = "c";
for (key in a) {
    if (a.hasOwnProperty(key)  &&        // These are explained
        /^0$|^[1-9]\d*$/.test(key) &&    // and then hidden
        key <= 4294967294                // away below
        ) {
        console.log(a[key]);
    }
}
Array.from
Array.prototype.forEach.call(node.childNodes, function(child) {
    // Do something with `child`
});
Node
childNodes
for (key in a) {
    // "Good enough" for most cases
    if (String(parseInt(key, 10)) === key && a.hasOwnProperty(key)) {
        console.log(a[key]);
    }
}
for (key in a) {
    if (arrayHasOwnIndex(a, key)) {
        console.log(a[key]);
    }
}
for-in
for-of
forEach
function arrayHasOwnIndex(array, prop) {
    return array.hasOwnProperty(prop) && /^0$|^[1-9]\d*$/.test(prop) && prop <= 4294967294; // 2^32 - 2
}
let a = ["a", "b", "c"];
for (let index = 0; index < a.length; ++index) {
    let value = a[index];
}
//console.log(index); // Would cause "ReferenceError: index is not defined"
//console.log(value); // Would cause "ReferenceError: value is not defined"
let divs = document.querySelectorAll("div");
for (let index = 0; index < divs.length; ++index) {
    divs[index].addEventListener('click', e => {
        alert("Index is: " + index);
    });
}
reduce
reduceRight
var a = ["a", "b", "c"];
a.forEach(function(entry) {
    console.log(entry);
});
var a = ["a", "b", "c"];
var it = a.values();
var entry;
while (!(entry = it.next()).done) {
    console.log(entry.value);
}
var divs = Array.from(document.querySelectorAll("div"));
var divs = Array.prototype.slice.call(document.querySelectorAll("div"));
var divs = [...document.querySelectorAll("div")];
var index, len;
var a = ["a", "b", "c"];
for (index = 0, len = a.length; index < len; ++index) {
    console.log(a[index]);
}
var index;
var a = ["a", "b", "c"];
for (index = a.length - 1; index >= 0; --index) {
    console.log(a[index]);
}
var trueArray = Array.prototype.slice.call(arrayLikeObject);
var trueArray = [...iterableObject];
var val;
var a = ["a", "b", "c"];
for (val of a) {
    console.log(val);
}

Use a simple for loop

Use the slice method of arrays

  • Array#forEach (spec | MDN) (or its relatives some and such) (ES5+ only),
  • Don't use for-in unless you use it with safeguards or are at least aware of why it might bite you.
  • Use a simple for loop
  • a for-of loop (ES2015+ only),
  • a simple old-fashioned for loop,
  • entries(): Returns an iterator where each value is an array in the form [key, value] for that iteration.
  • every (stops looping the first time the iterator returns false or something falsey)
  • filter (creates a new array including elements where the filter function returns true and omitting the ones where it returns false)
  • keys(): Returns an iterator where each value is the key for that iteration (so for our a above, that would be "0", then "1", then "2").
  • map (creates a new array from the values returned by the iterator function)
  • or for-in with safeguards.
  • reduce (builds up a value by repeated calling the iterator, passing in previous values; see the spec for the details; useful for summing the contents of an array and many other things)
  • some (stops looping the first time the iterator returns true or something truthy)
  • values(): This is the one I used above. It returns an iterator where each value is the value for that iteration.

(As of this writing, Firefox 29 supports entries and keys but not values.)

(I couldn't find the equivalent verbiage in the ES2015 spec, but it's bound to still be the case.) Again, as of this writing the common host-provided array-like objects in modern browsers (NodeList instances, for instance) do handle [[HasProperty]] correctly, but it's important to test.

@JimB: That's covered above (and length isn't a method). :-)

@Pius: If you want to break the loop, you can use some. (I would have preferred allowing breaking forEach as well, but they, um, didn't ask me. ;-) )

@T.J.Crowder True, even though it looks more like a work-around as it's not its primary purpose.

@user889030: You need a , after k=0, not a ;. Remember, programming is many things, one of which is close attention to detail... :-)

Additionally, forEach is the "loop through them all" function, but ES5 defined several other useful "work your way through the array and do things" functions, including:

And when you do that, not just value but also index is recreated for each loop iteration, meaning closures created in the loop body keep a reference to the index (and value) created for that specific iteration:

Array.from (ES2015, but shimmable) creates an array from an array-like object, optionally passing the entries through a mapping function first. So:

Aside from true arrays, there are also array-like objects that have a length property and properties with numeric names: NodeList instances, the arguments object, etc. How do we loop through their contents?

At least some, and possibly most or even all, of the array approaches above frequently apply equally well to array-like objects:

But with modern JavaScript engines, it's rare you need to eke out that last bit of juice.

ES2015 adds iterators to JavaScript. The easiest way to use iterators is the new for-of statement. It looks like this:

Host objects may implement these internal methods in any manner unless specified otherwise; for example, one possibility is that [[Get]] and [[Put]] for a particular host object indeed fetch and store property values but [[HasProperty]] always generates false.

I would also like to add that .forEach cannot be broken efficiently. You have to throw an exception to perform the break.

I'll quickly note that you can use the ES2015 options now, even on ES5 engines, by transpiling ES2015 to ES5. Search for "ES2015 transpiling" / "ES6 transpiling" for more...

If the length of the array won't change during the loop, and it's in performance-sensitive code (unlikely), a slightly more complicated version grabbing the length up front might be a tiny bit faster:

If you had five divs, you'd get "Index is: 0" if you clicked the first and "Index is: 4" if you clicked the last. This does not work if you use var instead of let.

If you use Array.prototype functions with host-provided array-like objects (DOM lists and other things provided by the browser rather than the JavaScript engine), you need to be sure to test in your target environments to make sure the host-provided object behaves properly. Most do behave properly (now), but it's important to test. The reason is that most of the Array.prototype methods you're likely to want to use rely on the host-provided object giving an honest answer to the abstract [[HasProperty]] operation. As of this writing, browsers do a very good job of this, but the ES5 spec did allow for the possibility a host-provided object may not be honest; it's in 8.6.2 (several paragraphs below the big table near the beginning of that section), where it says:

If you're going to do that a lot, you might want to grab a copy of the function reference into a variable for reuse, e.g.:

If you're using an environment that supports the Array features of ES5 (directly or using a shim), you can use the new forEach (spec | MDN):

If you're worried about the runtime cost of making a function call for each array entry, don't be; details.

In ES2015 and higher, you can make your index and value variables local to the for loop:

It's also possible to use ES2015's spread notation (MDN currently calls it an operator; it isn't one), with JavaScript engines that support this feature:

JavaScript has powerful semantics for looping through arrays and array-like objects. I've split the answer into two parts: Options for genuine arrays, and options for things that are just array-like, such as the arguments object, other iterable objects (ES2015+), DOM collections, and so on.

Note the two checks:

Now, you won't want to write that every time, so you might put this in your toolkit:

Obviously, a simple for loop applies to array-like objects.

Or if you wanted to get an array of the tag names of the elements with a given class, you'd use the mapping function:

Or if you're interested in just a "good enough for most cases" test, you could use this, but while it's close, it's not quite correct:

Other times, you may want to convert an array-like object into a true array. Doing that is surprisingly easy:

See the Caveat for host-provided objects below. In particular, note that this will fail in IE8 and earlier, which don't let you use host-provided objects as this like that.

So for instance, if we want to convert a NodeList into a true array, with spread syntax this becomes quite succinct:

Sometimes the old ways are the best:

Sometimes, you might want to use an iterator explicitly. You can do that, too, although it's a lot clunkier than for-of. It looks like this:

Still, it can be useful, particularly for sparse arrays, if you use appropriate safeguards:

That's a tiny bit of added overhead per loop iteration on most arrays, but if you have a sparse array, it can be a more efficient way to loop because it only loops for entries that actually exist. E.g., for the array above, we loop a total of three times (for keys "0", "10", and "10000" remember, they're strings), not 10,001 times.

The iterator is a function (specifically, a generator) that returns a new object each time you call next. The object returned by the iterator has a property, done, telling us whether it's done, and a property value with the value for that iteration.

The meaning of value varies depending on the iterator; arrays support (at least) three functions that return iterators:

The various functions on Array.prototype are "intentionally generic" and can usually be used on array-like objects via Function#call or Function#apply. (See the Caveat for host-provided objects at the end of this answer, but it's a rare issue.)

Under the covers, that gets an iterator from the array and loops through it, getting the values from it. This doesn't have the issue that using for-in has, because it uses an iterator defined by the object (the array), and arrays define that their iterators iterate through their entries (not their properties). Unlike for-in in ES5, the order in which the entries are visited is the numeric order of their indexes.

Unless you're supporting obsolete browsers like IE8 (which NetApps shows at just over 4% market share as of this writing in September2016), you can happily use forEach in a general-purpose web page without a shim. If you do need to support obsolete browsers, shimming/polyfilling forEach is easily done (search for "es5 shim" for several options).

We can use the slice method of arrays, which like the other methods mentioned above is "intentionally generic" and so can be used with array-like objects, like this:

You have three options in ECMAScript5 ("ES5"), the version most broadly supported at the moment, and will soon have two more in ECMAScript2015 ("ES2015", "ES6"), the latest version of JavaScript that vendors are working on supporting:

You'll get people telling you to use for-in, but that's not what for-in is for. for-in loops through the enumerable properties of an object, not the indexes of an array. The order is not guaranteed, not even in ES2015 (ES6). ES2015 does define an order to object properties (via [[OwnPropertyKeys]], [[Enumerate]], and things that use them like Object.getOwnPropertyKeys), but it does not define that for-in will follow that order. (Details in this other answer.)

for-in with the same safeguards as with an array should work with array-like objects as well; the caveat for host-provided objects on #1 above may apply.

for-of will use the iterator provided by the object (if any); we'll have to see how this plays with the various array-like objects, particularly host-provided ones.

forEach accepts an iterator function and, optionally, a value to use as this when calling that iterator function (not used above). The iterator function is called for each entry in the array, in order, skipping non-existent entries in sparse arrays. Although I only used one argument above, the iterator function is called with three: The value of each entry, the index of that entry, and a reference to the array you're iterating over (in case your function doesn't already have it handy).

forEach has the benefit that you don't have to declare indexing and value variables in the containing scope, as they're supplied as arguments to the iteration function, and so nicely scoped to just that iteration.

Note
Rectangle 27 1

For each over an array in JavaScript?


> var i = 5; [i, i--, i];
[5, 5, 4]
array.length
for (var i = 0; i < array.length; i++) { ... }   // Forwards

for (var i = array.length; i--; )    { ... }   // Reverse
for (var i = array.length; i --> 0 ;) {
for (var i = array.length; i--; ) {
     // process array[i]
}
  • If you modify the array while looping, at or after index i (for example you remove or insert an item at array[i]), then a forward loop would skip the item that shifted left into position i, or re-process the ith item that was shifted right. In a traditional for loop, you could update i to point to the next item that needs processing - 1, but simply reversing the direction of iteration is often a simpler and more elegant solution.
  • It gives you a free scope for closures.
  • It indicates that i is not going to be shifted within the block (which is always a possible surprise hiding in long for and while loops.)
  • It is shorter to type, and read, than some of the other options available. Although it loses to forEach() and to ES6's for ... of.
  • It processes the items in reverse order. If you were building a new array from the results, or printing things on screen, naturally the output will be reversed with respect to the original order.
  • It reduces leakage of local variables and accidental collision with (and mutation of) outer variables.
  • Removing siblings from the DOM in reverse order is usually more efficient. (The browser needs to do less shifting of elements in its internal arrays.)
  • Repeatedly inserting siblings into the DOM as a first child in order to retain their order is less efficient. (The browser would keep having to shift things right.) To create DOM nodes efficiently and in order, just loop forwards and append as normal (and also use a "document fragment").
  • Similarly, when modifying or removing nested DOM elements, processing in reverse can circumvent errors. For example, consider modifying the innerHTML of a parent node before handling its children. By the time the child node is reached it will be detached from the DOM, having been replaced by a newly created child when the parent's innerHTML was written.
  • The reverse loop is confusing to junior developers. (You may consider that an advantage, depending on your outlook.)
  • You do not need to declare a temporary len variable, or compare against array.length on each iteration, either of which might be a minute optimisation.

"Just do this to every item in the list, I don't care about the order!"

(If the discussion of intent makes no sense to you, then you and your code may benefit from watching Crockford's lecture on Programming Style & Your Brain.)

Ah, the good old "Arrow and a Wink" code pattern. I love it! +1 from me!

Although the performance gains are usually insignificant, it sort of screams:

Because i-- runs before each iteration, on the first iteration we will actually be accessing the item at array.length - 1 which avoids any issues with Array-out-of-bounds undefined items.

How about this for a reverse loop? var i= array.length; while(i--) { ...

However in practice that is not actually a reliable indication of intent, since it is indistinguishable from those occasions when you do care about the order, and really do need to loop in reverse. So in fact another construct would be needed to accurately express the "don't care" intent, something currently unavailable in most languages, including ECMAScript, but which could be called, for example, forEachUnordered().

I forgot to add the benchmarks. I also forgot to mention how reverse looping is a significant optimization on 8-bit processors like the 6502, where you really do get the comparison for free!

I think the reverse for loop deserves a mention here:

If order doesn't matter, and efficiency is a concern (in the innermost loop of a game or animation engine), then it may be acceptable to use the reverse for loop as your go-to pattern. Just remember that seeing a reverse for loop in existing code does not necessarily mean that the order irrelevant!

In general for higher level code where clarity and safety are greater concerns, I would recommend using Array::forEach as your default pattern:

In the traditional forwards for loop, i++ and ++i are interchangeable (as Douglas Crockford points out). However in the reverse for loop, because our decrement is also our condition expression, we must stick with i-- if we want to process the item at index 0.

So on the final iteration, i was previously 1 and the i-- expression changes it to 0 but actually yields 1 (truthy), and so the condition passes. On the next iteration i-- changes i to -1 but yields 0 (falsey), causing execution to immediately drop out of the bottom of the loop.

Some developers use the reverse for loop by default, unless there is a good reason to loop forwards.

Some people like to draw a little arrow in the reverse for loop, and end with a wink:

Sorry @Kabb5 I was AFK. Yes that loop is quite clear and essentially the same.

The loop will stop iterating when the condition i-- evaluates to a falsey value (when it yields 0).

The trick is that unlike --i, the trailing i-- operator decrements i but yields the value before the decrement. Your console can demonstrate this:

Then when you do see the reverse for loop in your code, that is a hint that it is reversed for a good reason (perhaps one of the reasons described above). And seeing a traditional forward for loop may indicate that shifting can take place.

You will notice that i-- is the middle clause (where we usually see a comparison) and the last clause is empty (where we usually see i++). That means that i-- is also used as the condition for continuation. Crucially, it is executed and checked before each iteration.

Note
Rectangle 27 1

For each over an array in JavaScript?


$.map
[undefined, 2, undefined, 4, undefined, 6, undefined]
var data = [1, 2, 3, 4, 5, 6, 7];

var newData = $.map(data, function(element) {
    if (element % 2 == 0) {
        return element;
    }
});

// newData = [2, 4, 6];
Note
Rectangle 27 1

For each over an array in JavaScript?


...
// (This is all presumably in some scoping function)
var forEach = Array.prototype.forEach;

// Then later...
forEach.call(node.childNodes, function(child) {
    // Do something with `child`
});
// Arrow function (ES2015):
var divs = Array.from(document.querySelectorAll(".some-class"), element => element.tagName);

// Standard function (since `Array.from` can be shimmed):
var divs = Array.from(document.querySelectorAll(".some-class"), function(element) {
    return element.tagName;
});
// `a` is a sparse array
var key;
var a = [];
a[0] = "a";
a[10] = "b";
a[10000] = "c";
for (key in a) {
    if (a.hasOwnProperty(key)  &&        // These are explained
        /^0$|^[1-9]\d*$/.test(key) &&    // and then hidden
        key <= 4294967294                // away below
        ) {
        console.log(a[key]);
    }
}
Array.from
Array.prototype.forEach.call(node.childNodes, function(child) {
    // Do something with `child`
});
Node
childNodes
for (key in a) {
    // "Good enough" for most cases
    if (String(parseInt(key, 10)) === key && a.hasOwnProperty(key)) {
        console.log(a[key]);
    }
}
for (key in a) {
    if (arrayHasOwnIndex(a, key)) {
        console.log(a[key]);
    }
}
for-in
for-of
forEach
function arrayHasOwnIndex(array, prop) {
    return array.hasOwnProperty(prop) && /^0$|^[1-9]\d*$/.test(prop) && prop <= 4294967294; // 2^32 - 2
}
let a = ["a", "b", "c"];
for (let index = 0; index < a.length; ++index) {
    let value = a[index];
}
//console.log(index); // Would cause "ReferenceError: index is not defined"
//console.log(value); // Would cause "ReferenceError: value is not defined"
let divs = document.querySelectorAll("div");
for (let index = 0; index < divs.length; ++index) {
    divs[index].addEventListener('click', e => {
        alert("Index is: " + index);
    });
}
reduce
reduceRight
var a = ["a", "b", "c"];
a.forEach(function(entry) {
    console.log(entry);
});
var a = ["a", "b", "c"];
var it = a.values();
var entry;
while (!(entry = it.next()).done) {
    console.log(entry.value);
}
var divs = Array.from(document.querySelectorAll("div"));
var divs = Array.prototype.slice.call(document.querySelectorAll("div"));
var divs = [...document.querySelectorAll("div")];
var index, len;
var a = ["a", "b", "c"];
for (index = 0, len = a.length; index < len; ++index) {
    console.log(a[index]);
}
var index;
var a = ["a", "b", "c"];
for (index = a.length - 1; index >= 0; --index) {
    console.log(a[index]);
}
var trueArray = Array.prototype.slice.call(arrayLikeObject);
var trueArray = [...iterableObject];
var val;
var a = ["a", "b", "c"];
for (val of a) {
    console.log(val);
}

Use a simple for loop

Use the slice method of arrays

  • Array#forEach (spec | MDN) (or its relatives some and such) (ES5+ only),
  • Don't use for-in unless you use it with safeguards or are at least aware of why it might bite you.
  • Use a simple for loop
  • a for-of loop (ES2015+ only),
  • a simple old-fashioned for loop,
  • entries(): Returns an iterator where each value is an array in the form [key, value] for that iteration.
  • every (stops looping the first time the iterator returns false or something falsey)
  • filter (creates a new array including elements where the filter function returns true and omitting the ones where it returns false)
  • keys(): Returns an iterator where each value is the key for that iteration (so for our a above, that would be "0", then "1", then "2").
  • map (creates a new array from the values returned by the iterator function)
  • or for-in with safeguards.
  • reduce (builds up a value by repeated calling the iterator, passing in previous values; see the spec for the details; useful for summing the contents of an array and many other things)
  • some (stops looping the first time the iterator returns true or something truthy)
  • values(): This is the one I used above. It returns an iterator where each value is the value for that iteration.

(As of this writing, Firefox 29 supports entries and keys but not values.)

(I couldn't find the equivalent verbiage in the ES2015 spec, but it's bound to still be the case.) Again, as of this writing the common host-provided array-like objects in modern browsers (NodeList instances, for instance) do handle [[HasProperty]] correctly, but it's important to test.

@JimB: That's covered above (and length isn't a method). :-)

@Pius: If you want to break the loop, you can use some. (I would have preferred allowing breaking forEach as well, but they, um, didn't ask me. ;-) )

@T.J.Crowder True, even though it looks more like a work-around as it's not its primary purpose.

@user889030: You need a , after k=0, not a ;. Remember, programming is many things, one of which is close attention to detail... :-)

Additionally, forEach is the "loop through them all" function, but ES5 defined several other useful "work your way through the array and do things" functions, including:

And when you do that, not just value but also index is recreated for each loop iteration, meaning closures created in the loop body keep a reference to the index (and value) created for that specific iteration:

Array.from (ES2015, but shimmable) creates an array from an array-like object, optionally passing the entries through a mapping function first. So:

Aside from true arrays, there are also array-like objects that have a length property and properties with numeric names: NodeList instances, the arguments object, etc. How do we loop through their contents?

At least some, and possibly most or even all, of the array approaches above frequently apply equally well to array-like objects:

But with modern JavaScript engines, it's rare you need to eke out that last bit of juice.

ES2015 adds iterators to JavaScript. The easiest way to use iterators is the new for-of statement. It looks like this:

Host objects may implement these internal methods in any manner unless specified otherwise; for example, one possibility is that [[Get]] and [[Put]] for a particular host object indeed fetch and store property values but [[HasProperty]] always generates false.

I would also like to add that .forEach cannot be broken efficiently. You have to throw an exception to perform the break.

I'll quickly note that you can use the ES2015 options now, even on ES5 engines, by transpiling ES2015 to ES5. Search for "ES2015 transpiling" / "ES6 transpiling" for more...

If the length of the array won't change during the loop, and it's in performance-sensitive code (unlikely), a slightly more complicated version grabbing the length up front might be a tiny bit faster:

If you had five divs, you'd get "Index is: 0" if you clicked the first and "Index is: 4" if you clicked the last. This does not work if you use var instead of let.

If you use Array.prototype functions with host-provided array-like objects (DOM lists and other things provided by the browser rather than the JavaScript engine), you need to be sure to test in your target environments to make sure the host-provided object behaves properly. Most do behave properly (now), but it's important to test. The reason is that most of the Array.prototype methods you're likely to want to use rely on the host-provided object giving an honest answer to the abstract [[HasProperty]] operation. As of this writing, browsers do a very good job of this, but the ES5 spec did allow for the possibility a host-provided object may not be honest; it's in 8.6.2 (several paragraphs below the big table near the beginning of that section), where it says:

If you're going to do that a lot, you might want to grab a copy of the function reference into a variable for reuse, e.g.:

If you're using an environment that supports the Array features of ES5 (directly or using a shim), you can use the new forEach (spec | MDN):

If you're worried about the runtime cost of making a function call for each array entry, don't be; details.

In ES2015 and higher, you can make your index and value variables local to the for loop:

It's also possible to use ES2015's spread notation (MDN currently calls it an operator; it isn't one), with JavaScript engines that support this feature:

JavaScript has powerful semantics for looping through arrays and array-like objects. I've split the answer into two parts: Options for genuine arrays, and options for things that are just array-like, such as the arguments object, other iterable objects (ES2015+), DOM collections, and so on.

Note the two checks:

Now, you won't want to write that every time, so you might put this in your toolkit:

Obviously, a simple for loop applies to array-like objects.

Or if you wanted to get an array of the tag names of the elements with a given class, you'd use the mapping function:

Or if you're interested in just a "good enough for most cases" test, you could use this, but while it's close, it's not quite correct:

Other times, you may want to convert an array-like object into a true array. Doing that is surprisingly easy:

See the Caveat for host-provided objects below. In particular, note that this will fail in IE8 and earlier, which don't let you use host-provided objects as this like that.

So for instance, if we want to convert a NodeList into a true array, with spread syntax this becomes quite succinct:

Sometimes the old ways are the best:

Sometimes, you might want to use an iterator explicitly. You can do that, too, although it's a lot clunkier than for-of. It looks like this:

Still, it can be useful, particularly for sparse arrays, if you use appropriate safeguards:

That's a tiny bit of added overhead per loop iteration on most arrays, but if you have a sparse array, it can be a more efficient way to loop because it only loops for entries that actually exist. E.g., for the array above, we loop a total of three times (for keys "0", "10", and "10000" remember, they're strings), not 10,001 times.

The iterator is a function (specifically, a generator) that returns a new object each time you call next. The object returned by the iterator has a property, done, telling us whether it's done, and a property value with the value for that iteration.

The meaning of value varies depending on the iterator; arrays support (at least) three functions that return iterators:

The various functions on Array.prototype are "intentionally generic" and can usually be used on array-like objects via Function#call or Function#apply. (See the Caveat for host-provided objects at the end of this answer, but it's a rare issue.)

Under the covers, that gets an iterator from the array and loops through it, getting the values from it. This doesn't have the issue that using for-in has, because it uses an iterator defined by the object (the array), and arrays define that their iterators iterate through their entries (not their properties). Unlike for-in in ES5, the order in which the entries are visited is the numeric order of their indexes.

Unless you're supporting obsolete browsers like IE8 (which NetApps shows at just over 4% market share as of this writing in September2016), you can happily use forEach in a general-purpose web page without a shim. If you do need to support obsolete browsers, shimming/polyfilling forEach is easily done (search for "es5 shim" for several options).

We can use the slice method of arrays, which like the other methods mentioned above is "intentionally generic" and so can be used with array-like objects, like this:

You have three options in ECMAScript5 ("ES5"), the version most broadly supported at the moment, and will soon have two more in ECMAScript2015 ("ES2015", "ES6"), the latest version of JavaScript that vendors are working on supporting:

You'll get people telling you to use for-in, but that's not what for-in is for. for-in loops through the enumerable properties of an object, not the indexes of an array. The order is not guaranteed, not even in ES2015 (ES6). ES2015 does define an order to object properties (via [[OwnPropertyKeys]], [[Enumerate]], and things that use them like Object.getOwnPropertyKeys), but it does not define that for-in will follow that order. (Details in this other answer.)

for-in with the same safeguards as with an array should work with array-like objects as well; the caveat for host-provided objects on #1 above may apply.

for-of will use the iterator provided by the object (if any); we'll have to see how this plays with the various array-like objects, particularly host-provided ones.

forEach accepts an iterator function and, optionally, a value to use as this when calling that iterator function (not used above). The iterator function is called for each entry in the array, in order, skipping non-existent entries in sparse arrays. Although I only used one argument above, the iterator function is called with three: The value of each entry, the index of that entry, and a reference to the array you're iterating over (in case your function doesn't already have it handy).

forEach has the benefit that you don't have to declare indexing and value variables in the containing scope, as they're supplied as arguments to the iteration function, and so nicely scoped to just that iteration.

Note
Rectangle 27 1

For each over an array in JavaScript?


$.each(yourArray, function(index, value) {
  // do your stuff here
});
var length = yourArray.length;   
for (var i = 0; i < length; i++) {
  // Do something with yourArray[i].
}

As per question, user want code in javascript instead of jquery so the edit is

EDIT : As per question, user want code in javascript instead of jquery so the edit is

Given that the OP mentions being new to JavaScript it should be pointed out that $.each() is a method of the jQuery library, not a built-in JavaScript thing.

I am probably going to use this answer the most often. It is not the best answer to the question, but in practice is going to be the simplest and most applicable for those of us using jQuery. I do think we should all learn the vanilla way also though. It never hurts to expand your understanding.

If youre using the jQuery library, you can use jQuery.each:

Just for the sake of it: jQuery each is much slower then native solutions. It is advised by jQuery to use native JavaScript instead of jQuery when ever it is possible. jsperf.com/browser-diet-jquery-each-vs-for-loop

Refrain from using jQuery when you can use vanilla js

Stick to standard JS, keep the 3rd party libraries out of the answer unless there isn't a native language solution

While the OP is not using jQuery, many of us are. I am definitely going this route, so thank you for pointing me in a better direction!

hmm,I didn't read it carefully ,ignore my answer,I will take care of it from next time onwards,thanks @nnnnnn

Note
Rectangle 27 1

For each over an array in JavaScript?


arr.forEach(function (val, index, theArray) {
    //do stuff
});
for (i in obj) {
    if (obj.hasOwnProperty(i)) {
        //do stuff
    }
}
var index,
    value;
for (index in obj) {
    value = obj[index];
}

@CiaranG, in JavaScript it's common to see each methods that allow return false to be used to break out of the loop, but with forEach this isn't an option. An external flag could be used (ie if (flag) return;, but it would only prevent the rest of the function body from executing, forEach would still continue iterating over the entire collection.

Additionally, ECMAScript 5 has added a forEach method to Array.prototype which can be used to enumerate over an array using a calback (the polyfill is in the docs so you can still use it for older browsers):

It's important to note that Array.prototype.forEach doesn't break when the callback returns false. jQuery and Underscore.js provide their own variations on each to provide loops that can be short-circuited.

So how does one break out of a a ECMAScript5 foreach loop like we would for a normal for loop or a foreach loop like that found in C-style languages?

Some C-style languages use foreach to loop through enumerations. In JavaScript this is done with the for..in loop structure:

There is a catch. for..in will loop through each of the object's enumerable members, and the members on its prototype. To avoid reading values that are inherited through the object's prototype, simply check if the property belongs to the object:

Note
Rectangle 27 1

For each over an array in JavaScript?


var length = arr.length,
    element = null;
for (var i = 0; i < length; i++) {
  element = arr[i];
  // Do something with element i.
}

@Dante1986: for..in is for looping through the enumerable properties of an object, not the indexes of an array. So if you put a non-index property on an array (which is a perfectly valid thing to do), it will show up in the for..in loop as well as the indexes. Some libraries as properties to the Array.prototype, which means they too would show up on for..in loops (since enumerable inherited properties are included). See my answer for more, a valid example, and a link to more detail.

@wardha-Web It is intentional. It enables us to declare multiple variables with a single var-keyword. If we had used a semicolon, then element would have been declared in the global scope (or, rather, JSHint would have screamed at us before it reached production).

In ECMAScript 5 there will be a forEach method on the array prototype, but it is not supported in legacy browsers. So to be able to use it consistently you must either have an environment that supports it (for example, Node.js for server side JavaScript), or use a "Polyfill". The Polyfill for this functionality is, however, trivial and since it makes the code easier to read, it is a good polyfill to include.

Is the comma at the end of first line intentional, or is it a typo(could be semicolon)?

Note, however, that this approach is only good if you have a dense array, and each index is occupied by an element. If the array is sparse, then you can run into performance problems with this approach, since you will iterate over a lot of indices that do not really exist in the array. In this case, a for .. in-loop might be a better idea. However, you must use the appropriate safeguards to ensure that only the desired properties of the array (that is, the array elements) are acted upon, since the for..in-loop will also be enumerated in legacy browsers, or if the additional properties are defined as enumerable.

The standard way to iterate an array in JavaScript is a vanilla for-loop:

why is for(instance in objArray) not a correct usage ? it looks more simple to me, but i hear you speak of it as not a correct way for usage ?

Note