Understanding Object Destructuring, Rest Parameters and Spread Syntax in JavaScript (EN)
After the release of ES2016 (aka ES6), many new features for working with arrays and objects became available to developers. We use objects to store multiple values in JavaScript.
So in this article I will explain destructuring, rest parameters and spread syntax. My goal is to define these properties in depth so that we can work with arrays and objects much faster and easier.
Many other languages have no syntax corresponding to destructuring, rest parameters, and spread, so these features can have a different learning cycle for both developers new to JavaScript and developers from another language. In this article, you will learn how to destructure objects and arrays, use the spread operator to open objects and arrays, and use rest parameters in function calls.
Rest Parameters
The rest parameter is params in C# and varArgs in Java. I wanted to specify the expressions corresponding to rest in different languages so that we can immediately associate them in our minds.
With rest parameters, we can collect an unspecified amount of arguments in an array and process them accordingly. Rather than splitting an array or object into individual values, the remaining syntax will create an array with an indefinite number of arguments. So we will have a brand new array and it will be read.
It is displayed as …values. Rest parameters must be in the last argument. This is because it collects all of the remaining or redundant arguments in an array.
If your data has an array in an array, you should use it as follows to get the correct output.
Spread Parameters
It is the opposite of spread, rest. It allows us to parse existing objects or arrays.
In this example, the max function asks us for a rest type. If we print the points as in the example, we write the values to the screen by parsing them from the array, but we cannot expect it to print the maximum number.
If we want to print the maximum value, we have to put the spread points into the max parameter.
…”ABC” => Since we write with the … operator in front of it, we can obtain your data separated one by one thanks to Spread. It will output us A B C as we want.
Destructuring Parameters
It provides the assignment to other variables by extracting the values of the object or array we have.
There is no array parameter in JavaScript, but if we specify the parameter with square brackets, it will detect it as destructuring. (With Ecmascript 6, we can work with variables in array and object format in variable definition)
Now we will write an example of an array and we will dectructure this array.
Array Destructuring
- Here, we have reached the data we want by destructuring the array named populations.
- There is a critical part in this example, which is the state of the array inside the array. In this scenario, small corresponds to 10000 to medium to 20000, and large to 30000 and veryHeight to the [veryhight, max] array specified there, so the variable max becomes undefined because there is no more data. So how do we prevent this situation?
3. Exactly as shown in the 3rd example, we will also break it down by performing a new destructuring operation.
Object Destructuring
Suppose we have an object named category. In order to access the id and name fields, this time using the object specifier {} brackets, I equate with the let specifier to category. Thus, my id and name variables that I had parsed were fragmented. I can use id and name wherever I want.
I hope it was useful. See you in my next post✋
