The Startup
Published in

The Startup

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.

- digitalocean.com

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:

-FreeCodeCamp

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:

-FreeCodeCamp

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:

-FreeCodeCamp

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:

-FreeCodeCamp

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:

-FreeCodeCamp

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:

-FreeCodeCamp

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:

-FreeCodeCamp

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:

-FreeCodeCamp

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:

-FreeCodeCamp

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:

-FreeCodeCamp

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:

-FreeCodeCamp

Let’s destructure the object into the function’s parameters like so:

-FreeCodeCamp

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.

--

--

--

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +756K followers.

Recommended from Medium

Aura theme 2.0 is out now 🤩

Why React?

3rd Party Payment Gateway Integration (Ozow) into Ionic/React App using InAppBrowser & SignalR

5 Reasons to Learn Javascript This Year

Javascript Tutorial: Record Audio and Encode it to mp3

Salient points of Queues in 2 mins

LET , VAR AND CONST

Brief Intro Of Redux Thunk andRedux Saga

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hugh Burgess

Hugh Burgess

Step by step, learning to code with FreeCodeCamp

More from Medium

How did I start coding?

Codemonkey : Top Coding Platform For Kids 2022

My advice to new, (young) Developers

No, you should not go to a coding bootcamp.