Array Destructuring | Spread Operator | Rest Operator | Javascript

destructure

JavaScript provides two cool feature that helps you to write a clean and efficient code.  These features are handy while writing complex code using Array and Object but handling them is messy sometimes.

In this blog, I am going to show you how to use Array Destructuring in JavaScript. we also learn about Spread and Rest operators used in JavaScript.

So, What is Destructuring? 

Destructuring in JavaScript is a simplified technique of extracting multiple properties from an array via taking the whole array and deconstructing it down into its very own constituent components thru assignments through the usage of a syntax that looks similar to array literals.

why this concept is necessary?

Array Destructuring

Let’s remember the old fashion to retrieve elements in the array

array destructuring

From the above example, we can see that when we want to extract data from an array, we do the same thing again and again.

Destructuring assignment in JavaScript makes it simple to extract this data. Let See how cam we use Destructuring.

Lets us use the above example

array destructuring

Variables can also define before assignments like this

array destructuring

Look at the above codes, variables are set from left to right. So the first element in the array is assigned to the first variable and the second element in the array is assigned to the second variable and so on…

What if we want some selected indexes from an array and ignore the rest, We can skip the elements from an array, how? Look at the below code.

array destructuring

Look at the above code, if we want the first, third, and last elements from the array then we put an extra comma in between variables. The comma separator is used to skip values in an array. So if you want to skip an item in an array, just use a comma.

Now think about a big array, you want to assign some of its elements to some variable, and the rest elements store in another array. Here comes the concept of Rest and Spread operator

What are Rest operator and Spread operator?

In JavaScript ES6, there are some cool features. ...(3 dot) is one of these new Javascript functionalities. It can be used in two different ways; as a spread operator OR as a rest parameter.

Rest operator collects all remaining elements into an array. The Rest variable must always be the last otherwise a SyntaxError is thrown.

Spread operator allows iterables( arrays / objects / strings ) to be expanded into single elements.

Let’s understand by example.

rest operator

Look at the above code, the first two elements from an array are assigned to a variable (a & b), and rest elements store in the array (c).  Using this operator, you can unpack and assign the remaining part of an array to a variable.

If the (…) operator appears on the right-hand in destructuring then it is a SPREAD SYNTAX.It takes all the other elements in the array which have no variable mapped to them and then maps it to the rest variable.

rest operator

When you can have more  variables on the left-hand side, it assigns the single elements in the array equal to the variables

spread operator

Destructuring can also used for swapping variables

array destructuring

So That’s all about Array Destructuring in javaScript. Learn and practice to clear the concept. If you want to visit more such content the click Tech Category.

Happy Coding!!

 

Reference :

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Leave a comment

Your email address will not be published.


*