ES.next needs You!

The next JavaScript specification is moving towards completion. TC39, the technical committee charged with creating ES.next (also known as ES Harmony, and sometimes ES 6) has already tentatively approved a number of proposals and there are a bunch more straw men awaiting approval. TC39 includes some of the finest minds in JavaScript (not least, Brendan Eich himself) but as Jeremy Ashkenas famously cautioned “JavaScript is too important to be left to the experts”. They need our help.

Continue reading

JavaScript Fat City

It’s official! We’re getting a new function syntax! The TC39 group (the panel charged with delivering ES 6) has reached consensus on an abbreviated syntax for JavaScript function expressions. Its popularly known as the fat arrow syntax, and is based on a similar construct found in CoffeeScript.

Make no mistake, I’m delighted that we will finally have an alternative to the unnecessary clunkiness and verbosity of the present grammar, but I can’t shake a nagging feeling that this proposal (in its current form) is flawed to the extent that it might actually make new developers more confused than they already were. I’ll run through the key features of this new construct, then explain my concerns and how they might be mitigated.

Continue reading

Extending JavaScript Natives

Most built-in JavaScript types are constructors whose prototypes contain the methods and other properties that define their default behavior:

//(results will vary by browser)

Object.getOwnPropertyNames(Function.prototype)
//["bind", "arguments", "toString", "length", "call", "name", "apply", "caller", "constructor"]

You can’t delete or replace a native prototype, but you can edit the values of its properties, or create new ones:

//create a new array method that removes a member
Array.prototype.remove = function(member) {
  var index = this.indexOf(member);
  if (index > -1) {
    this.splice(index, 1);
  }
  return this;
}

['poppy', 'sesame', 'plain'].remove('poppy'); //["sesame", "plain"]
['ant', 'bee', 'fly'].remove('spider'); //["ant", "bee", "fly"]

Et voila! Our code gets a useful array extension for free. However if you brag about doing this in production code, expect to get pummeled by a wave of fierce disapproval. Some of it carries weight. Let’s sift the danger from the dogma and try to reach an honest conclusion:

Continue reading

Fixing the JavaScript typeof operator

Working with JavaScript’s typeof operator is a bit like operating a clapped-out old car (or an early model Dell Inspiron). It gets the job done (mostly) and you learn to work around the quirks – but you probably aspire to something better.

In this article I’ll give a brief overview of typeof before introducing a tiny new function which is a fully-loaded, more reliable alternative that works directly with the language internals.
Continue reading

Waldo: Search the JavaScript Object Model in under 1 KB

Here’s a tiny util that you can save as a bookmarklet and use to crawl the JavaScript object model of any web site. Waldo (thanks to @shinypb for the name!) lets you find and inspect instances by name, type or value, and it can be easily customized to add additional tests. It runs in the console on Chrome, Firefox, Safari and IE>8. It's sourced on github. Feel free to fork it if you want to add more search methods or a spiffy UI.

(Update: Check out this alternate version by @jdalton)


Continue reading

A fresh look at JavaScript Mixins

(Russian, Japanese)

In this article I’ll explore JavaScript mixins in detail, and introduce a less conventional, but to my mind more natural mixin strategy that I hope you’ll find useful. I’ll finish up with a profiler matrix summarizing the performance impact of each technique. [A big Thank You to the brilliant @kitcambridge for reviewing and improving the code on which this blog is based!]
Continue reading

JavaScript Strict Mode

The fifth edition of the ECMAScript specification introduced Strict Mode. Strict Mode imposes a layer of constraint on JavaScript – intended to protect you from the more perilous aspects of the language.

While researching this article I wrote 38 tests covering all the Strict Mode rules as defined in the ES5 specification. You can see how your favorite browser shapes up by clicking here.

The code for each test is reproduced at the end of the article as an aid to understanding the specification. You can also run the tests manually by copying and pasting the source into the console. The full source code is on my github repo.

Firefox 4 and IE10 (preview 1) already fully support Strict Mode, and Chrome 12 is nearly there. Strict Mode is here to stay – let’s dive in…
Continue reading