es2015 spread operators rest parameters

ES2015 Spread Operators and Rest Parameters

ES2015 Provides a set of unique features to make coding more easier, among these features is the Spread operator and Rest parameters.

 

 

Spread operators represented by prefixing a variable with three dots like this “…$variable”. This expression has many uses. First the purpose of this expressions for function calls is to allow the function to except zero or more parameters. For iterables like arrays and object is to allow the expression to be expanded to zero or more elements.

 

Syntax

 

Examples

Using Spread with arrays literals

The spread operator can be used to do a couple of things when using with arrays:

 – To inject an array into another array

The above code shows that when adding the first array into the second array using the “…” operator. The operator expands the values of the array resulting that the first array is merged with the second array. This is cool as it saves more time than using the classic ways to merge arrays.

Also you can use the operator multiple times like this:

Using the operator at the start or at the end

 

 – To merge two arrays

As you see merging arrays is so easier than before, and you can go beyond this when merging multiple arrays like this:

 

 – To copy an array

The spread operator above copy the array values by creating a new array, this is different when using the assignment operator to copy an array for example if you try to push a new value into the copied array:

But if you copy an array using the assignment operator

 

 

Using Spread with objects

To use the spread operator with objects works in the same way as array literals.

 

– Merging objects

When merging objects be aware that if there is duplicate keys it will be overwritten and the last one will be used as shown in this code:

 

– Copying objects

Copying object also can be done with the spread operator, before that people tend to use something like javascript Object.assign().

The copy of an object creates a brand new object instead of modifying the original object so here if you modified the clonedObj by adding new properties this will not affect obj1 as shown:

 

Using Spread Operator with function calls

Let’s assume we have this function that sum multiple numbers

Now using the spread operator to call that function

As you see instead of passing along list of arguments to the function we pass an array whose length is the same as the function parameters count and we preceded it with “” to expand this array into arguments, this is the same as:

Any argument in the argument list can use spread syntax and it can be used multiple times.

 

 

Rest Parameters

In the previous example the sum function must accept five numbers to work, but imagine if want to make the sum() function more dynamic and accept a variable number of arguments, this can be achieved by using the Rest Parameters.

The Rest Parameters is the same as spread operators but it mostly used to represent that the function can accept an indefinite number of arguments as an array.

 

Now if we want to rewrite the sum() function to accept variable number of arguments:

To use the function

 

– If the function declaration has more than one argument only the last argument can be a Rest Parameter like this:

 

Share this: