Eapen's Faves{This is not a blog}. It just contains some interesting items from around the web.

The Four Cs of JavaScript

03 Feb 2010 | By Alex Young |

 

This article is a short trip around some of JavaScript’s more useful features and patterns. Or just my favourite ones that begin with C.

Closure

Closures are your primary tool for controlling, abusing and exploiting scope in JavaScript. In JavaScript, inner functions get access to variables in the functions that contain them.

function say_hello() {
  var name = 'Alex';
  function say_hello() {
    return 'Hello ' + name;
  }
  return say_hello();
}

In the previous example, name is visible in the function say_hello.

You can use closures to hide variables as well:

person = function() {
  var name = 'Alex';
  return { say_hello: function() { return 'Hello ' + name; } };
}();
person.say_hello(); # "Hello Alex"
person.name;        # undefined

Because closures allow you to capture context, they can provide clever ways of delaying execution whilst retaining the context in which they were defined — callbacks are a common example.

Callbacks

JavaScript’s functions are objects. You can safely pass them around in variables. Libraries like jQuery and Prototype rely on this for event handling and Ajax requests. You can’t make a network request and block until it has completed because this will lock up the UI, so instead you set up an Ajax request with a list of callback functions to be executed later.

The way callbacks and closures work in JavaScript is so simple a lot of developers use them all the time without even realising.

Cascade

Cascading method calls look like this:

new Turtle('Player 1').
  move(x, y).
  stroke('#ff0000').
  fill('#0000ff').
  draw();

This is possible because each function returns this, allowing several operations to be performed on the fictional Turtle.

Many libraries use this approach to make manipulating objects more succinct.

Curry

Curry is what I should be eating instead of writing this article. It’s also a slightly trickier devil than the other Cs, but it’s interesting and builds on them.

Currying means changing a function that takes multiple arguments so it can be called as a chain of functions with single arguments. This can be achieved in JavaScript by using a closure.

The Prototype framework has curry and it looks like this:

String.prototype.splitOnSpaces = String.prototype.split.curry(" ");
"foo bar baz thud".splitOnSpaces(); // ["foo", "bar", "baz", "thud"]

Don’t worry if currying seems slightly abstract — come back to the previous example the next time you think you might be able to use it.