Just before showing the example, we will see how to do destructuring in basic examples
Destructuring Objects
// for simple object
const obj = {
name: 'Param',
city: 'Tallinn',
age: 20,
company: 'Learn with Param OU',
};
const { name, age, ...rest } = obj;
console.log(name); // Param
console.log(age); // 20
console.log(rest); // { city: 'Tallinn', company: 'Learn with Param OU', }
Destructuring Arrays
const personArr = [
{
name: 'Param',
},
{
name: 'Ahmed',
},
{
name: 'Jesus',
},
];
const [first, ...restOfArr] = personArr;
console.log(first); // { name: 'Param' }
console.log(restOfArr); // [{ name: 'Ahmed' }, { name: 'Jesus' }]
Destructuring not defined variable
What will happen if we destructure an undefined key in the object. Example,
const firstObj = {
name: 'Param',
city: 'Tallinn',
age: 20,
company: 'Learn with Param OU',
};
const { firstName, city } = firstObj;
console.log(firstName); // undefined
console.log(city); // Tallinn
Default value while destructuring
Now we can pass in default value while destructuring, it will take the default if it is undefined. Example,
const secondObj = {
firstName: 'Param',
country: 'Estonia',
};
const { lastName = 'Harrison', country } = secondObj;
console.log(lastName); // Harrison
console.log(country); // Estonia
Here in this example, even though lastName is not defined in object, it takes the default value we assigned while destructuring.
This will be very useful when you want to have default values set in your application even if there is no value in the object.
Edge case while setting default value in destructuring
This has an edge case though, destructuring will work well with default value if the value is undefined. It won’t work for other non true values, for example null, 0, ‘false’.
Let see it in example,
const edgeCase = {
why: undefined,
what: null,
how: 0,
where: false,
};
const {
why = 'why',
what = 'what',
where = 'where',
how = 'how',
notFound = 'Not Found',
} = edgeCase;
console.log(why); // why
console.log(what); // null
console.log(how); // 0
console.log(where); // false
console.log(notFound); // Not Found
Hope you enjoyed and learnt some tricks about destructuring in javascript 😎
Checkout the whole example here,
Top comments (0)