Object Destructuring Shorthand: New in Firefox 3 Beta 3

One of the changes in Firefox 3 Beta 3, which has just been released, brings the object destructuring shorthand to JavaScript 1.8. Why would you need object destructuring in the first place? Commonly when you need to pull certain values out of an object structure, as demonstrated here. The introduced shorthand sprinkles a bit more of syntactic sugar into object destructuring assignments. Read on for concrete examples.

When writing code, I personally and frequently have times when I need to pull out the individual values of the offsets or dimensions of DOM elements. Consider the following jQuery code, taken from here and slightly modified:

var offset = $("p:last").offset();
var left = offset.left, top = offset.top;

I need to do advanced and complex calculations and whatnot on the offsets (or dimensions of the element), so to make sure I don't keep repeating things like offset.left over and over, I introduce the two sole values of offset into my current scope. This is essentially the opposite of containing variables in namespaces (objects); you're pulling them back out instead. JavaScript 1.7 made this a one-liner by providing object destructuring assignment:

var {left: left, top: top} = $('p:last').offset();

With this, left becomes $('p:last').offset().left with the same applying to top. Add in the syntactic sugar introduced in Beta 3, and you have an even more concise code:

var {left, top} = $('p:last').offset();

So life becomes one step easier for Firefox extension developers to the very least. So don't try this on IE, yet. Maybe IE 8, but definitely not 7. Let alone 6.