DEV Community

Cover image for โšกโšก a short guide to object destructuring in JS โšก
Benjamin Mock
Benjamin Mock

Posted on

โšกโšก a short guide to object destructuring in JS โšก

Want to get better at Web Development ๐Ÿš€๐Ÿš€๐Ÿš€? Subscribe to my weekly newsletter at

Destructuring in JS is used to access object properties in an elegant way.

Let's have a look at a JS object:

const pastry = {
  name: "waffle",
  sweetness: 80,
  ingredients: ["flour", "butter", "eggs"],
  origin: {
    country: "Greece",
    name: "obelios",
    year: 1200,

To access its properties we could use the dot notation:

const name =;
const sweetness = pastry.sweetness;
const country =;

Or with less code, we could use destructuring by specifying the properties, that we want to get.

So instead of

const name =;

we can also use

const { name } = pastry;

which looks for the property name inside of the pastry object. It's basically the same as accessing it via

The cool thing is, that you can access multiple properties at once. Let's use the example from above where we accessed name and sweetness.

const { name, sweetness } = pastry;

destructuring nested objects

Let's have a look at how to destructure e.g. the country from the origin property.

// const country =;
// or

const { origin: { country } } = pastry;
console.log(country); // Greece

You can of course also combine accessing nested and non-nested properties:

const { name, sweetness, origin: { country } } = pastry;

Want to get better at Web Development?
๐Ÿš€๐Ÿš€๐Ÿš€subscribe to the Tutorial Tuesday โœ‰๏ธnewsletter

Top comments (2)

lady_ana_developer profile image

It is funny and interesting at the same time

vishalraj82 profile image
Vishal Raj