This content originally appeared on DEV Community and was authored by DEV Community
Destructuring is a blessing to JavaScript and TypeScript developers.
Destructuring works for both Object & Arrays.
Object Destructuring
Consider the below object:
const myObject = {
userFirstName: 'Rahul',
userLastName: 'Raj',
}
How will you fetch the firstName and lastName in separate variables.
const userFirstName= this.myObject.userFirstName;
const userLastName= this.myObject.userLastName;
console.log(userFirstName) // Rahul
console.log(userLastName) // Raj
OR
You can use the destructuring.
const {userFirstName, userLastName} = this.myObject;
console.log(userFirstName) // Rahul
console.log(userLastName) // Raj
This simple 1 liner will get you your values in the keyName variable.
You don't like the lengthy variable name 🤔
Change it to your desired names by giving an alias name.
const {userFirstName: fN, userLastName: lN} = this.myObject;
console.log(fN); // Rahul
console.log(userFirstName); // Will through error
So you have learnt almost everything about object destructuring.
Array Destructuring
Array destructuring is similar to Object destructuring but it is used when we know the number of elements or need the initial element to work with.
const userDetails:string = "Rahul,dev.to,rahulrajrd";
const [name, website, username, noItemCheck] = userDetails.split(",");
console.log(name); // Rahul
console.log(website); // dev.to
console.log(username); // rahulrajrd
console.log(noItemCheck) // undefined
🟥 Important Note.
If the returned value is less than the assigned value as shown above the value will be undefined.
If you like the post follow me for more
This content originally appeared on DEV Community and was authored by DEV Community
DEV Community | Sciencx (2022-03-11T15:15:49+00:00) Power of destructuring. Retrieved from https://www.scien.cx/2022/03/11/power-of-destructuring/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.