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.