Tips for JavaScript object destructuring

DanielNovember 8, 2022February 20, 2024

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

For example, we can use the Js array destructuring with renaming to make cleaner function calls.

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 🎉`);
}