Loop through an array in JavaScript

Question

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 I do the same in JavaScript?

Wadleigh

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? – Wadleigh

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... – Cotopaxi

related - #5349925 – Perspicuous

related - https://mcmap.net/q/36232/-how-to-loop-over-an-array-with-javascript/31671 – Serg

Also : myStringArray.forEach(function(value, index){ console.log(index, value) }); and result will be 0 "Hello" 1 "World" – Separatist

jsben.ch/#/Q9oD5 <= Here a benchmark of a bunch of solutions for looping through arrays – Milissa

@Milissa the link has changed and is now jsben.ch/Q9oD5. To summarize, sequential for loop takes 60% of the time that for-in takes. – Savoy

@CMS No, it's not really simple. It's really simple in every other language. It's ridiculously complex in JS, where you have in and of that can both be used and do different things. Then you also have forEach and the ugly and annoying index based looping. Every other modern language makes looping over a collection easy and straightforward with no surprises or confusion. JS could, too, but it doesn't. – Whitethroat

Does this answer your question? For-each over an array in JavaScript – Entire

Why isn't this question answered, people have put gigantic enermy into putting a correct, formal, with pros and cons and no answer is confirmed? I don't see a single error on their answers. Please set an anwer as confirmed – Burgomaster

Answer 1

Three main options:

1. for (var i = 0; i < xs.length; i++) { console.log(xs[i]); }
2. xs.forEach((x, i) => console.log(x));
3. for (const x of xs) { console.log(x); }

Detailed examples are below.

---

1. Sequential for loop:

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

Pros

• Works on every environment
• You can use break and continue flow control statements

Cons

• Too verbose
• Imperative
• Easy to have off-by-one errors (sometimes also called a fence post error)

2. Array.prototype.forEach:

The ES5 specification introduced a lot of beneficial array methods. One of them, the Array.prototype.forEach, gave us a concise way to iterate over an array:

const array = ["one", "two", "three"]
array.forEach(function (item, index) {
  console.log(item, index);
});

Being almost ten years as the time of writing that the ES5 specification was released (Dec. 2009), it has been implemented by nearly all modern engines in the desktop, server, and mobile environments, so it's safe to use them.

And with the ES6 arrow function syntax, it's even more succinct:

array.forEach(item => console.log(item));

Arrow functions are also widely implemented unless you plan to support ancient platforms (e.g., Internet Explorer 11); you are also safe to go.

Pros

• Very short and succinct.
• Declarative

Cons

• Cannot use break / continue

Normally, you can replace the need to break out of imperative loops by filtering the array elements before iterating them, for example:

array.filter(item => item.condition < 10)
     .forEach(item => console.log(item))

Keep in mind if you are iterating an array to build another array from it, you should use map. I've seen this anti-pattern so many times.

Anti-pattern:

const numbers = [1,2,3,4,5], doubled = [];

numbers.forEach((n, i) => { doubled[i] = n * 2 });

Proper use case of map:

const numbers = [1,2,3,4,5];
const doubled = numbers.map(n => n * 2);

console.log(doubled);

Also, if you are trying to reduce the array to a value, for example, you want to sum an array of numbers, you should use the reduce method.

Anti-pattern:

const numbers = [1,2,3,4,5];
const sum = 0;
numbers.forEach(num => { sum += num });

Proper use of reduce:

const numbers = [1,2,3,4,5];
const sum = numbers.reduce((total, n) => total + n, 0);

console.log(sum);

3. ES6 for-of statement:

The ES6 standard introduces the concept of iterable objects and defines a new construct for traversing data, the for...of statement.

This statement works for any kind of iterable object and also for generators (any object that has a \[Symbol.iterator\] property).

Array objects are by definition built-in iterables in ES6, so you can use this statement on them:

let colors = ['red', 'green', 'blue'];
for (const color of colors){
    console.log(color);
}

Pros

• It can iterate over a large variety of objects.
• Can use normal flow control statements (break / continue).
• Useful to iterate serially asynchronous values.

Cons

• If you are targeting older browsers, the transpiled output might surprise you.

Do not use for...in

@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 also be enumerated.

For example:

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

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

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

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

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...
        console.log("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:

• Enumeration VS Iteration

Aspergillus

I know this answer predates async and Promises, but I feel this is worth mentioning in any conversation pertaining to modern JavaScript: "forEach does not wait for promises. Make sure you are aware of the implications while using promises (or async functions) as forEach callback." (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…) – Unclench

con of es6 for-of: can't get the current index – Aetna

@Aetna you can, but it's not straightforward. – Birthroot

What about the for(let ojb of objs) statement? – Linalinacre

For reference, this is how to get the current index as you loop. I personally find this pretty straightforwards. for (const [i, x] of yourArray.entries()) { ... }. – Essayist

For those looking at this answer and wondering whether they should choose forEach() of for-of, I would just recommend using for-of. for-of is the newer looping syntax that entirely replaces the need for forEach. There isn't anything that for-of offers that forEach does not, but the inverse isn't true. – Essayist

I think the mentioned contra of missing "continue" is not really true, just use return inside the functions, its the equivalent. However, the missing "break" is a valid contra point. – Out

I prefer for...of instead of forEach() because for...of doesn't use a callback and that can really help with Typescript type inference: https://mcmap.net/q/36233/-quot-object-is-possibly-39-undefined-39-quot-in-typescript – Carlcarla

What about performance-wise? – Fortenberry

If you know that an array is sparse, for...in has the benefit of only iterating over existing keys without the need for the syncronous function callback needed by forEach. For...in is also compatible with old browsers. Don't dis for...in. As of ES5 for...in iterates over array keys first before any other properties. – Bottoms

I'm not thrilled with forEach. for-of is much more clear semantically. Think of the next programmer: not everyone is at the same level skill-wise. Who cares about performace? So long as you are searching millions of nodes and/or subnodes in some kind of tree, or doing thousands of searches every minute. But most apps don't fit into that category. – Citified

This answer has in-deep explanation of this topic: #9329946 – Audacity

ESLint complains about for..of, by default: «iterators/generators require regenerator-runtime, which is too heavyweight for this guide to allow them. Separately, loops should be avoided in favor of array iterations [eslintno-restricted-syntax]». I'm tempted to forget all this madness, and stick exclusively to while... – Glassful

Answer 2

Yes, assuming your implementation includes the for...of feature introduced in ECMAScript 2015 (the "Harmony" release)... which is a pretty safe assumption these days.

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:

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

(The variable s is different on each iteration, but can still be declared const inside the loop body as long as it isn't modified there.)

A note on sparse arrays: an array in JavaScript may not actually store as many items as reported by its length; that number is simply one greater than the highest index at which a value is stored. If the array holds fewer elements than indicated by its length, its said to be sparse. For example, it's perfectly legitimate to have an array with items only at indexes 3, 12, and 247; the length of such an array is 248, though it is only actually storing 3 values. If you try to access an item at any other index, the array will appear to have the undefined value there, but the array is nonetheless is distinct from one that actually has undefined values stored. You can see this difference in a number of ways, for example in the way the Node REPL displays arrays:

> a              // array with only one item, at index 12
[ <12 empty items>, 1 ]
> a[0]           // appears to have undefined at index 0
undefined
> a[0]=undefined // but if we put an actual undefined there
undefined
> a              // it now looks like this
[ undefined, <11 empty items>, 1 ]

So when you want to "loop through" an array, you have a question to answer: do you want to loop over the full range indicated by its length and process undefineds for any missing elements, or do you only want to process the elements actually present? There are plenty of applications for both approaches; it just depends on what you're using the array for.

If you iterate over an array with for..of, the body of the loop is executed length times, and the loop control variable is set to undefined for any items not actually present in the array. Depending on the details of your "do something with" code, that behavior may be what you want, but if not, you should use a different approach.

Of course, some developers have no choice but to use a different approach anyway, because for whatever reason they're targeting a version of JavaScript that doesn't yet support for...of.

As long as your JavaScript implementation 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 Array#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 ...
} );

You can of course use an arrow function if your implementation supports ES6+:

myStringArray.forEach( s => { 
     // ... do something with s ...
} );

Unlike for...of, .forEach only calls the function for elements that are actually present in the array. If passed our hypothetical array with three elements and a length of 248, it will only call the function three times, not 248 times. If this is how you want to handle sparse arrays, .forEach may be the way to go even if your interpreter supports for...of.

The final option, which works in all versions of JavaScript, is an explicit counting loop. You simply count from 0 up to one less than the length and use the counter as an index. The basic loop looks like this:

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

One advantage of this approach is that you can choose how to handle sparse arrays. The above code will run the body of the loop the full length times, with s set to undefined for any missing elements, just like for..of; if you instead want to handle only the actually-present elements of a sparse array, like .forEach, you can add a simple in test on the index:

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 ...
  }
}

Depending on your implementation's optimizations, 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. You may 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 explicit counting loop also means you have access to the index of each value, should you want it. The index is also passed as an extra parameter to the function you pass to forEach, so you can access it that way as well:

myStringArray.forEach( (s,i) => {
   // ... do something with s and i ...
});

for...of doesn't give you the index associated with each object, but as long as the object you're iterating over is actually an instance of Array (and not one of the other iterable types for..of works on), you can use the Array#entries method to change it to an array of [index, item] pairs, and then iterate over that:

for (const [i, s] of myStringArray.entries()) {
  // ... do something with s and 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 is it guaranteed to iterate over those in numeric order. Therefore, the for...in syntax should not be used for looping through Arrays.

Osgood

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. – Synopsize

Answer 3

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.

Sarcasm

That particular example is probably better implemented using Array.forEach. map is for generating a new array. – Vainglorious

@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 :) – Cotopaxi

@ChristianC.Salvadó This question now contains replies saying that ES5 cannot be relied upon and answers that use ES6 arrow notation. Are you even still on the platform? When did we get so old? 🥲 – Pupillary

Answer 4

for (const 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 ECMAScript  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).

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

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

Iterating an array

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

Iterating an array of objects

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

for(const 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 (const n of fibonacci()) {
  console.log(n);
  // Truncate the sequence at 1000
  if (n >= 1000) {
    break;
  }
}

---

Compatibility table: http://kangax.github.io/compat-table/es6/#test-for..of_loops

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

}

Achates

Answer 5

In JavaScript it's not advisable to loop through an Array with a for-in loop, but it's better to use 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.

Duran

Answer 6

6 different methods to loop through the array

You can loop through an array by many different methods. I have sorted my 6 favorite methods from top to bottom.

1. Using JavaScript for loop

When it's to simply loop through an array, the for loop is my first choice.

let array = [1, 2, 3, 4, 5];
for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

2. Using forEach loop

forEach loop is a modern way to loop through the array. Also, it gives more flexibility and control over the array and elements.

let array = [1, 2, 3, 4, 5];
array.forEach((element) => {
  console.log(element);
});

3. Using for...of

for...of loop gives you direct access to the array elements.

let array = [1, 2, 3, 4, 5];
for (let element of array) {
  console.log(element);
}

4. Using for...in loop

for...in gives you a key using which you can access array elements.

let array = [1, 2, 3, 4, 5];
for(let index in array){
  console.log(array[index]);
}

5. Using while loop

while loop is can be used to loop through the array as well.

let array = [1, 2, 3, 4, 5];
let length = array.length;
while(length > 0){
  console.log(array[array.length - length]);
  length--;
}

6. Using do...while loop

Likewise, I use do...while loop

let array = [1, 2, 3, 4, 5];
let length = array.length;
do {
  console.log(array[array.length - length]);
  length--;
}
while (length > 0)

Gowk

Answer 7

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;
})();

Northwester

Answer 8

Introduction

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" for 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:

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

Virtue

Answer 9

Use the while loop...

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

It logs: 'one', 'two', and '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]);
}

It logs: 'three', 'two', and '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]);
}

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

Reference: Google Closure: How not to write JavaScript

Sabba

The first example of the "while" syntax won't work if any of the array elements is falsy. – Canonical

... 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... – Abeyance

Answer 10

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.

Synopsize

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. – Abeyance

falsish? You mean falsey. Let's all stick the proper terminology to avoid confusion ;) – Meteoric

Answer 11

Some use cases of looping through an array in the functional programming way in JavaScript:

1. Just loop through an array

const myArray = [{x:100}, {x:200}, {x:300}];

myArray.forEach((element, index, array) => {
    console.log(element.x); // 100, 200, 300
    console.log(index); // 0, 1, 2
    console.log(array); // same myArray object 3 times
});

Note: Array.prototype.forEach() is not a functional way strictly speaking, as the function it takes as the input parameter is not supposed to return a value, which thus cannot be regarded as a pure function.

2. Check if any of the elements in an array pass a test

const people = [
    {name: 'John', age: 23}, 
    {name: 'Andrew', age: 3}, 
    {name: 'Peter', age: 8}, 
    {name: 'Hanna', age: 14}, 
    {name: 'Adam', age: 37}];

const anyAdult = people.some(person => person.age >= 18);
console.log(anyAdult); // true

3. Transform to a new array

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => element.x);
console.log(newArray); // [100, 200, 300]

Note: The map() method creates a new array with the results of calling a provided function on every element in the calling array.

4. Sum up a particular property, and calculate its average

const myArray = [{x:100}, {x:200}, {x:300}];

const sum = myArray.map(element => element.x).reduce((a, b) => a + b, 0);
console.log(sum); // 600 = 0 + 100 + 200 + 300

const average = sum / myArray.length;
console.log(average); // 200

5. Create a new array based on the original but without modifying it

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => {
    return {
        ...element,
        x: element.x * 2
    };
});

console.log(myArray); // [100, 200, 300]
console.log(newArray); // [200, 400, 600]

6. Count the number of each category

const people = [
    {name: 'John', group: 'A'}, 
    {name: 'Andrew', group: 'C'}, 
    {name: 'Peter', group: 'A'}, 
    {name: 'James', group: 'B'}, 
    {name: 'Hanna', group: 'A'}, 
    {name: 'Adam', group: 'B'}];

const groupInfo = people.reduce((groups, person) => {
    const {A = 0, B = 0, C = 0} = groups;
    if (person.group === 'A') {
        return {...groups, A: A + 1};
    } else if (person.group === 'B') {
        return {...groups, B: B + 1};
    } else {
        return {...groups, C: C + 1};
    }
}, {});

console.log(groupInfo); // {A: 3, C: 1, B: 2}

7. Retrieve a subset of an array based on particular criteria

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray = myArray.filter(element => element.x > 250);
console.log(newArray); // [{x:300}] 

Note: The filter() method creates a new array with all elements that pass the test implemented by the provided function.

8. Sort an array

const people = [
  { name: "John", age: 21 },
  { name: "Peter", age: 31 },
  { name: "Andrew", age: 29 },
  { name: "Thomas", age: 25 }
];

let sortByAge = people.sort(function (p1, p2) {
  return p1.age - p2.age;
});

console.log(sortByAge);

9. Find an element in an array

const people = [ {name: "john", age:23},
                {name: "john", age:43},
                {name: "jim", age:101},
                {name: "bob", age:67} ];

const john = people.find(person => person.name === 'john');
console.log(john);

The Array.prototype.find() method returns the value of the first element in the array that satisfies the provided testing function.

References

• Array.prototype.some()
• Array.prototype.forEach()
• Array.prototype.map()
• Array.prototype.filter()
• Array.prototype.sort()
• Spread syntax
• Array.prototype.find()

Karachi

Answer 12

Yes, you can do the same in JavaScript using a loop, but not limited to that. There are many ways to do a loop over arrays in JavaScript. 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

A for loop is a common way looping through arrays in JavaScript, but it is 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

A while loop is considered as the fastest way to loop through long arrays, but it is usually less used in the JavaScript code:

let i=0;

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

3) Do while
A do while is 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 a few more ways to do that.

Also we use a for in loop for looping over objects in JavaScript.

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

This is a good article if you like to learn more about the asynchronous 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:

Dissimilarity

Answer 13

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.

Influenza

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. – Synopsize

Thanks for the info @Synopsize 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. – Influenza

@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... – Abeyance

@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. – Influenza

@Influenza I believe JavaScript already supports the map function on arrays, no need to introduce an additional lib for that. – Vortex

@Vortex 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. – Abeyance

Answer 14

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...

Purchasable

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. – Osgood

Why use underscore if ECMA-262 has been added the forEach methor. The native code is always better. – Ostracod

Answer 15

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.

Torchwood

Answer 16

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);
}

Nepotism

Answer 17

If anybody is interested in the performance side of the multiple mechanisms available for Array iterations, I've prepared the following JSPerf tests:

https://jsperf.com/fastest-array-iterator

Results:

The traditional for() iterator, is by far the fastest method, especially when used with the array length cached.

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

for(let i=0, size=arr.length; i<size; i++){
    // Do something
}

The Array.prototype.forEach() and the Array.prototype.map() methods are the slowest approximations, probably as a consequence of the function call overhead.

Gilemette

is better use i = i +1 instead of i++ – Boondoggle

Could be improved: Please use: ++i instead of i++, this will avoid an temporary object. So it reduces memory usage and cpu time (no allocation required)! – Burkhard

@Burkhard can you provide a link or reference about that ? I've never aheard about it, sounds interesting... – Gilemette

@Gilemette For such interesting things you should read the hardcore C++ stuff from Herb Sutter and Scott Meyers. The ++i vs i++ thing is from the book: Exceptional C++: 47 Engineering Puzzles, Programming Problems, and Solutions - I thing you could also find it on gotw.ca but can be proved for every programing language. – Burkhard

Answer 18

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

Abeyance

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 – Cotopaxi

The loop condition could be (item=someArray[i]) !== undefined. – Coffey

Answer 19

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.

Eisenstein

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. – Abeyance

Update: These days, you can use Array.forEach to get much of the same effect with native arrays. – Abeyance

Answer 20

Esoteric

let a= ["Hello", "World"];

while(a.length) { console.log( a.shift() ); }

Performance test

Today (2022-11-13) I perform a test on Chrome 107, Safari 15.2 and Firefox 106 on chosen solutions.

Conclusions

• solutions C and D are fast or fastest on all browsers for all arrays.
• solution A and B are slowest on all browsers for all arrays

Results

Details

I perform 3 tests:

• small - for 2 elements array (like OP) - you can run it here
• medium - for 10K elements array and - you can run it here
• big - for 100K elements array - you can run it here

The below snippet presents code used in the test.

function A(a) {
  let r=0;
  while(a.length) r+= a.shift().length;
  return r;
}

function B(a) {
  let r=0;
  for(i in a) r+= a[i].length;
  return r;
}

function C(a) {
  let r=0;
  for(x of a) r+= x.length;
  return r;
}

function D(a) {
  let r=0;
  for (i=0; i<a.length; ++i) r+= a[i].length;
  return r;

}

function E(a) {
  let r=0;
  a.forEach(x=> r+= x.length);
  return r;
}

let arr= ["Hello", "World!"];
[A,B,C,D,E].forEach(f => console.log(`${f.name}: ${f([...arr])}`))

Here are example results for Chrome for a medium array:

Adowa

that's the Haskell-y way to do it; keep taking the first one. clever, but probably slow. – Inhabitant

@Inhabitant actually it is quite fast - here is test – Arrearage

Of course a simple program like this is fast, but how does it scale in comparison to for(...;...;...) or for(... of ...)? – Inhabitant

@Inhabitant don't be lazy! :) you can check it your self- I give you link (test) to tool in above comment. However for small array case (as OP uses) when you need to optimize speed you should choose solution fastest for small arrays (not for big arrays - which can be different) – Arrearage

You have make a good point. I ran your example with an array of 1000 items, and while(a.length) { console.log(a.shift()); } was about twice as fast as the for(var i = 0; i < a.length; i++) { console.log(a[i]); } version. ¯\_(ツ)_/¯ – Inhabitant

@Inhabitant - thank you for your comment - I tink using console.log in tests is not good because it is complex system function and have big impact on run time. I check with r+=a[i].length (sum of words length) for array witch 1000 elements - and still this solution was much faster than other solution (and probaly the speed difference grow when number of elements grow...) - I'm surprised too that this solution is so fast :) – Arrearage

Even if it does not exist in your native language, you should not leave out articles in English (the indefinite article ("a" or "an") and the definite article ("the")). See e.g. English Articles - 3 Simple Rules To Fix Common Grammar Mistakes & Errors and A, AN, THE - Articles in English. – Canberra

This isn't esoteric. Its simply unnecessary and makes an assumption that the a variable will not be used in further code. – Sinotibetan

Careful! The benchmark is wrong, because the array is not reset between each execution. Since the shift() has emptied the array after the first execution, all the subsequent executions are indeed extremely fast :p When you correctly reset the array, it appears that this solution is the second slowest. jsbench.me/4dklq1kjef/1 – Dick

@Dick you are right - I rollback answer to its initial form. When I have more time then I will perform benchamarks again – Arrearage

Answer 21

There are 4 ways of array iteration:

// 1: for

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

// 2: forEach

arr.forEach((v, i) => console.log(v));

// 3: for in

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

// 4: for of

for (const v of arr) {
  console.log(v);
}

Summary: 1 and 3 solutions create extra variable, 2 - create extra function context. The best way is 4th - "for of".

Secularity

do you care to elaborate why 4 "for of" is the best over the others – Aeroscope

It doesn't create needless variables or function context. But if you don't care about small disadvantages you can use any of them, what is more comfortable for you. @Aeroscope Thank you for the question. – Secularity

Answer 22

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 an 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.

Orozco

And how about using for (var i in array) if (++i) ? – Manas

Answer 23

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.

• http://jsben.ch/#/BQhED

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>

Aymara

This loop doesn't seem to follow order of items in the array. – Moisesmoishe

My test was wrong. It's correct, showing all LOOPS now. jsperf.com/native-loop-performance/16 – Aymara

@bergi is right. This loop wipes out the array as it loops through it. Not what you want in most cases. – Abeyance

breaks on falsey items. – Ardeth

Answer 24

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

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

    // Do something
}

If the order of iteration does not matter then you should try reversed loop. It is the fastest as it reduces 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 a while loop:

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

Strickle

Answer 25

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>

Activator

for...in should be avoided for Array-like objects – Lenoralenore

Answer 26

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

 $.each([ 52, 97 ], function( index, value ) {
      alert( index + ": " + value );
 });

Mccallion

Answer 27

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()

Hah

Answer 28

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 it available, it is certainly the safest way to iterate over an array in JavaScript.

Array.prototype.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 its 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.

A working jsFiddle example: https://jsfiddle.net/workingClassHacker/pxpv2dh5/7/

Tyrontyrone

Answer 29

It's not 100% identical, but similar:

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

Amanda

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. – Ot

Answer 30

For example, I used in a Firefox console:

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

You can use querySelectorAll to get same result

document.querySelectorAll('pre').forEach( (e) => { 
   console.log(e.textContent);
})

<pre>text 1</pre>
<pre>text 2</pre>
<pre>text 3</pre>

Penultimate

Answer 31

The formal (and perhaps old) way is Array.prototype.forEach(...):

var arr = ["apple", "banana", "cherry", "mango"];
arr.forEach(function(item, index, _) {
   console.log("[" + index + "] = '" + item + "'");
});

Inhabitant

your "some code" should have had an example in it. It isn't entirely clear if the variables are passed in directly or as "this" or whatever. – Earthward

Answer 32

//Make array
var array = ["1","2","3","4","5","6","7","8","9","10"]
//Loop
for(var i = 0; i < array.length; i++){
 console.log((i+1) + " --> " + array[i])
}

For the ACTUAL number for i, you need to change (i+1) to i or (i), if you want.
Hope this helped.

Unlicensed

Answer 33

var x = [4, 5, 6];
for (i = 0, j = x[i]; i < x.length; j = x[++i]) {
    console.log(i,j);
}

A lot cleaner...

Rhebarhee

That's not very clean compared to z.forEach(j => console.log(j));. – Inhabitant

Answer 34

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.

Hero

Answer 35

var myStringArray = ["hello", "World"];
myStringArray.forEach(function(val, index){
   console.log(val, index);
})

Paleobiology

Answer 36

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
})

Ankylosis

This exact functionality is already part of Mark Reed's answer. – Lias

Answer 37

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

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

Uneven

Answer 38

Just a simple one-line solution:

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

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

Pennington

You'd rather want to use .forEach() and drop the return e; – Implosion

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. – Wenz

Answer 39

There are multiple ways to do it in javascript. Here are the common ways of handling arrays.

Method 1:

const students = ["Arun","Jos","John","Kiran"]
for (var index = 0; index < students.length; index++) {
  console.log(students[index]);
}

Method 2:

students.forEach((student, index) => console.log(student));

Method 3:

for (const student of students) {
      console.log(student);
}
  

Campbell

Answer 40

Well, how about this:

for (var key in myStringArray) {
    console.log(myStringArray[key]);
}

Wager

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 #501004, or even the accepted answer of this question; https://mcmap.net/q/36096/-loop-through-an-array-in-javascript – Cerate

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? – Wager

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. – Cerate

Answer 41

Array traversal cheatsheet in JavaScript

Given an array, you can traverse it one of the many ways as follows.

1. Classic for loop

const myArray = ['Hello', 'World'];

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

2. for...of

const myArray = ['Hello', 'World'];

for (const item of myArray) {
  console.log(item);
}

3. Array.prototype.forEach()

const myArray = ['Hello', 'World'];

myArray.forEach(item => {
  console.log(item);
});

4. while loop

const myArray = ['Hello', 'World'];
let i = 0;

while (i < myArray.length) {
  console.log(myArray[i]);
  i++;
}

5. do...while loop

const myArray = ['Hello', 'World'];
let i = 0;

do {
  console.log(myArray[i]);
  i++;
} while (i < myArray.length);

6. Queue style

const myArray = ['Hello', 'World'];


while (myArray.length) {
  console.log(myArray.shift());
}

7. Stack style

Note: The list is printed reverse in this one.

const myArray = ['Hello', 'World'];

while (myArray.length) {
  console.log(myArray.pop());
}

Torr

"for" and "for in" loops create extra variable, "forEach" - create extra function context. I think the best way is "for of". – Secularity

Answer 42

It is better to use a sequential for loop:

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

Bobsledding

Why is it better? of course, you can do that in java as well, bu he asked about a foreach loop. – Inhabitant

Answer 43

var obj = ["one","two","three"];

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

Micronesia

Answer 44

var array = ['hai', 'hello', 'how', 'are', 'you']
$(document).ready(function () {
  $('#clickButton').click(function () {
    for (var i = 0; i < array.length; i++) {
      alert(array[i])
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<input id="clickButton" value="click Me" type="button"/>
<div id="show"></div>

Gardas

Was it really necessary to bring jQuery or HTML into this? – Karnes

@domdambrogia: It is a meme. – Canberra

Answer 45

Consider this:

const ITEMS = ['One','Two','Three']
let item=-1

//Then, you get looping with every call of:

ITEMS[item=item==ITEMS.length-1?0:item+1]

Ecotone

Answer 46

This answer provides an alternative to loops and array functions to iterate through an array.

In some cases it makes sense to use a recursive implementation over conventional loops and callbacks. Particularly, if you have to work with multiple arrays or nested arrays. You avoid writing nested loops to access data from multiple arrays. I also find this code easier to read and write.

/**
  array is the array your wish to iterate. 
  response is what you want to return.
  index increments each time the function calls itself.
**/

const iterateArray = (array = [], response = [], index = 0) => {
    const data = array[index]

    // If this condition is met. The function returns and stops calling itself.
    if (!data) {
      return response
    }
    // Do work...
    response.push("String 1")
    response.push("String 2")

    // Do more work...

    // THE FUNCTION CALLS ITSELF
    iterateArray(data, response, index+=1)
}

const mainFunction = () => {
    const text = ["qwerty", "poiuyt", "zxcvb"]

    // Call the recursive function
    const finalText = iterateArray(text)
    console.log("Final Text: ", finalText()
}

Say the array being passed to iterateArray contained objects instead of strings. And each object contained another array in it. You would have to run nested loops to access the inner array, but not if you iterate recursively.

You can also make iterateArray a Promise.

const iterateArray = (array = [], response = []) =>
  new Promise(async (resolve, reject) => {
    const data = array.shift()
    // If this condition is met, the function returns and stops calling itself.
    if (!data) {
      return resolve(response)
    }

    // Do work here...

    const apiRequestData = data.innerArray.find((item) => {
      item.id === data.sub_id
    })

    if (apiRequestData) {
      try {
        const axiosResponse = await axios.post(
          "http://example.com",
          apiRequestData
        )
        if (axiosResponse.status === 200) {
          response.push(apiRequestData)
        } else {
          return reject("Data not found")
        }
      } catch (error) {
        reject(error)
      }
    } else {
      return reject("Data not found")
    }
    // THE FUNCTION RESOLVES AND CALLS ITSELF
    resolve(iterateArray(data, response))
  })

Plainsong