What is so special about ES6 Destructuring

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.

1. Object Destructuring:

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:

1. medium.com