MENU


Object Destructuring Assignment

There is now a compact way of assigning values in an object to multiple variables in {} at the LHS. At the LHS, if a colon : exists immediately after the variable, the variable itself won't be assigned a value (unless it is assigned somewhere else), as it is not the target of an assignment. For example, below, when f is being assigned, d won't be assigned.

Here:<br>a is skipped.<br>b matches the inner object literal.<br>c can't be matched, and thus assumes the default value.<br>d can't be matched and a default value doesn't exist for it. It is declared but undefined.<br>e is matched to the deep array element.f can't be matched, and hence it takes on the default value.
var o = {a: 1, b: {c: 2, d: [3, 4]}};
var a, {b, c = 10, b: {d: [, e, f = 5]}, d} = o;

console.log(b);
console.log(c);
console.log(d);
console.log(e);
console.log(f);

{c: 2, d: [3,4]} 10 undefined 4 5

Beware of certain pitfalls when destructuring an assignment.


// {a, b} = {}; // SyntaxError

var {a, b} = {}; // a and b declared but undefined

// var {a, b: [c]} = {}; // TypeError: nested structure undetected

// var {a, b: {c}} = {}; // TypeError: nested structure undetected

var {a, b: [c]} = {b: [5]}; // a,b declared but undefined. c===5.

// var {a, b: {c = 5}} = {}; // TypeError

The rest operator ... can be used to assign 'the rest of the properties' to a variable. Note that the operator is also applicable to an iterable and function parameters.


// rest: ... at LHS
const {b, ...o2} = {a: 1, b: 2, c: 3};
console.log(o2); // ‘b’ removed!

// spread: ... at RHS
const o = {b, ...o2};
console.log(o); // 'b' returned!

{a:1,c:3} {b:2,a:1,c:3}
Below is a fanciful way to retrieve only the record of Monday details.
const array = [{
  name: 'Alex',
  age: 10,
  details: [
    {
      day: 'Monday',
      asst: 'Leo',
      subDetails: [
        { color: 'green', qty: 85 },
        { color: 'orange', qty: 35 }
      ]
    },
    {
      day: 'Tuesday',
      asst: 'Shaun',
      subDetails: [
        { color: 'brown', qty: 15 },
        { color: 'indigo', qty: 35 }
      ]
    },
    {
      day: 'Wednesday',
      asst: 'Julian',
      subDetails: [
        { color: 'pink', qty: 25 },
        { color: 'blue', qty: 15 }
      ]
    },
    {
      day: 'Thursday',
      asst: 'Luis',
      subDetails: [
        { color: 'peach', qty: 5 },
        { color: 'black', qty: 15 }
      ]
    }
  ]
}];

var a = array.map(item => ({
  ...item,
  details: [item.details.find(detailsItem => detailsItem.day === "Monday")]
}));

console.log(JSON.stringify(a));

[{"name":"Alex","age":10,"details":[{"day":"Monday","asst":"Leo","subDetails":[{"color":"green","qty":85},{"color":"orange","qty":35}]}]}]

We can conveniently return multiple values from a function with a destructuring assignment:

For this to work, the variables a and b must not have been predeclared with 'let' or 'const'.
function f() {
  return {a: 1, b: 2};
}

var a = 3;
var {a, b} = f(); // do not omit ‘var’

console.log(a, b);

1 2