Checkout my CSS Grid By Example and Getting Started With React video courses on Skillshare. Sign up now and get one free month of Skillshare.

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 šŸŽ‰`);
}
Home Screencasts Best of Newsletter Search X