JavaScript Destructuring

January 13th, 2021

Hello everyone, in this post I'll try to explain what JavaScript destructuring is and how can you use it. If you are a JavaScript developer you are probably using it every day and you should be pretty familiar with it, I designed this post as a short introduction for the beginners.

I'll explain destructuring in 2 parts; Arrays and Objects, but before we start if you want to use the same setup and the tools I use you can go ahead and download the repo here, or you can follow along with me below to at least initialize the "nodemon" for hot reloading, of course it's optional.

The code for the post is here.

Optional NPM Package

We'll use Node time for this post, so if you like to follow along you need to have it on your local. You can download it here.

If you want to have hot reloading feature in you project like I used along the tutorial you can go ahead and install the code from github and simply run the command "npm install" in the root directory, or if you want to do that manually by hand on the root directory you should run the commands below in order:

npm init -y

npm install -D nodemon

After that you can go ahead and create a new script in your package.json file:

You can now start your node runtime with hot reloading by running the command:

npm run dev

ARRAYS

I'll put old and new syntax of creating a variable the elements of an array in one image then I'll explain it line by line.

• First we create our array with the elements 1, 2 and 3.

• As you can see above with the old syntax we should assign each variable in its own line to be able to extract each value from the array. The output afterwards should be like this one.

• Now we create a new array with more elements, when we apply the new approach it will create three constant variables with the 0th 1st and 2nd indexes of the array. So our output when we print them should look like this.

• We also can pass an index and take the ones we don't want to process with other techniques. For example after our print statement, we are destructuring our array again but this time we pass the 0th index take the 2nd one and put all others in a single variable with spread operator. Now our output should look like this one below.

OBJECTS

As I did with the arrays I'll first put all the work here and then we'll walk through in it together. For the object we used same object for both old and new syntax, maybe that's better for showing the results are basically same.

• We have three properties with string values, now when we reach them old syntax we should do that line by line as its shown above. But with the new syntax we can simply do it in one line. The output is expected to be like the one below for both of them.

• We can also use destructuring for the nested object as you can see above. When we print the inner property we should expect to see the output with just "inner" text.

• I also added a popular use case with the functions to the end, especially for the ReactJs developers maybe. It's not anything different than what we did above basically, we are just destructing the properties of the variable that is passed to the function and then we are printing them. Expected output is given below.

So that's it everyone, that one was quite basic and I just wanted to explain the destructuring briefly in a way that everyone can understand.

Until next time, take care of yourselves :)