Author: Angus Croll

Namespacing in JavaScript

Global variables should be reserved for objects that have system-wide relevance and they should be named to avoid ambiguity and minimize the risk of naming collisions. In practice this means you should avoid creating global objects unless they are absolutely necessary.

But, hey, you already knew all that…..

So what do you do about it? Conventional wisdom tells us that the best global abatement strategy is to create a small number of global objects which will serve as de facto namespaces for underlying modules and subsystems. I’m going to explore several approaches to namespacing, culminating in an elegant, safe and flexible solution that I based on a recent article by James Edwards.

Continue reading “Namespacing in JavaScript”


(extractos en español)

There’s been an interesting discussion over at about JSONP and how to make it safer. This is a good thing, not least because it forced me to take a deeper look and come up with a (sort of) counter-proposal of my own.

We’ll start with an overview of JSON basics, including the EcmaScript 5 JSON API, and then discuss cross-domain JSON retrieval via JSONP. Finally I’ll introduce a simple and relatively safe JSONP framework and show how to use it to fetch tweets from the Twitter database.

Continue reading “JSON and JSONP”

Extending Objects with JavaScript Getters

Most browsers are coalescing around a consistent API for defining JavaScript Getters and Setters. I’m not entirely comfortable with custom getters and setters – JavaScript’s clean syntax is now a little murkier, and we have a new pitfall to avoid when iterating and cloning object properties, not to mention a significant risk of involuntary recursion – but still I’ll admit they have their uses.
Continue reading “Extending Objects with JavaScript Getters”

JavaScript’s Dream Team: in praise of split and join

JavaScript is blessed with two remarkably powerful yet under-appreciated methods: split and join act as perfect counterparts. Their symmetry allows JavaScript’s array and string types to enjoy a unique coupling: arrays can easily be serialized to strings and back again, a feature we can leverage to good effect. In a moment we’ll explore some interesting applications – but first some introductions:

Continue reading “JavaScript’s Dream Team: in praise of split and join”

Understanding JavaScript Closures

In JavaScript, a closure is a function to which the variables of the surrounding context are bound by reference.

function getMeAClosure() {
    var canYouSeeMe = "here I am";
    return (function theClosure() {
        return {canYouSeeIt: canYouSeeMe ? "yes!": "no"}; 

var closure = getMeAClosure();
closure().canYouSeeIt; //"yes!"

Every JavaScript function forms a closure on creation. In a moment I’ll explain why and walk through the process by which closures are created. Then I’ll address some common misconceptions and finish with some practical applications. But first a brief word from our sponsors: JavaScript closures are brought to you by lexical scope and the VariableEnvironment

Continue reading “Understanding JavaScript Closures”

Rethinking JavaScript for-loops

(versión abreviada en español)

If you think the introduction of Array.prototype.forEach and friends will send the for-loop the way of the dodo, think again. There’s life in the old dog yet.

The for-loop is often seen as something of a one trick pony, most suited to the classic form of list iteration:

for (var i=0; i<arr.length; i++) {
    //do something to each member

but with the wealth of higher order functions now available both natively and in frameworks we can just do this (or variants thereof)

arr.forEach(function(each)) {
    //do something to each

Ironically as high-order functions gradually render the traditional pattern obsolete, so might we become liberated from our old habits and branch out to explore more interesting patterns of for-looping.

To whet your appetite – here’s an ultra-compact way to generate and alert the first n members of the Fibonacci series:

for (
    var i=2, r=[0,1];
    i<15 || alert(r);
    r.push(r[i-1] + r[i-2]), i++
//alerts "0,1,1,2,3,5,8,13,21,34,55,89,144,233,377"

Continue reading “Rethinking JavaScript for-loops”