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
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
Variables can also define before assignments like this
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.
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.
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.
When you can have more variables on the left-hand side, it assigns the single elements in the array equal to the variables
Destructuring can also used for swapping variables
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