Our Global Presence
Canada
57 Sherway St,
Stoney Creek, ON
L8J 0J3
India
606, Suvas Scala,
S P Ring Road, Nikol,
Ahmedabad 380049
USA
1131 Baycrest Drive,
Wesley Chapel,
FL 33544
In this blog, we will see a very popular concept in ES6 known as destructuring. It’s one of the most widely used feature in ES6. In this article, we will see how we can apply it in our code and take advantage of this new syntax to write code that is easy to understand and to make the code shorter.
So Let’s get started.
Consider, we have following object.
const post = { image: 'http://unknown-site.com/image.jpg', likes: 200, comments: 400, date: '2019–12–20' };
If we want to get all the values from the object, Using ES5 Code we can write it as
const image = post.image; const likes = post.likes; const comments = post.comments; const date = post.date;
This is too much code and there is the repetition of each property in each line.
So we can write the same code using ES6 Object destructuring in a single line.
const { image, likes, comments, date } = post;
The code above creates local variables with the same name as the properties of the post object.
So it means, For ex. creating a local variable with the name image and take the value from post.image.
One thing to note is that the name used inside curly brackets has to match with the property name
So we cannot do something like this
const { new_image } = post;
This will result in an error because there is no new_image property to destructure in the post object.
It’s not necessary, to destructure all the properties from post object. We can only take the properties which we need
const { image } = post; // The above line is same as const image = post.image
We can also assign default values to the destructured properties.
Suppose, if we don’t have an image for the post as
const post = { likes: 200, comments: 400, date: '2019–12–20' };
We can use default parameter syntax to set default image using assignment operator as
const post = { likes: 200, comments: 400, date: '2019–12–20' }; const { image = 'http://unknown-site.com/defaultimage.jpg', likes, comments, date } = post; console.log(image); // http://unknown-site.com/defaultimage.jpg console.log(likes); // 200 console.log(comments); // 400 console.log(date); // 2019–12–20
Obviously, if we have the image property in the post object, that will be used instead of the default value like
const post = { image: 'http://unknown-site.com/image.jpg', likes: 200, comments: 400, date: '2019–12–20' }; const { image = ‘http://unknown-site.com/defaultimage.jpg', likes, comments, date } = post; console.log(image); // http://unknown-site.com/image.jpg console.log(likes); // 200 console.log(comments); // 400 console.log(date); // 2019–12–20
There are situations when we already have another variable with the same name in the current scope as the destructured property so it will create conflict and will result in an error. To fix this, we can use the renaming syntax of object destructuring as below
const { date: post_date } = post; console.log(post_date); // 2019–12–20
Here we are taking the date property and instead of creating local date variable we are renaming it to post_date so if you try to print the date variable value, you will get an error because it does not exist as we have renamed it to post_date now.
const { date: post_date } = post; console.log(post_date); // 2019-12-20 console.log(date); // error: date is not defined
We can also combine the default value and renaming syntax together like
const post = { likes: 200, comments: 400 }; const { date: post_date = '2019-12-10'} = post; console.log(post_date); // 2019-12-10
In the above code, in the highlighted code we are saying, take the date property from post object and rename it to post_date. If the date property does not exist then assign a default value of 2019–12–10 to post_date variable.
Suppose, we have a registerUser function which accepts a user object as a parameter.
function registerUser(user) { // David 20 New York david@11gmail.com console.log(user.name, user.age, user.location, user.email); } const user = { age: 20, name: 'David', location: 'New York', email: 'david@11gmail.com' }; registerUser(user);
We can use destructuring syntax here to simplify the code.
function registerUser({ name, age, location, email}) { // David 20 New York david@11gmail.com console.log(name, age, location, email); } const user = { age: 20, name: 'David', location: 'New York', email: 'david@11gmail.com' }; registerUser(user);
As you can see the function is simplified a lot. We no longer need to refer to the user object every time to get the value again in the function. Also the order in which its destructured does not matter and so is the case with which property to destructure.
function registerUser({ location, age }) { console.log(location, age); // New York 20 } const user = { age: 20, name: 'David', location: 'New York', email: 'david@11gmail.com' }; registerUser(user);
In the above code, we are accessing location before age in the function declaration which is fine because while destructuring the property name is used to destructure and not the position of the property.
Now consider, while registering, the name is optional field so we can set it to default value.
function registerUser({ name = 'Unknown', age, location }) { console.log(name, age, location); // Unknown 20 New York } const user = { age: 20, location: 'New York', email: 'david@11gmail.com' }; registerUser(user);
Now consider, user has already registered with email and we are updating his profile so everything is optional now so we can simplify it as
function updateUser({ name = 'Unknown', age = 0, location = 'Unknown' }) { console.log(name, age, location); // Unknown 0 Unknown } updateUser({});
For better readability, we have added each object property on separate line which is a valid syntax and you can also do it, if there are multiple properties on single line just for readability purpose.
But this does not look good, because we need to pass empty object to the updateUser function every time.
We can fix this by setting the default object if we don’t pass it.
function updateUser({ name = 'Unknown', age = 0, location = 'Unknown' } = {} ) { console.log(name, age, location); // Unknown 0 Unknown } updateUser();
Wow, that’s so cool. Now we can pass only values which are provided by user and others will be set to default values as shown below
function updateUser({ name = 'Unknown', age = 0, location = 'Unknown' } = {} ) { console.log(name, age, location); } updateUser({ name: 'David' }); // David 0 Unknown updateUser({ age: 20 }); // Unknown 20 Unknown updateUser(); // Unknown 0 Unknown
Now, you can understand the power of destructuring.
In our next blog, we will cover another ES6 destructuring feature called “Array Destructuring”.
For more Information and to build a website using React JS, Hire React Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“. To develop your custom website using React JS, please visit our technology page.
Content Source:
57 Sherway St,
Stoney Creek, ON
L8J 0J3
606, Suvas Scala,
S P Ring Road, Nikol,
Ahmedabad 380049
1131 Baycrest Drive,
Wesley Chapel,
FL 33544
57 Sherway St,
Stoney Creek, ON
L8J 0J3
606, Suvas Scala,
S P Ring Road, Nikol,
Ahmedabad 380049
1131 Baycrest Drive,
Wesley Chapel,
FL 33544
© 2024 — HK Infosoft. All Rights Reserved.
© 2024 — HK Infosoft. All Rights Reserved.
T&C | Privacy Policy | Sitemap