This content originally appeared on DEV Community and was authored by Arika
In the last article I wrote about array destructuring in Javascript. Today, I'll continue on the same topic but I'll discuss objects. Just a little reminder, destructuring allows us to extract array items or object properties, multiple at a time.
Let's look at the syntax below. This is how we used to extract properties from objects before ES6 was introduced. You can quickly see that the larger the object, the more repetitive code we need to write.
const person = {
firstName: "Jane",
lastName: "Doe",
country: "France",
city: "Paris"
};
const first = person.firstName;
console.log(first); // returns Jane
const last = person.lastName;
console.log(last); // returns Doe
Now let's take the same code and destructure it following the ES6 way:
const person = {
firstName: "Jane",
lastName: "Doe",
country: "France",
city: "Paris"
};
const {firstName, lastName} = person;
console.log(firstName); // returns Jane
console.log(lastName); // returns Doe
The code is much shorter, easier to read and maintain. An important note is that the variables and the properties need to have identical names, otherwise this won't work and on printing we'll get undefined.
const person = {
firstName: "Jane",
lastName: "Doe",
country: "France",
city: "Paris"
};
const {first, last, countryName, cityName} = person;
console.log(first); // returns undefined
console.log(countryName); // returns undefined
If we can't avoid giving our variables new names, we can do so by adding a colon after the initial name + the desired name. You can see this in action in the example below.
const person = {
firstName: "Jane",
lastName: "Doe",
country: "France",
city: "Paris"
};
const {firstName: name, lastName: last, country: countryName, city: cityName} = person;
console.log(name); // returns Jane
console.log(countryName); // returns France
We can use the rest operator to store in a new object all the properties we didn't want in individual variables. Like so:
const employee = {
firstName: "John",
lastName: "Wick",
country: "U.S.A",
city: "New York"
};
const {firstName, country, ...theRest} = employee;
console.log(firstName); // returns John
console.log(country); // returns U.S.A
console.log(theRest); // returns {lastName: "Wick", city: "New York"}
Using the same rest operator, we can clone objects. A very useful feature when we want to manipulate an object but we don't want to change any of the original properties. This happens to be my favorite use case for object destructuring, especially when working with React.
const employee = {
firstName: "John",
lastName: "Wick",
country: "U.S.A",
city: "New York"
};
const clonedEmployee = {...employee};
console.log(clonedEmployee); // returns {firstName: "John", lastName: "Wick", country: "U.S.A", city: "New York"}
console.log(clonedEmployee.firstName); // returns John
Image source: Christina Morillo/ @divinetechygirl on Pexels
This content originally appeared on DEV Community and was authored by Arika
Arika | Sciencx (2021-02-15T10:41:20+00:00) Destructuring objects in Javascript. Retrieved from https://www.scien.cx/2021/02/15/destructuring-objects-in-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.