New Website

I've made a new website, as lynx.io is dead. You can find it here: http://macr.ae/—it's similar in format to lynx.io, but has better articles, and they're all written by me.

JavaScript disabled

While it will still mostly work, a lot of this site's functionality relies on JavaScript - please enable it for the best experience.

Array Looping in JavaScript

In JavaScript 1.6, two new array methods were introduced for looping through arrays. They are the .map and .forEach functions, and this article will explain what they do and how they work.

As they were only added fairly recently, certain browsers - such as Internet Explorer 8 and earlier - don't support this feature. For this reason, I'll also be discussing how you can add the function or work around them.

Array.forEach

The .forEach method of an array is fairly similar to foreach loops in other languages, but with a slighty different syntax. Take the following code:

var numbers = ['one', 'two', 'three'], number;
for (var i = 0; i < numbers.length; i++) {
    number = numbers[i];

    // Do stuff here
}

Using the .forEach method, you can write it like this:

var numbers = ['one', 'two', 'three'];
numbers.forEach(function (number, i) {
    // Do stuff here
});

It looks nicer, and executes the code in a new scope due to the anonymous function (which may or may not be an advantage; for me, it is usually an advantage).

This method also accepts a second argument which allows you to specify the scope that the function should be called with:

var numbers = ['one', 'two', 'three'];
numbers.forEach(function (number, i) {
    console.log(this === numbers); // true
}, numbers);

I'm not entirely sure what the point in this argument is, as it can be achieved using Function.bind:

var numbers = ['one', 'two', 'three'];
numbers.forEach((function (number, i) {
    console.log(this === numbers); // true
}).bind(numbers));

They both have the same effect, but the second is slightly more clear.

 Polyfilling Array.forEach

jQuery has a function which can be used instead of .forEach, and works in browsers that don't support .forEach natively. It is fairly self-documenting; the only thing to note is that the index and the value itself are the other way round to with .forEach itself.

var numbers = ['one', 'two', 'three'];
$.each(numbers, function (i, number) {
    // Do stuff here
});

You can also add it yourself using the following code:

if (!Array.prototype.forEach) {
    Array.prototype.forEach = function (cb, scope) {
        for (var i = 0; i < this.length; i++) {
            cb.call(scope, this[i], i, this);
        }
    };
}

It doesn't matter if scope is undefined, as .call will replace it with the default value (in this case, the window variable).

Array.map

The .map method of an array is similar to .forEach, but more fun; it returns an array of returned values:

var numbers = [1, 2, 4];
var newNumbers = numbers.map(function (number, i) {
    return number * 2;
});

console.log(newNumbers); // [2, 4, 8]

That can be pretty useful! The original array is left intact.

Again, the .map method accepts a second parameter to specify the scope.

Polyfilling Array.map

jQuery also has a function for this, .map. Again, it is self-documenting:

var numbers = [1, 2, 4];
var newNumbers = $.map(numbers, function (number, i) {
    return number * 2;
});

console.log(newNumbers); // [2, 4, 8]

You can also add it yourself using the following code:

if (!Array.prototype.map) {
    Array.prototype.map = function (cb, scope) {
        var i, returnArray = [];

        for (i = 0; i < this.length; i++) {
            returnArray.push(cb.call(scope, this[i], i, this));
        }

        return returnArray;
    };
}

About Callum Macrae:

Callum Macrae is the founder of lynx.io and a JavaScript developer from the United Kingdom. He is currently writing his first book, to be published by O'Reilly Media.

You can view more articles by this author here.

Tags: javascript arrays looping

Comments

No comments; leave one below.

says:

Add comment

 

You can use markdown in comments (press "m" for a cheatsheet).

Enable JavaScript to post a comment

Markdown Cheat Sheet

# This is an <h1> tag
## This an <h2> tag
###### This is an <h6> tag

Inline markup: _this text is italic_, **this is bold**, and `code()`.

[Link text](link URL "Optional title")
[Google](http://google.com/ "Google!")

![Alt text](image URL)

![This is a fish](images/fish.jpg)

1. Ordered list item 1
2. Ordered list item 2

* Unordered list item 1
* Unordered list item 2
* Item 2a
* Item 2b

And some code:

// Code is indented by one tab
echo 'Hello world!';

Horizontal rules are done using four or more hyphens:

----

> This is a blockquote

This is an <h1> tag

This an <h2> tag

This is an <h6> tag

Inline markup: this text is italic, this is bold, and code().

Link text Google

This is a fish

  1. Ordered list item 1
  2. Ordered list item 2
  • Unordered list item 1
  • Unordered list item 2
    • Item 2a
    • Item 2b

And some code:

// Code is indented by one tab
echo 'Hello world!';

Horizontal rules are done using four or more hyphens:


This is a blockquote

Toggle MarkDown / HTML (t), full reference or close this