Quick tips: destructuring, rest parameter, and spread operator

Image by Anthony Heddings

Today I wanted to write a short post about some quick ES6 tips: destructuring, rest parameter, and spread operator. These three musketeers are present in all modern JS frameworks and for a long time I was confused about these concepts until I had Vue and React on my programming routine. Hey ho, let’s go!

Destructuring

ES6 arrived with a simpler way to extract values from arrays and objects, to set default values from these, and to also rename these properties in a fast way:

Example of destructuring an object

In the example above, I declared the person object without any special coding, and then I split the destructuring concepts by rows to an easy understanding:

1. On line 12: I extracted the value of the property name with the simple syntax: variable type { property name} = object name.
2. On line 13: to build a concise code, as a developer, I must consider that the object could not have the property that I want to get. In the destructuring, I can set a default value to avoid breaking my code: property = defaultValue. In the example, if the property isDeveloper doesn't exist, its value would be false.
3. On line 14: maybe I need or want to rename the property at the moment that I’m extracting it, so: property: a new name. I renamed hobbies to freeTime.
4. On line 15: accessing deeper objects could seem a little confusing, but you just need to keep in mind the simple concepts we talked about in the past topics. I opened the object syntax, accessed the property languages, and specified the next property I wanted to get — if your object is deeper, you can follow this rule all the way down. In this example, I also renamed the property and set a default value to this.

Using destructuring on arrays is quite simpler than on objects since it follows the same concepts we’ve already seen on objects:

Example of destructuring an array

In the array destructuring, we extract the values from the array by their positions and assign these to variables named inside the const []. This process follows the arrays’ order, in the case that we try to access a position that doesn't exist in the array: e.g: name4, the variable will have the undefined value. We can also set default values to keep our code robust.

Rest Parameter

The rest parameter syntax allows us to handle several inputs as parameters in a function in an easy way — just put three dots before your arguments and see the magic happens.

Example of the rest parameter

On the code above I wrote a function that receives an undefined number of parameters, so when I call the sum() I can pass how many arguments I want. The rest params put all the parameters into an array, so we can iterate into it, and do what we need to do. In the example, all the parameters that are valid and of the type number are summed.

Spread Operator

This feature literally spreads what we want, it is mostly used in the variable array… It allows us to: expand, copy, concat— we can think of it as the opposite of rest parameters. But you can draw your own conclusion after reading the example and explanation.

Example of the spread operator

1. On line 3: in the first example I joined two arrays and assigned them to another one— it accepts more arrays -, it does the same as a simple push, but it’s more elegant.
2. On line 5: I just copied the array1 into a new variable, it looks very simple, but the magic here is that the spread operator copies only the value of the array1 into array3 and not its value’s memory! If you still don't know the difference between memory address and the real variable's value, check this other article that I wrote explaining a little more into it.
3. On line 8: in the last example, the use of the spread operator spreads the array4 into the new array5, so if we console.log(array5), the result would be: [‘a’, ‘b’, ‘c’, ‘d’].

I hope this post has cleared your mind and helped you understand the features you use in your favorite modern JS framework! ;)