July 28th, 2006

Destructuring Assignment with Javascript 1.7

7 comments on 618 words

Firefox 2.0 (In beta now) will give us the ability to use Destructuring Assignment. It’s basically the ability for a function to return multiple values while allowing us the capture those values in multiple variables. Do huh?!?

If only it were Ruby

In Ruby, this is pretty sweet:


@closed_tickets, @open_tickets = @tickets.partition &:closed?

Here, closed? is called on all the tickets. If a ticket is closed, it’s put in one batch, and if it’s open, it’s put in another batch. The magic here is that the variable @closed_tickets will only contain those tickets which are closed, and @open_tickets will contain the open tickets.

It turns out Prototype has it’s own partition method. The difference being that we can’t destructure the assignment as we can in Ruby, or we can’t assign the return of partition to multiple variables. We get back an array that contains two more arrays. Take a look at this example:


function isClosed(item) {
  return item == 'closed';
}

var items = "open closed open open closed".split(' ');
var closedOpen = items.partition(isClosed);
console.log(closedOpen);

// We get
//  [["closed","closed"] ["open","open","open"]]
//Note: The word closed seems to be reserved
var close = closedOpen[0];
var opened = closedOpen[1];

Now to get open items, we have to use the correct index. Nasty, but all we really have to work with in the real world for now.

Not quite Ruby, but not quite Javascript 1.6

In the future, we’ll be able to mimic a little bit of the Rubyness of partition because we’ll be able to destructure the assignment. Lets look at what we can do now in Firefox 2.0 Beta (I’ve heard this works in Opera 8+).


var [close, opened] = items.partition(isClosed);
console.log(close, opened);

//We get:
["closed","closed"] ["open","open","open"]

So in this example, partition returned two values which we’re assigned to the correct variables. It’s also good to note that if a function returned 3 values, etc, that you can skip the values you don’t want. So this works:


var [person1, , person3] = ['Justin', 'WillyWonka', 'Rick'];
console.log(person1, person3); // Justin, Rick

Relevant links

Discussion

  1. Andrew Dupont Andrew Dupont said on July 28th
    Combine destructuring assignment with JS 1.7’s new iterators and you get cool stuff like… 
    
var nodes = document.getElementsByTagName('p');
for (let [key, value] in Iterator(nodes)) {
  console.log(key, value);
}
/* produces...
=> 0, [object HTMLParagraphElement]
=> 1, [object HTMLParagraphElement]
=> 2, [object HTMLParagraphElement]
*/

    In other words, for..in will be not only be safe to use — it’ll be cool to use. Too bad we won’t be able to use it until like two years from now (or whenever IE decides to implement JS2).

  2. Daniel Schierbeck Daniel Schierbeck said on July 29th

    If only we could replace JavaScript with Ruby…

  3. Chris Neale Chris Neale said on July 29th

    Isn’t that “not quite Ruby” and “not quite Javascript 1.6” ?

  4. Justin Palmer Justin Palmer said on July 29th

    Whoops! Thanks for the correction.

  5. Banderon Banderon said on July 29th

    PHP has the equivalent function: “list”. It’s definitely very handy.

  6. Banderon Banderon said on July 29th

    PHP has the equivalent function “list”. It’s definitely very handy.

  7. Doug Doug said on August 1st

    The syntax in Perl:

    ($var1, $var2) = function($arg);

Sorry, comments are closed for this article.