CODEWITHSUNDEEP
javascriptvariable-assignmentdestructuring
Anders Rune Jensen
Anders Rune Jensen

Reputation: 3796

Destructuring assignment in JavaScript

As can be seen in the Mozilla changlog for JavaScript 1.7 they have added destructuring assignment. Sadly I'm not very fond of the syntax (why write a and b twice?):

var a, b;  
[a, b] = f();

Something like this would have been a lot better:

var [a, b] = f();

That would still be backwards compatible. Python-like destructuring would not be backwards compatible.

Anyway the best solution for JavaScript 1.5 that I have been able to come up with is:

function assign(array, map) {
    var o = Object();
    var i = 0;
    $.each(map, function(e, _) {
        o[e] = array[i++];
    });
    return o;
}

Which works like:

var array = [1,2];
var _ = assign[array, { var1: null, var2: null });
_.var1; // prints 1
_.var2; // prints 2

But this really sucks because _ has no meaning. It's just an empty shell to store the names. But sadly it's needed because JavaScript doesn't have pointers. On the plus side you can assign default values in the case the values are not matched. Also note that this solution doesn't try to slice the array. So you can't do something like {first: 0, rest: 0}. But that could easily be done, if one wanted that behavior.

What is a better solution?

Upvotes: 17

Views: 10971

Answers (4)

Sam
Sam

Reputation: 920

Here's what I did in PHPstorm 10:

File -> Settings -> Languages & Frameworks -> ...

... set JavaScript language version to e.g. JavaScript 1.8.5...

-> click Apply.

Upvotes: 1

Eamonn O'Brien-Strain
Eamonn O'Brien-Strain

Reputation: 3412

In standard JavaScript we get used to all kinds of ugliness, and emulating destructuring assignment using an intermediate variable is not too bad:

function divMod1(a, b) {
    return [ Math.floor(a / b), a % b ];
}

var _ = divMod1(11, 3);
var div = _[0];
var mod = _[1];
alert("(1) div=" + div + ", mod=" + mod );

However I think the following pattern is more idomatic:

function divMod2(a, b, callback) {
    callback(Math.floor(a / b), a % b);
}

divMod2(11, 3, function(div, mod) {
    alert("(2) div=" + div + ", mod=" + mod );
});

Note, that instead of returning the two results as an array, we pass them as arguments to a callback function.

(See code running at http://jsfiddle.net/vVQE3/ )

Upvotes: 0

Shog9
Shog9

Reputation: 159590

First off, var [a, b] = f() works just fine in JavaScript 1.7 - try it!

Second, you can smooth out the usage syntax slightly using with():

var array = [1,2];
with (assign(array, { var1: null, var2: null }))
{
   var1; // == 1
   var2; // == 2
}

Of course, this won't allow you to modify the values of existing variables, so IMHO it's a whole lot less useful than the JavaScript 1.7 feature. In code I'm writing now, I just return objects directly and reference their members - I'll wait for the 1.7 features to become more widely available.

Upvotes: 23

Ateş Göral
Ateş Göral

Reputation: 140032

You don't need the dummy "_" variable. You can directly create "global" variables by using the window object scope:

window["foo"] = "bar";
alert(foo); // Gives "bar"

Here are few more points:

  • I wouldn't name this function "assign" because that's too generic a term.
  • To more closely resemble JS 1.7 syntax, I'd make the function take the destination as the first argument and the source as the second argument.
  • Using an object literal to pass the destination variables is cool but can be confused with JS 1.7 destructuring where the destination is actually an object and not an array. I prefer just using a comma delimited list of variable names as a string.

Here's what I came up with:

function destructure(dest, src) {  
    dest = dest.split(",");  

    for (var i = 0; i < src.length; i++) {  
        window[dest[i]] = src[i];  
    }  
}  

var arr = [42, 66];  

destructure("var1,var2", arr); 

alert(var1); // Gives 42
alert(var2); // Gives 66

Upvotes: 3

Related Questions