Learning to Code: Day 56 — JavaScript: ES6 Part 3
--
Hello everyone! Hope you all had a lovely weekend, and feeling rested and ready to join me learning more of ES6 with FreeCodeCamp, let’s jump back in and take a look into the Destructuring Assignment..
—
Extracting Values from Objects with the Destructuring Assignment
Destructuring assignment is a syntax that allows you to assign object properties or array items as variables. This can greatly reduce the lines of code necessary to manipulate data in these structures. There are two types of destructuring: Object destructuring and Array destructuring.
We all remember how to get to the value of an object by parsing through the Dot Notation right? We would have to go through a path of variable.object.key to see the value as the result, which looks a bit like this on line 2 and 3:
Here, we have an object called user and two keys (name and age) of that object, defined with values as John Doe and 34, respectively.
Well, ES6 introduced a cleaner way to present the data with a simple line of code, OCDers rejoice! Taking values directly assigned to the object with the same original assignment as above using destructuring syntax looks like this:
So rather than typing out multiple lines to define separate values, we define all the variables assigned to the object in one clean line of code.
Using Destructuring to Assign Variables from Objects
We can take a variable and rename it within the curly brackets {} of the syntax using the example above, and overwrite it to our new variable names:
This is to say that we go through user.name and rename that corresponding value of “John Doe” to userName and so on without the need for extra lines of code to do this.
Assign Variables in Nested Objects
If we want to assign a name to a variable, like above, but this variable is nested within an object itself, like below:
Here we have the top-level object called user and its nested object called johnDoe with two properties (2 keys that are age and email, and two values called 34 and ‘johnDoe@freecodecamp.com’).
So first, let’s look at how to extract the values from the nested object properties and assign them to variables of the same name, as we tried in the first chapter today:
Note: Here we simply add curly brackets within the outer curly brackets, which act as the nested object inside the top-level object.
Renaming the value variables in the nested object is then a simple oldName : newName using destructuring in the above example, seen here:
In this one line of code, we have extracted the nested object values from a top-level object previously declared as user, and assigned them new variable names. Simple.
Assigning Variables from Arrays
So we’ve looked at Objects, now what about Arrays? The thinking is the same and the code just as simple.
One key difference between the spread operator and array destructuring is that the spread operator (“…”) unpacks the array into a comma separated list. As a result, we cannot pick and choose which elements we want to assign to variables. However destructuring does this. Consider this example:
a is assigned to the first index (1), b to the second index (2), and so on. If we imagine these values as larger value names, this could be very time consuming, however with destructuring we can quickly parse through the index, with a comma for each index to land exactly where we want in the array:
Note: See the commas between b and c which specifies “comma, jump two times (3 and 4)” to get the index element c (5).
If we wanted to take the values of two variables and swap them, we could do it simply like so with Array Destructuring:
Using Destructuring with the Rest Parameter to Reassign Array Elements
In some cases, we want to gather the ‘rest’ of the array and not the beginning of its index. This is similar to Array.prototype.slice(). Let’s take a look at some code and break it down:
On line 1, we declare the array variable source. This array contains 10 elements. Then on line 2 we declare a function called removeFirstTwo() with it’s argument called list.
Here in the statement of the function, we see our rest parameter in action with destructuring on line 4 where a = index element 1, and b = index element 2, then the rest parameter which gathers the ‘rest’ of the elements (3–10) and calls them arr. This is assigned to the function argument list and then returns the element arr on line 6 which ends the statement of the function, and next we give arr the same value as calling the function with source as it’s argument on line 8. Then we simply console.log(arr) on line 9 to reveal it’s result in the console.
Using Destructuring to Pass an Object as a Function’s Parameters
Remember when we wrote arrow functions, we took a variable and function with parameters and simplified it down:
const profileUpdate = function(profileData) { (multiple object variables here) }
We can destructure an object in a function argument itself. In this case the above is further shown with variables and uses an arrow function also:
Let’s destructure the object into the function’s parameters like so:
Note: The new positioning of the object variables given in the curly brackets “{}”, inside the function’s parameters “()”. This new structure of code says the same as the previous example with less coding needed.
When profileData is then passed into the function called profileUpdate, it’s values are destructured from the parameters of profileUpdate for use within the function.
—
Aaaand let’s leave it there for today. That covers all things Destructuring! Catch you next time.
