UI5
No Comments

6 Must Known New Features in ES6 – Part 6: Rest and Spread

ES6 part 6.

These are the newest and most crucial features in ES6 or also known as ECMAScript 6, ES2015, or JavaScript 6. This series of articles explains them super simple for you. Plus, each article states how to use the specific feature at its best.

The rest operator takes any number of arguments and put them into an array. On the contrary, the spread operator takes an array and puts the elements of the array into parameters.

Rest

The rest operator takes any number of arguments and turns them into an array. Simple as that. The rest operator consists of three dots: and returns an array. For example, …aParameters would return aParameters which contains all arguments which would have been passed to …aParameters. This is getting clearer in the examples below.

For example, you would like to sum up numbers in a function. In ES5 this would have been the way to do it:

// ES5

function fnSum(iNumber1, iNumber2, iNumber3, iNumber4, iNumber5, iNumber6) {

  var iSum = iNumber1 + iNumber2 + iNumber3 + iNumber4 + iNumber5 + iNumber6;

  return iSum;
  
}

console.log(fnSum(1, 2, 3)); // NaN
console.log(fnSum(1, 2, 3, 4, 5, 6)); // 21
console.log(fnSum(1, 2, 3, 4, 5, 6, 7, 8, 9)); // 21

The problem here is, that the number of numbers is restricted to 6. One has to exactly match the number of arguments to the number of parameters of the function. If there are fewer parameters the function returns Not a Number because of the undefined parameters.

Sure, one could put logic in the function to check how many parameters have a value and which value. But for the sake of simplicity, this is not part of this explanation and the purpose is just to clarify the function of the rest operator.

If there are more arguments than parameters then the function omits the arguments which are more than the parameters of the function.

But here comes ES6 to the rescue:

// ES6

function fnSum(...aNumbers) { // rest operator

  let iSum = aNumbers.reduce((iPrev, iNext) => iPrev + iNext;

  return iSum; 

}

console.log(fnSum(1, 2, 3)); // 6
console.log(fnSum(1, 2, 3, 4, 5, 6)); // 21
console.log(fnSum(1, 2, 3, 4, 5, 6, 7, 8, 9)); // 45

In ES6 it is possible with the rest operator to pass any number of arguments to the function. The rest operator takes them and puts them into an array.

Now it is possible to call the function with less or more arguments and to get a result.

Spread

The spread operator is the opposite of the rest operator. It takes an array as argument and spreads the elements of the array to parameters. Again, the spread operator uses three dots: .

In ES5 …

// ES5

function fnSum(aNumbers) {

  let iSum = aNumbers.reduce(function(iPrev, iNext) {
    
    return iPrev + iNext;
  
  });

  return iSum; 

}

var aNumbers1 = [1, 2, 3, 4, 5, 6];

console.log(fnSum(aNumbers)); // 21

… and in ES6 …

// ES6

function fnSum(iNumber1, iNumber2, iNumber3, iNumber4, iNumber5, iNumber6) {

  var iSum = iNumber1 + iNumber2 + iNumber3 + iNumber4 + iNumber5 + iNumber6;

  return iSum;

}

var aNumbers1 = [1, 2, 3, 4, 5, 6];

// spread operator
console.log(...aNumbers); // 21

Most Recent Articles

Will SAP UI5 replace the SAP Web UI?

SAP Full Forms

More Similar Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu