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.
RESETRUNFULL
<!DOCTYPE html><html><body><script>

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); // {c: 2, d: [3,4]}console.log(c); // 10console.log(d); // undefinedconsole.log(e); // 4console.log(f); // 5

</script></body><html>

Beware of certain pitfalls when destructuring an assignment.


RESETRUNFULL
<!DOCTYPE html><html><body><script>

// {a,b} = {};  // SyntaxErrorvar {a,b} = {};  // a and b declared but undefined//var {a,b:[c]}={};//TypeError:nested structure undetected//var {a,b:{c}} = {};//TypeError: nested structure undetectedvar {a,b:[c]} = {b:[5]};  // a,b declared but undefined. c===5.//var {a,b:{c=5}} = {}; // TypeError

</script></body><html>

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.


RESETRUNFULL
<!DOCTYPE html><html><body><script>

// rest:
  ... at LHSconst {b, ...o2} = {a:1,b:2,c:3};console.log(o2) // {a:1,c:3}
  ‘b’ removed!// spread: ... at RHSconst o = {b, ...o2}console.log(o)  // {b:2,a:1,c:3}; 'b' returned!

</script></body><html>
Below is a fanciful way to retrieve only the record of Monday details.
RESETRUNFULL
<!DOCTYPE html><html><body><script>

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}]}]}]*/

</script></body><html>

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'.
RESETRUNFULL
<!DOCTYPE html><html><body><script>

function f(){
    return {a:1, b:2};}var a = 3;var {a,b} = f();   // do not omit ‘var’console.log(a,b);    // 1 2

</script></body><html>