17

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?

Improve this question
0

4 Answers 4

Reset to default
23

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

As of today var [a,b] = [1,2]; results in a syntax error in Chrome.
@Marcin: JavaScript 1.7 is a Mozilla-only language.
Note that with can be dangerous, as Mozilla's own documentation states "Using with is not recommended, and is forbidden in ECMAScript 5 strict mode. The recommended alternative is to assign the object whose properties you want to access to a temporary variable."
Will be available in ECMAScript 6 around mid 2015, see en.wikipedia.org/wiki/ECMAScript
with is also disallowed in strict mode, which is a really useful mode to engage...
|
3

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
Improve this answer

2 Comments

The only thing I agree with is that destructure might be a better name. * source, destination is unix style. * populating global scope is not nice. It doesn't lead to composability. * Writing the output variables as a string is tiring and harder for your editor to check. Like writing SQL.
@AndersRuneJensen Since this mimics an assignment, the destination should almost certainly be on the left—that way it sort of looks like [var1, var2] = arr. And destructure is an awful, non-intention-revealing name. I think assign is better—after all, this is supposed to be a generic utility function. If not, then maybe massAssign?
1

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.

Improve this answer

Comments

0

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/ )

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.