How to use destructuring assignment to access object property?

Learn JS: Destructuring Lesson 1.

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 =;

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

Share on Hacker News
Share on LinkedIn

← Home