In Java you can use a for loop to traverse objects in an array as follows:

String[] myStringArray = {"Hello", "World"};
for (String s : myStringArray)
{
    // Do something
}

Can you do the same in JavaScript?

3 upvote
  flag
Ok, so I'm a bit confused, it's ok to use the enhanced for loop when you are accessing the objects? And use a sequential one for filling one? Is this correct? – Mark Szymanski
31 upvote
  flag
no, it's really simple, array objects have numeric indexes, so you want to iterate over those indexes in the numeric order, a sequential loop ensures that, the enhanced for-in loop enumerates object properties, without an specific order, and it also enumerates inherited properties... for iterating over arrays sequential loops are always recommended... – CMS
1 upvote
  flag
upvote
  flag
upvote
  flag
Also : myStringArray.forEach(function(value, index){ console.log(index, value) }); and result will be 0 "Hello" 1 "World" – Hamed Mahmoudkhani
4 upvote
  flag
jsben.ch/#/Q9oD5 <= Here a benchmark of a bunch of solutions for looping through arrays – EscapeNetscape

34 Answers 11

Use a sequential for loop:

var myStringArray = ["Hello","World"];
var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
    alert(myStringArray[i]);
    //Do something
}

@zipcodeman suggests the use of the for...in statement, but for iterating arrays for-in should be avoided, that statement is meant to enumerate object properties.

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.

The second point is that it can give you a lot of problems, for example, if you extend the Array.prototype object to include a method there, that property will be also enumerated.

For example:

Array.prototype.foo = "foo!";
var array = ['a', 'b', 'c'];

for (var i in array) {
  alert(array[i]);
}

The above code will alert, "a", "b", "c" and "foo!".

That be particularly a problem if you use some library that relies heavily on native prototypes augmention (such as MooTools for example).

The for-in statement as I said before is there to enumerate object properties, for example:

var obj = {
  "a": 1,
  "b": 2,
  "c": 3
};

for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) { 
  // or if (Object.prototype.hasOwnProperty.call(obj,prop)) for safety...
    alert("prop: " + prop + " value: " + obj[prop])
  }
}

In the above example the hasOwnProperty method allows you to enumerate only own properties, that's it, only the properties that the object physically has, no inherited properties.

I would recommend you to read the following article:

161 upvote
  flag
Why the down-vote? for...in should be avoided for Array-like objects! – CMS
13 upvote
  flag
This is the reason ( by CMS him self ) //allinonescript.com/questions/1885317/… – OscarRyz
upvote
  flag
Yours enumerates undefined elements, and for(in) doesn't. Official foreach algorithm checks if(in). I agree that iterating only numeric indices is correct for element enumeration (hasOwnProperty will allow non-numeric properties), note it is superior design to not depend on iteration order, so as to enable parallelism, assuming the iterated callback doesn't have side-effects. – Shelby Moore III
1 upvote
  flag
@Gabriel and @YuriKolovsky are right, accessing the length property has some cost in JS and you should always cache it, like so: for (var i = 0, l = myStringArray.length; i < l; i++) { ... } – Gras Double
14 upvote
  flag
@DoubleGras, I think that is an opinion that is not shared by everyone. See: //allinonescript.com/questions/5752906/… or groups.google.com/forum/?fromgroups#!topic/jsmentors/… – Matthijs Wessels
2 upvote
  flag
Anyone thinking you need to cache the length... Please see my answer, you don't even need to access it a single time, let alone cache it: for (var i=0, item; item=myStringArray[i]; i++) { /* use item here */ } – Stijn de Witt
13 upvote
  flag
@StijndeWitt No, because that breaks if you have any "falsey" values in your array: false, undefined, 0, "", NaN. – Phrogz
5 upvote
  flag
jsperf.com/caching-array-length/4 Here is a test to see if it is worth caching the length of an array in a Javascript loop – Enrico
1 upvote
  flag
Enrico's link to a performance comparison between caching and not caching shows that 'not caching' is.... 0.02% slower! negligible really – jasop
upvote
  flag
Can I add something to JS array while iterating over it?Will that add on to the iterations? – techie_28
2 upvote
  flag
The only reason I can think of for not caching the length is if the array changes while the loop is in progress – Timo Huovinen
4 upvote
  flag
Why is this preferable to someArray.forEach(function(item){}), that it should have so many upvotes? – user890167
1 upvote
  flag
I understand that for...in loops are undesirable for arrays but forEach is a viable alternative a lot of the time. It looks cleaner, encourages code seperation and reuse, and is supported by IE9+ (EMCA 5.1 standard). It would be really nice if it was edited into this answer as an alternative approach. – slicedtoad
upvote
  flag
In ES6 you can do: for (let i of arr) { } See: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… – Alex Couper
upvote
  flag
Another reason not to use for..in with an array, the counter variable will be a STRING!! – 4castle
upvote
  flag
@CMS I see you have a very big profile on SO. But why you have stopped answering? Your last answer on SO was about 5 years ago I guess? – Mohammad Usman

You can use map, which is a functional programming technique that's also available in other languages like Python, and Haskell.

[1,2,3,4].map( function(item) {
     alert(item);
})

The general syntax is:

array.map(func)

In general func would take one parameter, which is an item of the array. But in the case of Javascript, it can take a second parameter which is the item's index, and a third parameter which is the array itself.

The return value of array.map is another array, so you can use it like this:

var x = [1,2,3,4].map( function(item) { return item * 10; } );

And now x is [10,20,30,40].

You don't have to write the function inline. It could be a separate function.

var item_processor = function(item) {
      // do something complicated to an item
}

new_list = my_list.map(item_processor);

which would be sort-of equivalent to:

 for(item in my_list) { item_processor(item); }

except you don't get the new_list.

5 upvote
  flag
No, but it can be more powerful. check this out: joelonsoftware.com/items/2006/08/01.html – hasen
79 upvote
  flag
That particular example is probably better implemented using Array.forEach. map is for generating a new array. – harto
19 upvote
  flag
@hasen, the Array.prototype.map method is part of the ECMAScript 5th Edition Standard, is not yet available on all implementations (e.g. IE lacks of it), also for iterating over an array I think the Array.prototype.forEach method is more semantically correct... also please don't suggest the for-in statement, see my answer for more details :) – CMS
upvote
  flag
It's available in some libraries, eg jQuery... but is not really meant for iterating over things. At least semantically, it doesn't imply that things actually happen in any given order. Thus the name: you are mapping one set of values to another, not processing them iteratively. – intuited
2 upvote
  flag
If you check out the link CMS provided, there's an implementation you can use in browsers that don't natively support it. – harto
upvote
  flag
@intuited, I'd say the same applies to the foreach loop in java/c#/python; theoretically they can be applied in a random order (i.e. in parallel across multiple processors or even multiple machines). I'd also say that the body of the foreach loop is nothing but the body of the function that's being passed to map. – hasen
1 upvote
  flag
@hasen j: that's not been my understanding, mostly based on the fact that the foreach loop is derived from the for loop rather than from functional programming concepts. Also the fact that it's called a "loop" :) – intuited
upvote
  flag
2 upvote
  flag
The difference between forEach and map is that the former doesn't return the results of the iteration. map (sometimes a.k.a. collect, but very different from apply) is expressly for transforming each element of an array into a corresponding result; it's a 1-to-1 mapping, hence the name. It's part of a whole family of operations that include reduce (which produces a single result from the whole array) and filter (which produces a subset of the original array) and so on. Whereas forEach just does something with each element, semantics unspecified. – Mark Reed
upvote
  flag
The callback function passed to map actually gets called with three arguments: the first is the current item in the array, the second is the index of that item, and the third is a reference to the array itself. You only need to declare as many as you want as parameters, because Javascript, but they're all available. – Mark Reed
3 upvote
  flag
Downvote because if you're not actually mapping something, then using [].map is misleading. [].forEach makes semantic sense and also passes the same three arguments to the function. – gengkev

Opera, Safari, Firefox and Chrome now all share a set of enhanced Array methods for optimizing many common loops.

You may not need all of them, but they can be very useful, or would be if every browser supported them.

Mozilla Labs published the algorithms they and WebKit both use, so that you can add them yourself.

filter returns an array of items that satisfy some condition or test.

every returns true if every array member passes the test.

some returns true if any pass the test.

forEach runs a function on each array member and doesn't return anything.

map is like forEach, but it returns an array of the results of the operation for each element.

These methods all take a function for their first argument and have an optional second argument, which is an object whose scope you want to impose on the array members as they loop through the function.

Ignore it until you need it.

indexOf and lastIndexOf find the appropriate position of the first or last element that matches its argument exactly.

(function(){
    var p, ap= Array.prototype, p2={
        filter: function(fun, scope){
            var L= this.length, A= [], i= 0, val;
            if(typeof fun== 'function'){
                while(i< L){
                    if(i in this){
                        val= this[i];
                        if(fun.call(scope, val, i, this)){
                            A[A.length]= val;
                        }
                    }
                    ++i;
                }
            }
            return A;
        },
        every: function(fun, scope){
            var L= this.length, i= 0;
            if(typeof fun== 'function'){
                while(i<L){
                    if(i in this && !fun.call(scope, this[i], i, this))
                        return false;
                    ++i;
                }
                return true;
            }
            return null;
        },
        forEach: function(fun, scope){
            var L= this.length, i= 0;
            if(typeof fun== 'function'){
                while(i< L){
                    if(i in this){
                        fun.call(scope, this[i], i, this);
                    }
                    ++i;
                }
            }
            return this;
        },
        indexOf: function(what, i){
            i= i || 0;
            var L= this.length;
            while(i< L){
                if(this[i]=== what)
                    return i;
                ++i;
            }
            return -1;
        },
        lastIndexOf: function(what, i){
            var L= this.length;
            i= i || L-1;
            if(isNaN(i) || i>= L)
                i= L-1;
            else
                if(i< 0) i += L;
            while(i> -1){
                if(this[i]=== what)
                    return i;
                --i;
            }
            return -1;
        },
        map: function(fun, scope){
            var L= this.length, A= Array(this.length), i= 0, val;
            if(typeof fun== 'function'){
                while(i< L){
                    if(i in this){
                        A[i]= fun.call(scope, this[i], i, this);
                    }
                    ++i;
                }
                return A;
            }
        },
        some: function(fun, scope){
            var i= 0, L= this.length;
            if(typeof fun== 'function'){
                while(i<L){
                    if(i in this && fun.call(scope, this[i], i, this))
                        return true;
                    ++i;
                }
                return false;
            }
        }
    }
    for(p in p2){
        if(!ap[p])
            ap[p]= p2[p];
    }
    return true;
})();
upvote
  flag
Addition: IE supports forEach since version 9, see forEach Method MSDN – rwitzel

In JavaScript it's not advisable to loop through an Array with a for-in loop, but it's better using a for loop such as:

for(var i=0, len=myArray.length; i < len; i++){}

It's optimized as well ("caching" the array length). If you'd like to learn more, read my post on the subject.

2 upvote
  flag
myArray.forEach(function(obj) {}); is still the best – Jan Sverre
upvote
  flag
a tiny improvement: you could use ++i instead of i++ – roberkules
11 upvote
  flag
++i is an old school optimization that modern compilers do for you in a for loop since a long time ago :) //allinonescript.com/a/1547433/1033348 – ngryman
upvote
  flag
@Jannis .forEach has several things against it. 1) not native 2) Requires a new execution context for EVERY index which is rather expensive and seems like overkill (see dmitrysoshnikov.com/ecmascript/chapter-1-execution-contexts) – Jose
5 upvote
  flag
You have to be careful using this loop. I started using it and had a hard to track bug because of one mistake I made. If you nest two loops like this: jsfiddle.net/KQwmL/1. You have to be careful to name the var len differently in the two loops, otherwise the second loop will overwrite the first len. – Rui Marques

There is a way to do it where you have very little implicit scope in your loop and do away with extra variables.

var i = 0,
     item;

// note this is weak to sparse arrays or falsey values
for ( ; item = myStringArray[i++] ; ){ 
    item; // This is the string at the index.
}

Or if you really want to get the id and have a really classical for loop:

var i = 0,
    len = myStringArray.length; // cache the length

for ( ; i < len ; i++ ){
    myStringArray[i]; // Don't use this if you plan on changing the length of the array
}

Modern browsers all support iterator methods forEach, map, reduce, filter and a host of other methods on the Array prototype.

3 upvote
  flag
Note that some interpreters (e.g. V8) will automatically cache the length of the array if the code is called enough times and it detects that the length is not modified by the loop. – Phrogz
upvote
  flag
Thanks for the info @Phrogz it's true that there is a lot of optimizations that the VM can make, but since older browsers don't have this it would still be best practice to optimize for it since it is so cheap. – Gabriel
1 upvote
  flag
@Gabriel: Why? Please give real-world examples showing that not caching the length is actually a performance bottleneck. I follow the 'premature optimization is the root of all evil' approach. I will fix that one loop that actually poses a problem once I encounter it... – Stijn de Witt
1 upvote
  flag
@StijndeWitt imo it is just a stylistic issue. Honestly I no longer even use for loops instead relying on underscore for things like _.each, _.map etc. to do these things. When I did write loops like this I cached the length primarily so that all my variable declaration were in one place, at the top of my function. Following my advice in this regard is inconsequential to any real world application. Premature optimization is super bad, but if optimization happens to result from stylistic decisions I don't think it actually matters. – Gabriel
1 upvote
  flag
@Gabriel I believe JavaScript already supports the map function on arrays, no need to introduce an additional lib for that. – Noz
upvote
  flag
@Noz map has only since recently enjoyed broad browser support... And of course underscore offers more than just that. But I wholeheartedly agree that if possible and not unreasonably more complex, using vanilla JS over a library is always the better option. Dependencies are bad. Try to avoid them. – Stijn de Witt

Use the while loop...

var i=0, item, items = ['one','two','three'];
while(item = items[i++]){
    console.log(item);
}

logs: 'one','two','three'

And for the reverse order, an even more efficient loop

var items = ['one','two','three'], i = items.length;
while(i--){
    console.log(items[i]);
}

logs: 'three','two','one'

Or the classical for loop

var items = ['one','two','three']
for(var i=0, l = items.length; i < l; i++){
    console.log(items[i]);
}

logs: 'one','two','three'

Reference: http://www.sitepoint.com/google-closure-how-not-to-write-javascript/

16 upvote
  flag
The first example of the "while" syntax won't work if any of the array elements is falsy. – Chris Cooper
2 upvote
  flag
... and this while loop is equivalent to: for (var i=0,item; item=items[i]; i++) , which takes away the need to declare the index and item variables beforehand... – Stijn de Witt
1 upvote
  flag
@StijndeWitt But for this applies: if the value is falsy, it won't work... – yckart
upvote
  flag

There's a method to iterate over only own object properties, not including prototype's ones:

for (var i in array) if (array.hasOwnProperty(i)) {
    // do something with array[i]
}

but it still will iterate over custom-defined properties.

In javascript any custom property could be assigned to any object including array.

If one wants to iterate over sparsed array, for (var i = 0; i < array.length; i++) if (i in array) or array.forEach with es5shim should be used.

upvote
  flag
This is interesting, is there any gotchas you have experienced except those mentioned? – Daniel Sokolowski
upvote
  flag
And how about using for (var i in array) if (++i) ? – Daniel Sokolowski

Yes, but only if your implementation includes the for...of feature introduced in ECMAScript 2015 (the "Harmony" release).

It works like this:

// REQUIRES ECMASCRIPT 2015+
var s, myStringArray = ["Hello", "World"];
for (s of myStringArray) {
  // ... do something with s ...
}

Or better yet, since ECMAScript 2015 also provides block-scoped variables via let and const:

// REQUIRES ECMASCRIPT 2015+
const myStringArray = ["Hello", "World"];
for (let s of myStringArray) {
  // ... do something with s ...
}
// s is no longer defined here

Many JavaScript developers are still working in an environment that's not there yet, however - especially if writing code to run in web browsers, where the site developers often can't be sure what browser/version their clients will be using.

If you can assume the JavaScript interpreter is compliant with the previous edition of the ECMAScript specification (which rules out, for example, versions of Internet Explorer before 9), then you can use the forEach iterator method instead of a loop. In that case, you pass a function to be called on each item in the array:

var myStringArray = [ "Hello", "World" ];
myStringArray.forEach( function(s) { 
     // ... do something with s ...
} );

But if even that is too much to assume, and you want something that works in all versions of JavaScript, then you have to use an explicit counting loop. The safest version, which handles sparse arrays properly, is something like this:

var i, s, myStringArray = [ "Hello", "World" ], len = myStringArray.length;
for (i=0; i<len; ++i) {
  if (i in myStringArray) {
    s = myStringArray[i];
    // ... do something with s ...
  }
}

Assigning the length value to the local variable (as opposed to including the full myStringArray.length expression in the loop condition) can make a significant difference in performance since it skips a property lookup each time through; using Rhino on my machine, the speedup is 43%.

You will often see the length caching done in the loop initialization clause, like this:

var i, len, myStringArray = [ "Hello", "World" ];
for (len = myStringArray.length, i=0; i<len; ++i) {

The for...in syntax mentioned by others is for looping over an object's properties; since an Array in JavaScript is just an object with numeric property names (and an automatically-updated length property), you can theoretically loop over an Array with it. But the problem is that it doesn't restrict itself to the numeric property values (remember that even methods are actually just properties whose value is a closure), nor does it iterate over those in numeric order. Therefore, the for...in syntax should not be used for looping through Arrays.

17 upvote
  flag
Note that some interpreters (e.g. V8) will automatically cache the length of the array if the code is called enough times and it detects that the length is not modified by the loop. While caching the length is still nice, it may not provide a speed boost when your code is being invoked enough times to actually make a difference. – Phrogz
2 upvote
  flag
@mark-reed Could you please explain why you used i in myStringArray in your example? How can that be false? – Denis V
upvote
  flag
@DenisV - easily - the array could be sparse. The fact that a.length == n only means that the highest numeric key in the array is n-1 - it doesn't necessarily imply that the rest of the keys 0 through n-2 are actually present in the array. That's the typical case, but it's not by any means guaranteed. – Mark Reed
upvote
  flag
@MarkReed I would say, it's not true. You cannot delete an array element without changing the length property. length property guarantees that you have length elements in the array. Arrays always have all the IDs (though elements can be undefined). And the only way you can delete an item from the Array is splice and it renumbers the items and changes the length. While delete a[i] preserves the id, but assigns the value of this element to undefined. – Denis V
2 upvote
  flag
@DenisV: false. a=[1,2,3,4]; delete a[2]; for (j in a) { console.log(j); } outputs 0, 1, 3, and 4. a.length is still 5. – Mark Reed
upvote
  flag
@MarkReed but doing for j in a for Array is highly discouraged. And if you access non-existing element in an array, it will not throw an error or produce any other unexpected behavior. – Denis V
upvote
  flag
@MarkReed moreover, if you use console.log(a) you will get the following: [1, 2, undefined, 4], which proves that the 3rd element exists. I agree, that it looks like inconsistency in the standard, but I believe, the check is reduntant in this case. – Denis V
1 upvote
  flag
I'm not suggesting for j in a. I'm demonstrating that the in check is not redundant, as you claimed it was, by showing all the indexes and showing that there is one between 0 and length-1 that is not there. I could also have just printed 2 in a, which is indeed false, despite the fact that you said that was impossible. – Mark Reed
1 upvote
  flag
As you says that "restrict yourself to a subset of available JavaScript engines" Is it means forEach is not available in all browsers? Btw your answer is very helpful to me Thanks! – Grijesh Chauhan
2 upvote
  flag
@GrijeshChauhan - correct. For instance, IE through version 8 doesn't support it. See this question. – Mark Reed
upvote
  flag
@MarkReed Are you sure that your performance data is correct? I noticed that your loop (set up as for (var i=0; i<len; ++i)), uses ++i, which would cause the first item in the array to be skipped. – Code Bling
upvote
  flag
@CodeBling: No, it doesn't. The increment (third clause) doesn't get evaluated until after the body of the loop, so there's no difference between ++i and i++ unless there are additional expressions within that clause. – Mark Reed
upvote
  flag
It seems like this is rather verbose for something that is extremely common. Is there a reason why there is not a simple implementation of this in standard JS? – DrBailey
upvote
  flag
Well, Harmony is the new "standard"; it just hasn't been widely adopted yet. As for "why", you could ask Brendan Eich. But JS was designed and implemented in an incredibly small amount of time, by a first-time language designer. It's amazing that we got a language as good as we did. The fact that for...in iterates over indexes seems weird - until you remember that Javascript's "arrays" are really just dictionaries/objects with numeric keys. Iterating over keys makes sense because you can then use keys to extract the values, but you can't go the other way. – Mark Reed

I would thoroughly recommend making use of the underscore.js library. It provides you with various functions that you can use to iterate over arrays/collections.

For instance:

_.each([1, 2, 3], function(num){ alert(num); });
=> alerts each number in turn...
7 upvote
  flag
For new discoverers of this question, I'd just like to point out Lo-Dash, a spiritual successor of Underscore's that improves upon it in many ways. – Mark Reed
3 upvote
  flag
Why use underscore if ECMA-262 has been added the forEach methor. The native code is always better. – Walter Chapilliquen - wZVanG

It's not 100% identical, but similar:

   var myStringArray = ['Hello', 'World']; // array uses [] not {}
    for (var i in myStringArray) {
        console.log(i + ' -> ' + myStringArray[i]); // i is the index/key, not the item
    }

1 upvote
  flag
It seems that this would run up against similar problems as other for in usages with an array object, in that prototype member variables would be caught by the for in as well. – Kzqai

If you want a terse way to write a fast loop and you can iterate in reverse:

for (var i=myArray.length;i--;){
  var item=myArray[i];
}

This has the benefit of caching the length (similar to for (var i=0, len=myArray.length; i<len; ++i) and unlike for (var i=0; i<myArray.length; ++i)) while being fewer characters to type.

There are even some times when you ought to iterate in reverse, such as when iterating over a live NodeList where you plan on removing items from the DOM during iteration.

16 upvote
  flag
For the people that don't get what is so ingenious: The i-- expression is first evaluated and allows the loop to continue when it's not falsish... Afterwards the counter is decremented. As soon as i becomes zero it will break out of the loop as zero is a falsish value in Javascript. – Stijn de Witt
5 upvote
  flag
falsish? You mean falsey. Let's all stick the proper terminology to avoid confusion ;) – danwellman
4 upvote
  flag
I've seen the term falsish being used by people I consider gurus. If it's good enough for them it's good enough for me. Also a but disappointed to see that my comment that is actually ontopic and adds explanation/insight gets 0 upvotes, but the comment that nitpicks on a term in my comment gets 4. Ah well just a matter of priorities I guess. – Stijn de Witt
upvote
  flag
"Caching the length"? The length is stored as an integer in the array, it's not measured every time you access it. There's no benefit here in copying the value of length into another variable. – Mouscellaneous
1 upvote
  flag
@Mouscellaneous These days there certainly is not; in years past iterating JavaScript arrays caching the length on the JavaScript side (instead of reaching across the implementation) was a clear perf gain (when microoptimizing). For example, for (var i=0,len=array.length;i<len;++i) was a common, sensible loop to write. – Phrogz
upvote
  flag
but the order is in reverse mode – ZiTAL

If you're using the jQuery library, consider using http://api.jquery.com/jQuery.each/

From the documentation:

jQuery.each( collection, callback(indexInArray, valueOfElement) )

Returns: Object

Description: A generic iterator function, which can be used to seamlessly iterate over both objects and arrays. Arrays and array-like objects with a length property (such as a function's arguments object) are iterated by numeric index, from 0 to length-1. Other objects are iterated via their named properties.

The $.each() function is not the same as $(selector).each(), which is used to iterate, exclusively, over a jQuery object. The $.each() function can be used to iterate over any collection, whether it is a map (JavaScript object) or an array. In the case of an array, the callback is passed an array index and a corresponding array value each time. (The value can also be accessed through the this keyword, but Javascript will always wrap the this value as an Object even if it is a simple string or number value.) The method returns its first argument, the object that was iterated.

7 upvote
  flag
jQuery for everything? – Exception
6 upvote
  flag
Agreed with Exception. Do not underestimate the impact of extra dependencies. I would advice against this except in code that is already heavily using jQuery anyway. – Stijn de Witt
1 upvote
  flag
Update: These days, you can use Array.forEach to get much of the same effect with native arrays. – Stijn de Witt

I did not yet see this variation, which I personally like the best:

Given an array:

var someArray = ["some", "example", "array"];

You can loop over it without ever accessing the length property:

for (var i=0, item; item=someArray[i]; i++) {
  // item is "some", then "example", then "array"
  // i is the index of item in the array
  alert("someArray[" + i + "]: " + item);
}

See this JsFiddle demonstrating that: http://jsfiddle.net/prvzk/

This only works for arrays that are not sparse. Meaning that there actually is a value at each index in the array. However, I found that in practice I hardly ever use sparse arrays in Javascript... In such cases it's usually a lot easier to use an object as a map/hashtable. If you do have a sparse array, and want to loop over 0 .. length-1, you need the for (var i=0; i<someArray.length; ++i) construct, but you still need an if inside the loop to check whether the element at the current index is actually defined.

Also, as CMS mentions in a comment below, you can only use this on arrays that don't contain any falsish values. The array of strings from the example works, but if you have empty strings, or numbers that are 0 or NaN, etc. the loop will break off prematurely. Again in practice this is hardly ever a problem for me, but it is something to keep in mind, which makes this a loop to think about before you use it... That may disqualify it for some people :)

What I like about this loop is:

  • It's short to write
  • No need to access (let alone cache) the length property
  • The item to access is automatically defined within the loop body under the name you pick.
  • Combines very naturally with array.push and array.splice to use arrays like lists/stacks

The reason this works is that the array specification mandates that when you read an item from an index >= the array's length, it will return undefined. When you write to such a location it will actually update the length.

For me, this construct most closely emulates the Java 5 syntax that I love:

for (String item : someArray) {
}

... with the added benefit of also knowing about the current index inside the loop

13 upvote
  flag
Notice that with this approach the loop will stop as soon it finds a falsey value, such as an empty string, 0, false, NaN, null or undefined, even before i reaches the length, e.g.: jsfiddle.net/prvzk/1 – CMS
3 upvote
  flag
The loop condition could be (item=someArray[i]) !== undefined. – daniel1426
var x = [4, 5, 6];
for (i = 0, j = x[i]; i < x.length; j = x[++i]) {
    console.log(i,j);
}

A lot cleaner...

upvote
  flag
did you mean "x =" on the first line? – Matiaan

for (var s of myStringArray) {

(Directly answering your question: now you can!)

Most other answers are right, but they do not mention (as of this writing) that ECMA Script  6  2015 is bringing a new mechanism for doing iteration, the for..of loop.

This new syntax is the most elegant way to iterate an array in javascript (as long you don't need the iteration index), but it is not yet widely supported by the browsers.

It currently works with Firefox 13+, Chrome 37+ and it does not natively work with other browsers (see browser compatibility below). Luckily we have JS compilers (such as Babel) that allow us to use next-generation features today.

It also works on Node (I tested it on version 0.12.0).

Iterating an array

// You could also use "let" instead of "var" for block scope.
for (var letter of ["a", "b", "c"]) { 
   console.log(letter); 
}

Iterating an array of objects

var band = [
  {firstName : 'John', lastName: 'Lennon'}, 
  {firstName : 'Paul', lastName: 'McCartney'}
];

for(var member of band){
  console.log(member.firstName + ' ' + member.lastName); 
}

Iterating a generator:

(example extracted from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)

function* fibonacci() { // a generator function
  let [prev, curr] = [1, 1];
  while (true) {
    [prev, curr] = [curr, prev + curr];
    yield curr;
  }
}

for (let n of fibonacci()) {
  console.log(n);
  // truncate the sequence at 1000
  if (n >= 1000) {
    break;
  }
}

Compatibility table: http://kangax.github.io/es5-compat-table/es6/#For..of loops

Spec: http://wiki.ecmascript.org/doku.php?id=harmony:iterators

}

The optimized approach is to cache the length of array and using single var pattern initializing all variables with single var keyword.

var i, max, myStringArray = ["Hello","World"];
for (i = 0, max = myStringArray.length; i < max; i++) {
    alert(myStringArray[i]);
   //Do something
}

If order of iteration does not matter than you should try reversed loop, it is fastest as it reduce overhead condition testing and decrement is in one statement:

var i,myStringArray = ["item1","item2"];
for (i =  myStringArray.length; i--) {
    alert(myStringArray[i]);
}

or better and cleaner to use while loop:

var myStringArray = ["item1","item2"],i = myStringArray.length;
while(i--) {
   // do something with fruits[i]
}

The most elegant and fast way

var arr = [1, 2, 3, 1023, 1024];
for (var value; value = arr.pop();) {
    value + 1
}

http://jsperf.com/native-loop-performance/8


Edited (because I was wrong)


Comparing methods for looping through an array of 100000 items and do a minimal operation with the new value each time.

Preparation:

<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script>
    Benchmark.prototype.setup = function() {
        // Fake function with minimal action on the value
        var tmp = 0;
        var process = function(value) {
            tmp = value; // Hold a reference to the variable (prevent engine optimisation?)
        };

        // Declare the test Array
        var arr = [];
        for (var i = 0; i < 100000; i++)
            arr[i] = i;
    };
</script>

Tests:

<a href="http://jsperf.com/native-loop-performance/16" 
   title="http://jsperf.com/native-loop-performance/16"
><img src="http://i.imgur.com/YTrO68E.png" title="Hosted by imgur.com" /></a>
upvote
  flag
This loop doesn't seem to follow order of items in the array. – Deniz Ozger
upvote
  flag
My test was wrong. It's correct, showing all LOOPS now. jsperf.com/native-loop-performance/16 – molokoloco
14 upvote
  flag
-1 for modifying the array, which a plain loop should not do. Probably affecting the performance test as well. – Bergi
upvote
  flag
@bergi is right. This loop wipes out the array as it loops through it. Not what you want in most cases. – Stijn de Witt
4 upvote
  flag
breaks on falsey items. – njzk2

Well, how about this:

for (var key in myStringArray) {
    console.log(myStringArray[key]);
}
7 upvote
  flag
for/in loops are discouraged for array enumeration, as the order of eumeration is not guaranteed, and it enumerates properties, not just array elements. For more info, see //allinonescript.com/questions/500504/…, or even the accepted answer of this question; //allinonescript.com/a/3010848/444991 – Matt
upvote
  flag
well, thanks for the update.. and what about the situation when we don't care about the order of the array? Will this still be discouraged? – Sambhav Sharma
3 upvote
  flag
It'll still be discouraged because it enumerates all the properties, not just the array elements. The two posts I linked to explain this in more detail. – Matt

There are various way to loop through array in JavaScript.

Generic loop:

var i;
for (i = 0; i < substr.length; ++i) {
    // Do something with `substr[i]`
}

ES5's forEach:

substr.forEach(function(item) {
    // Do something with `item`
});

jQuery.each:

jQuery.each(substr, function(index, item) {
    // Do something with `item` (or `this` is also `item` if you like)
});

Have a look this for detailed information or you can also check MDN for looping through an array in JavaScript & using jQuery check jQuery for each.

4 upvote
  flag
It's a shame the ES5 forEach isn't at the top of the answers because it most closely matches what the OP was asking for. – Pete

For example, I used in a Firefox console:

[].forEach.call(document.getElementsByTagName('pre'), function(e){ 
   console.log(e);
})

Sure it's inefficient and many despise it, but it's one of the closest to the mentioned:

var myStringArray = ["Hello","World"];
myStringArray.forEach(function(f){
    // Do something
})
2 upvote
  flag
This exact functionality is already part of Mark Reed's answer. – Jesse Sielaff

Intro

Since my time in college, I've programmed in Java, JavaScript, Pascal, ABAP, PHP, Progress 4GL, C/C++ and possibly a few other languages I can't think of right now.

While they all have their own linguistic idiosyncrasies, each of these languages share many of the same basic concepts. Such concepts include procedures / functions, IF-statements, FOR-loops, and WHILE-loops.


A traditional for-loop

A traditional for loop has three components:

  1. The initialization: executed before the look block is executed the first time
  2. The condition: checks a condition every time before the loop block is executed, and quits the loop if false
  3. The afterthought: performed every time after the loop block is executed

These three components are separated from each other by a ; symbol. Content for each of these three components is optional, which means that the following is the most minimal for loop possible:

for (;;) {
    // Do stuff
}

Of course, you will need to include an if(condition === true) { break; } or an if(condition === true) { return; } somewhere inside that for-loop to get it to stop running.

Usually, though, the initialization is used to declare an index, the condition is used to compare that index with a minimum or maximum value, and the afterthought is used to increment the index:

for (var i = 0, length = 10; i < length; i++) {
    console.log(i);
}

Using a traditional for loop to loop through an array

The traditional way to loop through an array, is this:

for (var i = 0, length = myArray.length; i < length; i++) {
    console.log(myArray[i]);
}

Or, if you prefer to loop backwards, you do this:

for (var i = myArray.length - 1; i > -1; i--) {
    console.log(myArray[i]);
}

There are, however, many variations possible, like for example this one:

for (var key = 0, value = myArray[key], length = myArray.length; key < length; value = myArray[++key]) {
    console.log(value);
}

... or this one ...

var i = 0, length = myArray.length;
for (; i < length;) {
    console.log(myArray[i]);
    i++;
}

... or this one:

var key = 0, value;
for (; value = myArray[key++];){
    console.log(value);
}

Whichever works best is largely a matter of both personal taste and the specific use case you're implementing.

Note that each of these variations is supported by all browsers, including very very old ones!


A while loop

One alternative to a for loop is a while loop. To loop through an array, you could do this:

var key = 0;
while(value = myArray[key++]){
    console.log(value);
}

Like traditional for loops, while loops are supported by even the oldest of browsers.

Also, note that every while loop can be rewritten as a for loop. For example, the while loop hereabove behaves the exact same way as this for-loop:

for(var key = 0; value = myArray[key++];){
    console.log(value);
}

For...in and for...of

In JavaScript, you can also do this:

for (i in myArray) {
    console.log(myArray[i]);
}

This should be used with care, however, as it doesn't behave the same as a traditional for loop in all cases, and there are potential side-effects that need to be considered. See Why is using "for...in" with array iteration a bad idea? for more details.

As an alternative to for...in, there's now also for for...of. The following example shows the difference between a for...of loop and a for...in loop:

var myArray = [3, 5, 7];
myArray.foo = "hello";

for (var i in myArray) {
  console.log(i); // logs 0, 1, 2, "foo"
}

for (var i of myArray) {
  console.log(i); // logs 3, 5, 7
}

Additionally, you need to consider that no version of Internet Explorer supports for...of (Edge 12+ does) and that for...in requires at least Internet Explorer 10.


Array.prototype.forEach()

An alternative to for-loops is Array.prototype.forEach(), which uses the following syntax:

myArray.forEach(function(value, key, myArray) {
    console.log(value);
});

Array.prototype.forEach() is supported by all modern browsers, as well as Internet Explorer 9 and later.


Libraries

Finally, many utility libraries also have their own foreach variation. AFAIK, the three most popular ones are these:

jQuery.each(), in jQuery:

$.each(myArray, function(key, value) {
    console.log(value);
});

_.each(), in Underscore.js:

_.each(myArray, function(value, key, myArray) {
    console.log(value);
});

_.forEach(), in Lodash.js:

_.forEach(myArray, function(value, key) {
    console.log(value);
});

Short answer: yes. You can do with this:

var myArray = ["element1", "element2", "element3", "element4"];

for (i = 0; i < myArray.length; i++) {
  console.log(myArray[i]);
}

In a browser console, you can see something like "element1", "element2", etc., printed.

If you want to use jQuery, it has a nice example in its documentation:

 $.each([ 52, 97 ], function( index, value ) {
      alert( index + ": " + value );
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

It is better to use a sequential for loop:

for (var i = 0; i < myStringArray.length; i++) {
    // Do something
}

There are a couple of ways to do it in JavaScript. The first two examples are JavaScript samples. The third one makes use of a JavaScript library, that is, jQuery making use of the .each() function.

var myStringArray = ["hello", "World"];
for(var i in myStringArray) {
  alert(myStringArray[i]);
}

var myStringArray = ["hello", "World"];
for (var i=0; i < myStringArray.length; i++) {
  alert(myStringArray[i]);
}

var myStringArray = ["hello", "World"];
$.each(myStringArray, function(index, value){
  alert(value);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

upvote
  flag
for...in should be avoided for Array-like objects – brk
var myStringArray = ["hello", "World"];
myStringArray.forEach(function(val, index){
   console.log(val, index);
})
var obj = ["one","two","three"];

for(x in obj){
    console.log(obj[x]);
}

Array loop:

for(var i = 0; i < things.length; i++){
    var thing = things[i];
    console.log(thing);
}

Object loop:

for(var prop in obj){
    var propValue = obj[prop];
    console.log(propValue);
}

In JavaScript, there are so many solutions to loop an array.

The code below are popular ones

/** Declare inputs */
const items = ['Hello', 'World']

/** Solution 1. Simple for */
console.log('solution 1. simple for')

for (let i = 0; i < items.length; i++) {
  console.log(items[i])
}

console.log()
console.log()

/** Solution 2. Simple while */
console.log('solution 2. simple while')

let i = 0
while (i < items.length) {
  console.log(items[i++])
}

console.log()
console.log()

/** Solution 3. forEach*/
console.log('solution 3. forEach')

items.forEach(item => {
  console.log(item)
})

console.log()
console.log()

/** Solution 4. for-of*/
console.log('solution 4. for-of')

for (const item of items) {
  console.log(item)
}

console.log()
console.log()

The best way in my opinion is to use the Array.forEach function. If you cannot use that I would suggest to get the polyfill from MDN to make i available, it is certainly the safest way to iterate over an array in JavaScript.

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

So as others has suggested, this is almost always what you want:

var numbers = [1,11,22,33,44,55,66,77,88,99,111];
var sum = 0;
numbers.forEach(function(n){
  sum += n;
});

This ensures that anything you need in the scope of processing the array stays within that scope, and that you are only processing the values of the array, not the object properties and other members, which is what for .. in does.

using a regular c style for loop works in most cases, it is just important to remember that everything within the loop shares it's scope with the rest of your program, the { } does not create a new scope.

Hence:

var sum = 0;
var numbers = [1,11,22,33,44,55,66,77,88,99,111];

for(var i = 0; i<numbers.length; ++i){ 
  sum += numbers[i];
}

alert(i);

will output "11" - which may or may not be what you want.

Working jsFiddle example: https://jsfiddle.net/workingClassHacker/pxpv2dh5/7/

Yes, you can do the same in JavaScript using loop, but not limited to that, many ways to do loop over arrays in JavaScrip, imagine you have this array below and you'd like to do a loop over it:

var arr = [1, 2, 3, 4, 5];

These are the solutions:

1) For loop

For loop is a common way looping through arrays in JavaScript, but no considered as the fastest solutions for large arrays:

for (var i=0, l=arr.length; i<l; i++) { 
  console.log(arr[i]);
}

2) While loop

While loop considered as the fastest way to loop through long arrays, but usually less used in the JavaScript:

let i=0;

while (arr.length>i) {
    console.log(arr[i]);
    i++;
}

3) Do while
Do while doing the same thing as while with some syntax difference as below:

let i=0;
do {
  console.log(arr[i]);
  i++;
}
while (arr.length>i);

These are the main ways to do javascript loops, but there are few more ways to do that.

Also we use for in loop for looping over objects in javascript.

Also look at map(), filter(), reduce() etc functions on Array in JavaScript. They may do things much faster and better than using while and for.

This is good article if you like to learn more about the async functions over arrays in JavaScript.

Functional programming has been making quite a splash in the development world these days. And for good reason: Functional techniques can help you write more declarative code that is easier to understand at a glance, refactor, and test.

One of the cornerstones of functional programming is its special use of lists and list operations. And those things are exactly what the sound like they are: arrays of things, and the stuff you do to them. But the functional mindset treats them a bit differently than you might expect.

This article will take a close look at what I like to call the "big three" list operations: map, filter, and reduce. Wrapping your head around these three functions is an important step towards being able to write clean functional code, and opens the doors to the vastly powerful techniques of functional and reactive programming.

It also means you'll never have to write a for loop again.

Read more>> here:

upvote
  flag
Is there really a performance difference before a for loop and a while loop when iterating through an array? I was under the impression the differences were primarily syntactical – shea

It seems that listed all the variants except forEach by lodash:

_.forEach([1, 2], (value) => {
  console.log(value);
});

Just a simple one line solution

arr = ["table", "chair"];

// solution
arr.map((e) => {
  console.log(e);
  return e;
});

upvote
  flag
You'd rather want to use .forEach() and drop the return e; – Michel Jung
upvote
  flag
as map implies, the function map is for mapping a certain value to something else, hence I would not suggest using that one for this certain example. – Kyon

Not the answer you're looking for? Browse other questions tagged or ask your own question.