Tips for JavaScript object destructuring

Most likely, by now, you have used the basic Javascript destructuring:

const user = {
    name: "Liam Matteo",
    age: 38
}

/* without destructuring */
const name = user.name
const age = user.age

/* with destructuring */
const {name, house} = character

But there are more things that Javascript destructuring can do for us besides the basic properties extraction. Let's see some of them.

Destructuring with a different name:

const user = {
    name: 'Liam Matteo', 
    address: {
        country: 'Switzerland',
        city: 'Zurich'
    }
}

/* with renamed destructuring */
const { address: shippingAddress } = user
// shippingAddress = { country: 'Switzerland', city: 'Zurich'}

/* without renamed destructuring */
const shippingAddress = user.address

Nested object destructuring:

const user = {
    name: 'Liam Matteo', 
    address: {
        country: 'Switzerland',
        city: 'Zurich'
    }
}

/* with nested destructuring */
const { address: { country } } = user
// country = 'Switzerland' 

/* without nested destructuring */
const country = user.address.country

Default values for Javascript destructuring:

const user = {
    name: 'Liam Matteo'
}

/* with default values */
const { age = 38 } = user
// age = 38

/* without default values */
const { age } = user
// age = undefined

Destructuring function arguments:

let user = {
    name: 'Liam Matteo',
    age: 38
};

/* with destructuring function arguments */
let showDetails = ({name, age}) = > {
  console.log(name); // Liam Matteo
  console.log(age); // 38
};

/* without destructuring function arguments */
let showDetails = (user) = > {
  console.log(user.name); // Liam Matteo
  console.log(user.age); // 38
};

Dynamic keys for object destructuring:

let usersList = {
  Noah: 'Software Engineer',
  Liam: 'Senior Software Engineer',
  Rob: 'Team Lead'
}

/* with dynamic keys */
const destructKey = 'Liam'
let { [destructKey] : role } = usersList
console.log(role) // Senior Software Engineer

/* without dynamic keys */
const destructKey = 'Liam'
let role = usersList[destructKey]

Destructure inside a loop:

const users = [
  { name: 'Liam', age: 38},
  { name: 'Rob', age: 41},
]

/* with loop destructuring */
for (let { name, age } of users) {
  console.log(`User: ${name} is ${age} years old 🎉`);
}
// 'User: Liam is 38 years old 
// 'User: Rob is 41 years old

/* without loop destructuring */
for (let u of users) {
    const {name, age} = u
    console.log(`User: ${name} is ${age} years old 🎉`);
}

📖 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.

📖 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.


Leave a Reply

Your email address will not be published. Required fields are marked *

Home Screencasts Best of Newsletter Search X

📖 50 Javascript, React and NextJs Projects

Hi friend! Before you go, just wanted to let you know about the 50 Javascript, React and NextJs Projects FREE ebook.

One of the best ways to learn is by doing the work. Choose from 8 project categories and get started right away:

  • Business & Real-World
  • Games & Puzzles
  • Fun & Interesting
  • Tools & Libraries
  • Personal & Portfolio
  • Project Add-Ons
  • Productivity
  • Clones

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects complete with project briefs and wireframes!

Keep building and level up! Get all projects as an ebook right to your inbox!

X