Introduced in ES6, the Destructuring Assignment syntax is like a shortcut designed to minimize the amount of codes that are written. In short, it extracts data from both arrays and objects, making them easier to manage.
In this tutorial, I will go over the idea of destructuring objects and arrays.
Destructuring Arrays:
One way of getting an element out from an array is to make that element into a variable and providing it an appropriate index.
For the array below, we want to get the first element
We made john into a variable then gave index[0] to the name variable. We are asking for the very first element to get pulled out.
const john = name[0];
console.log(john); // LOG: john
So that is the way it's usually done but there is a much easier way of doing all that thanks to the destructuring syntax!
Let's say we wanted to grab the first three elements in the array
Instead of doing this,
const john = name[0];
const stephanie = name[1];
const amy = name[2];
We could simply do this,
const [john, stephanie, amy] = name;
You simply take the element that you want to destructure and place it on the right side of the equal sign then place the elements you want to grab on the inside of the array brackets.
Using an array literal, each variable gets mapped to the same element at the same index of the array.
console.log(john); // LOG: john
console.log(stephanie); // LOG: stephanie
console.log(amy); // LOG: amy
Let's say you wanted to skip an element and only grab index[0] and index[3]
const [john, , , amy] = name;
This basically say "skip element two and three!"
Destructuring Objects:
Here we have two objects, contactOne and contactTwo with the properties of name, age, and address. The address property has properties of it's own, city and state.
You place the property you are trying to grab inside the curly braces and where you are grabbing it from on the right side of the equal sign.
const { name, age } = contactOne;
console.log(name); // LOG: Jimmy
console.log(age); // LOG: 41
Destructuring objects uses {curly braces} instead of [brackets].
With Objects you could also use a default value,
for example:
console.log(occupation); // LOG: unknown
All you have to do is create a new property of occupation then set the default value to "unknown." As you can see, by default, the property of occupation is set to "unknown."
On the contrary, you could also add a property of occupation directly inside contactTwo and have the output of each individual contact's personal occupation.
console.log(occupation); // LOG: Software Engineer I
Destructuring may seem like a small deal when handling just a few parameters, but in situations where you may have a large number of parameters to work with, this method has been proven to be quite beneficial.
Top comments (0)