What is this syntax: {variable1, variable2, variable3}?

Question

I saw the following ES6 code and was confused:

class GuitarAmp {
  constructor ({ cabinet = 'spruce', distortion = '1', volume = '0' } = {}) {
    Object.assign(this, {
      cabinet, distortion, volume
    });
  }
}

What is the second parameter to Object.assign? It's not an object, so what is it? I just noticed it's part of the constructor arguments too, this part:

{ cabinet = 'spruce', distortion = '1', volume = '0' } = {}

I'm unfamiliar with this new syntax so I don't know how to look it up, since I don't know what it's called. Anyone know the term?

[destructuring assignment](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) — pawel, Mar 15 '17 at 08:16
search for "Shorthand property names (ES2015)" in the above link - basically it's equal to `Object.assign(this, { cabinet: cabinet, distortion: distortion, volume: volume });` — Jaromanda X, Mar 15 '17 at 08:17
@Aerovistae It's not three parameters, it's one parameter object that is destructured. — Bergi, Mar 15 '17 at 08:25

Nevin Madhukar K · Accepted Answer · 2017-03-15T08:23:53.510

3

So, in the above code, I believe:

{
  cabinet, distortion, volume
}

is in ES5:

{
   cabinet: cabinet,
   distortion: distortion,
   volume: volume,
}

It's just a short form of writing the object, when the key and value are same.

edited Mar 15 '17 at 08:23

answered Mar 15 '17 at 08:19

Nevin Madhukar K

2,668
2
19
45

Fun fact: this also works for functions. `function myFunction() {}`. `var obj = { myFunction }`. or: `var obj = { myFunction() {} }`. – Jelle den Burger Mar 15 '17 at 08:20
1

May I note for future readers that this syntax only works with previously declared variables, and does not allow literals.`var d = {'a', 'b', 'c'}` will error. Makes sense. It's just a shorthand for grouping some variables into an object. – temporary_user_name Mar 15 '17 at 08:22

score 1 · Answer 2 · answered Mar 15 '17 at 08:23

The default value of first param is {} but if it is provided, we have nested default values in first param object like cabinet = 'spruce', distortion = '1', volume = '0'

Hence, if first object param is provided with e.g. { cabinet = 'test', distortion = '4', volume = '2' } then, this would be as follows

{ 
  cabinet: 'test', 
  distortion: '4', 
  volume: '2' 
}

otherwise, it will have the default values provided in param.

Sverri M. Olsen · Answer 3 · 2017-03-15T08:31:13.610

1

It is an object literal using the shorthand syntax. It is just syntactic sugar.

var a = "A";
var b = "B";
var c = "C";

These two are the same:

{ a: a, b: b, c: c }
{ a, b, c }

In other words, if you throw a variable into the object literal then the property name will become that of the variable name.

edited Mar 15 '17 at 08:31

answered Mar 15 '17 at 08:24

Sverri M. Olsen

12,362
3
32
50

What is this syntax: {variable1, variable2, variable3}?

3 Answers3