This guy

for (var i = 0; i < l; ++i) {
    // ...
}

...and his friends

while (l--) {
    // ...
}

// ...

Enumerating arrays/lists

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

Extracting stuff from lists

var names = [];

for (var i = 0, l = tweeps.length; i < l; ++i) {
    names.push(tweeps[i].name);
}

Aggregating list contents

var html = "";

for (var i = 0, l = items.length; i < l; i++) {
    html += "<li>" + items[i] + "</li>";
}

this.list.innerHTML = html;

What's wrong with loops?

"For each item ..."

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

Array.prototype.forEach

arr.forEach(function (item) {
    console.log(item);
});

Also: jQuery

$(arr).each(function (i, item) {
    console.log(item);
});

jQuery plugins

$.fn.hipsterify = function (optionsGallore) {
    this.each(function () {
        if ($(this).is(":visible")) {
            $(this).css("font-family", "Helvetica");
        }
    });
};

What's the big deal?

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

arr.forEach(function (item) {
    console.log(item);
});

Mapping items

var names = [];

for (var i = 0, l = tweeps.length; i < l; ++i) {
    names.push(tweeps[i].name);
}

Array.prototype.map

var names = tweeps.map(function (tweep) {
    return tweep.name;
});

One-liner!

var names = tweeps.map(function (t) { return t.name; });

Mentioned on Twitter

var str = "Mentioned by ";

for (var i = 0, l = tweeps.length; i < l; ++i) {
    str += tweeps[i].name;
    if (i < tweeps.length - 1) { str += ", "; }
}

Putting map to use

var str = "Mentioned by " + tweeps.map(function (t) {
    return t.name;
}).join(", ");

Can we do better?

Extract a property

function prop(name) {
    return function (object) {
        return object[name];
    };
}

Mentions

var str = "Mentioned by " + tweeps.map(prop("name")).join(", ");

Chunked length

var totalChunkedLength = 0;

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

Use the function, Luke

var totalChunkedLength = buffers.
    map(function (chunk) { return chunk.length; }).
    reduce(function (prev, curr) { return prev + curr; });

Abstractions

function sum(a, b) {
    return a + b;
}

Chunked length

var totalChunkedLength = buffers.
    map(function (chunk) { return chunk.length; }).
    reduce(sum);

Chunked length

var totalChunkedLength = buffers.
    map(prop("length")).
    reduce(sum);

One-liner!

var totalChunkedLength = buffers.map(prop("length")).reduce(sum);

Ajax

function ajax(url, callback) {
    jQuery.ajax({ url: url, success: callback });
}

Multi-ajax

var scripts = ["/jquery.js", "/underscore.js", "/backbone.js"];

async.map(scripts, ajax, function (err, scripts) {
    console.log(scripts.join(";");
});

Let's talk performance

forEach Y U SO SLOW!?!!

forEach + reduce Y U SO SLOW!??!

Oh, right