Skip to main content Accessibility Feedback

Looping through arrays the ES6 way

The traditional way of looping through arrays in vanilla JavaScript is with a for loop:

var sandwiches = [
    'tuna',
    'ham',
    'turkey',
    'pb&j'
];

for (var i = 0; i < sandwiches.length; i++) {
    console.log(i); // index
    console.log(sandwiches[i]); // value
}

// returns 0, tuna, 1, ham, 2, turkey, 3, pb&j
  • In the first part of the loop, before the first semicolon, we set a counter variable (typically i, but it can be anything) to 0.
  • The second part, between the two semicolons, is the test we check against after each iteration of the loop. In this case, we want to make sure the counter value is less than the total number of items in our array. We do this by checking the .length of our array.
  • Finally, after the second semicolon, we specify what to run after each loop. In this case, we’re adding 1 to the value of i with i++.

We can then use i to grab the current item in the loop from our array.

It works, but it’s kind of a pain to work with. If you you use loops often, I generally recommended using something like Todd Motto’s forEach.js helper method.

ES6 offers a simple, native solution #

Just like jQuery, we now have a native forEach() method.

var sandwiches = [
    'tuna',
    'ham',
    'turkey',
    'pb&j'
];

sandwiches.forEach(function (sandwich, index) {
    console.log(index); // index
    console.log(sandwich); // value
});

This works back to IE9, and if you need further backwards compatibility, there’s also a polyfill available. I’ve started using polyfill.io on my projects to handle this automatically for me, and it’s awesome.

Tomorrow, we’ll look at how to loop through NodeLists.


🚀 I just relaunched my Vanilla JS Pocket Guides with new code examples and real projects to help tie everything you’ll learn together. Check it out.

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips