92
var a,b,c;
var arr = [1,2,3];
[a,b,c] = arr;

this code works perfectly in Firefox resulting a=1, b=2 and c=3,
but it doesn't work in Chrome. Is it a Chrome bug or
it is not valid javascript code? (I failed to find it in javascript references)

How can I modify this code to make it suitable for Chrome, with minimum damage to it?
(I don't really like to write a = arr[0]; b = arr[1]... or the same with arr.shift() all the time)

P.S. this is just an example code, in real code
I get the arr array from somewhere outside my code

tsds
  • 7,406
  • 7
  • 57
  • 79
  • 1
    What happens in Chrome? What error messages do you get? – Pekka Aug 08 '11 at 13:46
  • it gives me the following: ReferenceError arguments: Array[0] message: "—" stack: "—" type: "invalid_lhs_in_assignment" __proto__: Error – tsds Aug 08 '11 at 13:47
  • 1
    FWIW, http://www.jslint.com/ says it's fine (after fixing some whitespace; though I don't know what it would evaluate to), but http://jshint.com/ says it's a bad assignment. – JAAulde Aug 08 '11 at 13:47
  • Interesting! This is some weird construct, I'm surprised it works on most browsers. Curious to know it this is even valid JS (apparently valid but could be due to engine's implementation). – Mrchief Aug 08 '11 at 13:52
  • 1
    As to your actual question about what code you could use in Chrome, here's a previous discussion of that: http://stackoverflow.com/questions/204444/destructuring-assignment-in-javascript. – jfriend00 Aug 08 '11 at 14:09
  • You could use a javascript compiler such as babel – Rolf Mar 10 '18 at 00:06

2 Answers2

109

This is a new feature of JavaScript 1.7 called Destructuring assignment:

Destructuring assignment makes it possible to extract data from arrays or objects using a syntax that mirrors the construction of array and object literals.

The object and array literal expressions provide an easy way to create ad-hoc packages of data. Once you've created these packages of data, you can use them any way you want to. You can even return them from functions.

One particularly useful thing you can do with destructuring assignment is to read an entire structure in a single statement, although there are a number of interesting things you can do with them, as shown in the section full of examples that follows.

You can use destructuring assignment, for example, to swap values:

var a = 1;
var b = 3;
[a, b] = [b, a];

This capability is similar to features present in languages such as Perl and Python.

Unfortunately, according to this table of versions, JavaScript 1.7 has not been implemented in Chrome. But it should be there in:

  • FireFox 2.0+
  • IE 9
  • Opera 11.50.

Try it for yourself in this jsfiddle: http://jsfiddle.net/uBReg/

I tested this on Chrome (failed), IE 8 (failed), and FireFox 5 (which worked, per the wiki table).

Justin Ethier
  • 122,367
  • 49
  • 219
  • 273
  • Destructuring is (likely) [coming as an official language feature](http://wiki.ecmascript.org/doku.php?id=harmony:destructuring) in the next version of ECMAScript, so Google Chrome will certainly get there assuming the proposal sticks. – user113716 Aug 08 '11 at 13:55
  • 1
    That would be great; there are some exciting features in JavaScript 1.7+ ... its unfortunate that they cannot be used for "real-world" applications at the moment due to these browser incompatibilities. – Justin Ethier Aug 08 '11 at 13:57
  • ok. Do you think there is more compact and clear way to do the same than a = arr.shift()? – tsds Aug 08 '11 at 13:57
  • 1
    Probably not. It will be slightly more efficient to say `a = arr[0]; b = arr[1];` as opposed to `a = arr.shift();` because `shift` alters the array. But either is fine - I would just pick the style you prefer. – Justin Ethier Aug 08 '11 at 14:11
  • 1
    The table of Javascript versions suggests that this works on IE9, but, for me, it throws an Error: 'Invalid Left-Hand Assignment.' – Ben Jacobs Jan 15 '13 at 17:02
  • Does not work under Microsoft Edge. – jacouh Sep 01 '16 at 14:09
  • @jacouh - Apparently it is supported in preview builds of Edge, and is not supported in IE 11. See: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/destructuringes6/ – Justin Ethier Sep 01 '16 at 14:13
  • Declation and assignment at once: `let [a, b] = [1, 2];` – ceving Feb 15 '19 at 13:26
10

It is possible only for Javascript 1.7 as already answered by @Justin. Here is a trial to simulate it in the widespread browsers:

function assign(arr, vars) {
    var x = {};
    var num = Math.min(arr.length, vars.length);
    for (var i = 0; i < num; ++i) {
        x[vars[i]] = arr[i];
    }
    return x;
}
var arr = [1, 2, 3];
var x = assign(arr, ['a', 'b', 'c']);
var z = x.a + x.b + x.c;  // z == 6

I don't know how useful it is.

Jiri Kriz
  • 8,866
  • 3
  • 26
  • 35