Use object destructuring to write cleaner code

3 min readJan 10, 2021

As a developer we always have an aim to write cleaner and more maintainable code. I was working on a project the other day and as most of developers we tend to get data from our backend and render it on our frontend.

To give you more vivid example here is the code. I use vue.js in my projects with ts. However never mind the stack choice in this example, since it is not focus of this article.

import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
    import LogAction from "../../types/LogAction";
    import LogActionEvent from "../../types/LogActionEvent";
    import { FetchLogActionEvents } from '@gql/Notifications/queries.js'
    import gql from "graphql-tag";    import LogActionGroup from "../../types/LogActionGroup";

    @Component({
        apollo: {
          logActionEvents: {
            query: FetchLogActionEvents,
            variables() {
              return {
                count: this.perPage,
                page: this.pagination.currentPage,
              }
            },
            update: data =>  {
              console.log("data", data)
              return data.fetchAllLogActionEvents
            },
            }
    }),

Let’ s see what we have

So in order to extract data I have to assign to

let data = data.fetchAllLogActionEvents.data

What if we have more complicated object structure, extraction with dot notation can get really messy soon. Unless we can utilize object destructuring. Let’s start with simple examples. Let’s test with a simpler object

const pizza = {
  name: "Margarite", 
  price: 90
  currency: "SEK"
}

// extracing name, price, currency with dot notation
let name = pizza.name
let price = pizza.priza
let currency = pizza.currency

// With destructuring you can extract one or more properties.
const { name } = pizza

// or multiple properties
const { price, currency } = pizza

console.log("name", name) => "Margarite"
console.log("price", price) => 90
console.log("currency", currency) => "SEK"

This statement defines the variables and assigns to them the values of properties. To put simple we extract properties from pizza object. So far so good, but what about nested objects?

const pizza = {
  name: 'Americana', 
  price: 100, 
  currency: 'USD',
  cookedBy: {
    name: 'Joe',
    lastName: 'Saza',
    country: {
      name: 'Italy',
      continent: 'Europe'
    }
  }
}

So far we learned how to access first layer of object. The same concept can be used for nested objects. Let’s say I want to extract continent property of country object.

// dot notation
const continent = pizza.cookedBy.country.continent

// object desctructuring
const { cookedBy: { country: { continent }}} = pizza

//  => "Europe"
console.log(continent)


// Extraction of other properties
const { name, cookedBy: { lastName, country: { continent }}} = pizza

// => Joe
console.log("name", name)

// this will throw error since we assigning lastname to cookedBy object 
// we are not extracting cookedBy object
console.log("cookedBy object", cookedBy) 

// to extract cookedBy specifically we need to mention it separately
const { name, cookedBy,  cookedBy: { lastName, country: { continent }}} = pizza
 
// => Joe
console.log("name", name)

// => { name: "Joe", lastName: "Saza", country: {…}}
console.log("cookedBy object", cookedBy)

// => Saza
console.log("last name", lastName)

// => Europe
console.log("continent", continent)

I hope it will benefit you.

Use object destructuring to write cleaner code

Written by Farkhod Kholbutayev