JavaScript: Split array into individual variables

Question

Considering this data structure:

var vehicles = [
 [ "2011","Honda","Accord" ],
 [ "2010","Honda","Accord" ],
 .....
];

Looping through each vehicles item, is there a way to reassign the array elements to individual variables all in one shot, something like:

for (i = 0; i < vehicles.length; i++) {
 var(year,make,model) = vehicles[i]; // doesn't work
 .....
}

... I'm trying to get away from doing:

for (i = 0; i < vehicles.length; i++) {
 var year = vehicles[i][0];
 var make = vehicles[i][1];
 var model = vehicles[i][2];
 .....
}

Just curious since this type of thing is available in other programming languages. Thanks!

Answer 1

Now it is possible using ES6's Array Destructuring.

As from Docs:

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

Consider the following example:

let [a, b, c] = [10, 20, 30];
console.log(a); // output => 10
console.log(b); // output => 20
console.log(c); // output => 30

As with your data, .forEach() method can also be used for iterating over array elements along with Array Destructuring:

let vehicles = [
 [ "2011","Honda","Accord" ],
 [ "2010","Honda","Accord" ]
];
vehicles.forEach(([year, make, model], index) => {
 // ... your code here ...
 console.log(`${year}, ${make}, ${model}, ${index}`);
});

References:

• Array Destructuring
• Array.prototype.forEach()
• Arrow Functions
• Template Literals

Answer 2

No unfortunately there is not a method to do this currently XBrowser. (that I'm aware of).

Relatively soon it's possible cross browser, see link:

https://developer.mozilla.org/en/New_in_JavaScript_1.7

(In PHP there is "list" which will do exactly what you wish, nothing similar XBrowser for javascript yet)

Of course relatively soon could mean anything etc. (Thanks Felix for pointing out my errors in this)

---

edit: This is now available see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring

• Jason Benson: @Felix, good point. My meaning was this is not supported (that I'm aware of) cross browser (modern IE through modern webkit). Will edit to make that clearer, thanks.
• Wick: Thanks. That'll be nice. In Perl you can just do the straight assignment: my($first,$second,$third,...) = @array; .. maybe one of the few simple things about Perl? :)

Answer 3

Unpacking array into separate variables in JavaScript

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects,into distinct variables.

 let array = [2,3]; 
 [a,b] = array;// unpacking array into var a and b
 console.log(a); //output 2
 console.log(b); //output 3
 let obj = {name:"someone",weight:"500pounds"};
 let {name,weight} = obj; // unpacking obj into var name and weight
 console.log(name);// output someone
 console.log(weight);//output 500pounds

Source

• Wick: This is identical to the accepted answer from 2018, but thanks -- and I appreciate the bonus example of unpacking an object!

Answer 4

Probably the closest you'll currently get in javascript is to eliminate the redundant var and separate the statements with a comma separator.

for (i = 0; i < vehicles.length; i++) {
 var year = vehicles[i][0], make = vehicles[i][1], model = vehicles[i][2];
 .....
}

or you could shorten it a bit more like this:

for (i = 0; i < vehicles.length; i++) {
 var v = vehicles[i], year = v[0], make = v[1], model = v[2];
 .....
}

Answer 5

The closest alternative that I could think of is using a function and using apply() to call it. Passing an array, it would get passed as each argument.

function vehicle(year, make, model) {
 // do stuff
}
for (i = 0; i < vehicles.length; i++) {
 vehicle.apply (this, vehicles[i]);
}

Or an anonymous function:

for (i = 0; i < vehicles.length; i++) {
 (function(year, make, model) {
 // do stuff
 }).apply(this, vehicles[i]);
}