ES6: Getting Your Hands Wet With Rest and Spread Operator

ES6 has a new operator ‘…’, In this blog post let’s see what these operators are and what it can do to improve function calls and array manipulations.

Rest Operator:
Until ES5 the functions must have a predefined number of hard-coded parameters to make any operation but if the Rest operator is used then the function can accept any number of arguments, no matter how it is defined.

Let me give you a simple example on that, consider having a function that sums the given values as below.

function sum(a, b, c) {
  return a + b + c;
}
console.log(sum(1,2,3)); //Logs 6
//This might work without any errors but it also logs 6
console.log(sum(1,2,3,4));

But what if we want to write a function that takes any random number of input params and do the sum operation, that is where the Rest operator comes into role. Now check the below example of Rest operator implementation.

function sum(...params)
{
  var sum = 0;
  for (var param of params) sum += param;
  return sum;
}
console.log(sum(1,2,3)); //Logs 6

Note: Rest operator must always be used as a last argument.

Spread Operator:
Spread operator is the exact reverse of Rest operator (i.e) it expands iterable object into the list of arguments. This can be used to perform various array manipulations which we will discuss later this post.

var numberArr = [1,2,3];
console.log(...numberArr); //Spreads the array as 1,2,3


Function Calls Using Spread Operator:
Spread operator invokes the constructor arguments from the array, which was not possible before.

function AritmeticOperation()
{
  AritmeticOperation(a,b)
  {
     this.a = a;
     this.b = b;
  }
  Sum()
  {
     return this.a + this.b;
  }
}
var numericArr = [1,2];
//Invokes the constructor as a = 1 and b = 2
var result = new AritmeticOperation(...numericArr);
console.log(result.sum()); //Logs 3


Array Manipulations Using Three Dots:
The Spread operator splits the array elements to single literals which makes it easier to perform certain array manipulations.

Creating Array From Another Array:

var numberArr = [1,2,3];
var anotherNumArr = [...numberArr, 4,5,6];
console.log(anotherNumArr); //logs [1,2,3,4,5,6]

Array Concatenation:

var numberArr = [1,2,3];
var anotherNumArr = [4,5,6];
var concatArr = [...numberArr,...anotherNumArr];
console.log(concatArr); //logs [1,2,3,4,5,6]

Cloning Of Array:

var numberArr = [1,2,3];
//Spread operator deep clones the array
var anotherNumArr = [...numberArr];
console.log(anotherNumArr == numberArr); //Logs False

Destructing Assignments:

var numberArr,anotherNumArr;
var initalArr = [4,5,6];
[numberArr,...anotherNumArr] = initalArr;
console.log(numberArr); //logs [4]
console.log(anotherNumArr); //logs [5,6]


> Tl;Dr

  • Rest Operator are used to combine the list into an array (1,2,3 => [1,2,3]), used as the last parameter of a function.
  • Spread Operator are used to spread the array elements as list
    ([1,2,3] => 1,2,3), used while calling a function or array manipulations.

Tip:  It’s always the three dots, where and how you use them makes it a Rest or Spread Operator.

Advertisements

5 comments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s