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!

Mohammad Usman · Accepted Answer · 2018-09-30 09:47:03Z

6

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:

answered Sep 30, 2018 at 9:47

Mohammad Usman

39.6k20 gold badges99 silver badges101 bronze badges

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

Comments

Jason Benson · Accepted Answer · 2022-01-06 14:25:18Z

4

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

edited Jan 6, 2022 at 14:25

answered Jan 12, 2011 at 16:43

Jason Benson

3,3981 gold badge23 silver badges21 bronze badges

2 Comments

Jason Benson Over a year ago

@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 Over a year ago

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? :)

Khabir · Accepted Answer · 2021-10-25 07:19:56Z

2

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

answered Oct 25, 2021 at 7:19

Khabir

5,8781 gold badge26 silver badges38 bronze badges

1 Comment

Wick Over a year ago

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

user113716 · Accepted Answer · 2011-01-12 16:45:50Z

1

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

answered Jan 12, 2011 at 16:45

user113716

323k64 gold badges454 silver badges441 bronze badges

Comments

Thai · Accepted Answer · 2011-01-12 16:47:16Z

1

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

answered Jan 12, 2011 at 16:47

Thai

11.5k2 gold badges49 silver badges63 bronze badges

Collectives™ on Stack Overflow

JavaScript: Split array into individual variables

5 Answers 5

Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related