DEV Community

JavaScript object destructuring tips

Chris Bongers on July 24, 2022

Regarding JavaScript, we get an extremely useful way of extracting properties from objects. Note: Destructuring also works on arrays, but let's f...

Read full post

peerreynders • Jul 24 '22 • Edited

… and destructuring can be used directly in the parameter list

function grade({ score }) {
  if (score >= 90) return 'A';
  if (score >= 80) return 'B';
  if (score >= 70) return 'C';
  if (score >= 60) return 'D';
  return 'F';
}

console.log(
  [
    { name: 'a', score: 91 },
    { name: 'b', score: 80 },
    { name: 'c', score: 79 },
    { name: 'd', score: 60 },
    { name: 'f', score: 59 },
  ].map(grade)
); // ["A", "B", "C", "D", "F"]

Using the rest property to omit properties

const {b, c, ...redacted} = {a: 4, b: 'top', c: 'secret', d: 1};
console.log(redacted); // {a: 4, d: 1}

Sadly Pattern Matching didn't make any progress at the 91st TC39 meeting.

Rob Palmer

@robpalmer2

@JFSIII @TC39 The champion group withdrew the agenda item for this meeting so there are no notes.

12:52 PM - 22 Jul 2022

How is this related?

"Pattern matching is a conditional construct and destructuring isn’t" [ref]

i.e. Pattern matching is destructuring on steroids.

const res = await fetch(jsonService)
match (res) {
  when ({ status: 200, headers: { 'Content-Length': s } }):
    console.log(`size is ${s}`);
  when ({ status: 404 }):
    console.log('JSON not found');
  when ({ status }) if (status >= 400): do {
    throw new RequestError(res);
  }
};

Library-based example

(I always hate how switch is a statement and not an expression always forcing me to do the switch/case/return thing)

artydev • Jul 24 '22

Great thank you

bobgravity1 • Jul 24 '22

this type of destructing is particularly useful for frameworks like Gatsby. It becomes a nightmare pulling data from GraphQL data layers. This stuff changed my skill level big-time. Glad someone covered it so in depth for those who don't know how to use it at this level