Let's start with a sample object:

const ages = {
  robot: 23,
  person: 33,
  dog: 1
}

We can access its properties with a . (dot notation)

const robot = ages.robot;
const person = ages.person;
const dog = ages.dog;

It works in all versions of JS, and you can use that whenever you're not sure if new language features are available. Starting from ES6, we can access the object properties with a little less typing.

const { robot } = ages;
const { person } = ages;
const { dog } = ages;

Hey! All those { and } look like more typing not less!

As you noticed, it's not that useful if you're only destructuring one property at a time. Fortunately, you can join all of those declarations into one expression.

const { robot, person, dog } = ages;

Accessing multiple properties at the same time is when destructuring shines. You have to get used to it but having less code is worth the effort.

I want to dig deeper into destructuring in the next few posts so until next time!

Next lesson

Feedback or Comments?

← Home

Want to learn more?

Sign up to get a digest of my articles and interesting links via email every month.