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!

Solution 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

Solution 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

Solution 3

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]);
}

Solution 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];
  .....
}

Solution 5

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

View more solutions