You have no excuses now, use this free credit to launch your projects now on Digital Ocean.
Table of contents
Destructuring with default values in Javascript
Destructuring with default values in Javascript
In the previous post I briefly discussed the topic of destructuring with nested objects in javascript . In this post I am going to talk a bit about how we can specify default values when destructuring an object in javascript.
To do this we will create a fairly simple object:
const user = {
userIsLoggedIn: true,
email: "[email protected]",
accountType: "premium"
}
This object could be the response to an API request. From the previous object we could destructure three properties, userIsLoggedIn, email and accountType.
const { userIsLoggedIn, email, accountType } = user
But, what would happen if there is a change in the API and now it no longer returns the accountType property, this would be enough for all the part of the frontend that depends on the presence of that variable to have errors.
if(accountType==='Admin'){
showAdvancedMenu()
}
if(accountType==='basic'){
showBasicMenu()
}
Well, to avoid this we can assign a default value when the destructuring does not find the property that we want to destructure. If you are following this example remember to clean the javascript terminal and re-declare the main object or you will get an error.
Don't settle with Javascript, learn Typescript too
AdIf your Javascript skills are good enough to write some medium complexity applications, you should probably have noticed some of its weaknesses, Typescript was created to solve them, and there are platforms out there, like educative, which can teach you all you need to know about Typescript for a few bucks.
Assigning a default value when destructuring an object in Javascript
This time let’s declare the user object without the accountType property:
const user = {
userIsLoggedIn: true,
email: "[email protected]"
}
Well, if we try to destructure the object and assign a default value if the appropriate property is not found we will do it in the following way:
const { userIsLoggedIn, email, accountType="basic" } = user
accountType
"basic"
The accountType constant returns ‘basic’, a property that the original object lacked, but will now have a default value if omitted. This allows us to keep the frontend without major changes to a modified HTTP response and to handle the absence of some property in an object.
I know that sometimes this topic can be quite difficult, I also had a hard time understanding it the first time, the destructuring makes the already confusing Javascript code much more readable. If you still find Javascript confusing I leave you a post where I talk about what I consider the best book to learn Javascript at intermediate level.
