Understanding Destructuring, Rest Parameters, and Spread Syntax
Since the release of ES2016 (aka ES6), many new features for working with arrays and objects have been made available to the developers. In this article, I am going to explain destructuring, rest parameters, and spread syntax. The aim is to describe these features in depth so that you’ll be able to work with arrays and objects much more quickly and compactly.

Destructuring

Destructuring assignment allows assigning the properties of an Array or Object to multiple variables at once. There are two types of restructuring; object destructuring and array destructuring.

Object Destructuring

Object destructuring binds variables to different properties of an object. Let’s have a look at an object with the traditional approach to creating variables and assign values to them.

NOTE: The same object is used for all the examples of object destructuring.

If you wanted to assign the value of name and date to variables individually, then — before this assignment syntax — you might do it the following way:

With object destructuring, you can reduce it to a single line by surrounding variables in curly brackets {}. JavaScript will create new variables (name and dob) from the property with the same name:

You will notice that the above assignment for object destructuring creates new variables with the same name as the object properties. There are many use cases where you may want to give different names to these variables. You can easily achieve that by using colon : followed by alias.

In the example below, a custom name is given to a destructured value:

You can also destructure the values of nested objects. In the example below, the address is destructured once again to create variables (streetNum, streetName, and city).

Note: If you try to console.log(address) in the above example, it will be undefined. In order to access an object as well as its nested values, you would have to declare them separately:

Array Destructuring

Array destructuring creates new variables using an array item as a value. Let’s take a look at an array of colors:

const colors= ['Red', 'Green', Blue]

Previously, you would create variables from the array as follows:

As you can see, there is a lot of code repetition and this approach will take up a lot of space in your code. Array destructuring allows you to unpack the values from the array in order and assign those values to their own variables.

NOTE: In object destructuring we have used curly brackets, but in array destructuing we have used square brackets while declaring variables.

To skip the values, you can leave the destructuring syntax blank between the commas.

You can also destructure nested arrays. For this, let's create a nested array of numbers and destructure it to save the values into the new variables.

You can also set default parameters during the destructuring. As illustrated in the example below, we have set the default value of enrolled to true. Moreover, we have used the combined object and array destructuring in a single assignment.
[]
['Fundamentals', 'Programming', 'Javascript Development', 'Javascript Tips', 'JavaScript']