Back in 2015, the ECMAScript 6 spec was released and at the time of this writing, all major browsers (except the stubborn IE11) support its syntax. In this article, I’ll show you a couple of useful operators: rest and spread.
Due to lack of imagination, the creators of ES6 spec decided to use the same notation (…) for both rest and spread operators, but let’s not whine. If everything would be simple, our salaries would be lower. So let’s start with getting familiar with the rest operator.
Rest parameters
In ES5, writing a function with a variable number of parameters required using a special object called arguments. This object is similar to an array, and it contains values corresponding to the arguments passed to a function. The implicit arguments variable could be treated as a local variable in any function.
The rest operator is used to pass a variable number of arguments to a function, and it has to be the last one in the arguments list. If the name of the function argument starts with the three dots, the function will get the rest of the arguments in an array. The ES6 rest operator is represented by three dots (…).
For example, you can pass multiple customers to a function using a single variable name with a rest operator:
function processCustomers(...customers){
// implementation of the function goes here
}
Inside this function, you can handle the argument customers the same way you’d handle any array. Imagine that you need to write a function to calculate taxes that must be invoked with the first argument income, followed by any number of arguments representing the names of the customers. The following code shows how you could process a variable number of arguments using first the ES5 and then the ES6 syntax. The calcTaxES5() function uses the object named arguments, and the function calcTaxES6() uses the ES6 rest operator:
// ES5 and arguments object
function calcTaxES5(){
console.log("ES5. Calculating tax for customers with the income ",
arguments[0]); // income is the first element
// extract an array starting from 2nd element
var customers = [].slice.call(arguments, 1);
customers.forEach(function (customer) {
console.log("Processing ", customer);
});
}
calcTaxES5(50000, "Smith", "Johnson", "McDonald");
calcTaxES5(750000, "Olson", "Clinton");
// ES6 and rest operator
function calcTaxES6(income, ...customers) {
console.log("ES6. Calculating tax for customers with the income ", income);
customers.forEach(function (customer) {
console.log("Processing ", customer);
});
}
calcTaxES6(50000, "Smith", "Johnson", "McDonald");
calcTaxES6(750000, "Olson", "Clinton");
Both functions, calcTaxES5() and calcTaxES6() produce the same results:
ES5. Calculating tax for customers with the income 50000 Processing Smith Processing Johnson Processing McDonald ES5. Calculating tax for customers with the income 750000 Processing Olson Processing Clinton ES6. Calculating tax for customers with the income 50000 Processing Smith Processing Johnson Processing McDonald ES6. Calculating tax for customers with the income 750000 Processing Olson Processing Clinton
See it in action on CodePen (click on the Console at the bottom to see the output): https://codepen.io/yfain/pen/WEjLwR?editors=0011
There’s a difference in handling customers though. Because the arguments object isn’t a real array, we had to create an array in the ES5 version by using the slice() and call() methods to extract the names of the customers starting from the second element in arguments. The ES6 version doesn’t require us to use these tricks because the rest operator gives you a regular array of customers. Using the rest arguments made the code simpler and more readable.
The spread operator
The ES6 spread operator is also represented by three dots (…) like the rest parameters, but if the rest operator can turn a variable number of parameters into an array, the spread operator can do the opposite: turn an array into a list of values or function parameters.
Say you have two arrays and you need to add the elements of the second array to the end of the first one. With the spread operator it’s one line of code:
array1.push(...array2);
You can also create a copy of an array as follows
let arrayCopy = [...myArray];
Finding a maximum value in the array is also easy with the spread operator:
const maxValue = Math.max(...myArray);
In some cases, you want to clone an object. In cases when you have an object that stores the state of your app, you may want to create a new object when one of the state properties changes. In other words, you don’t want to mutate the object but want to clone it with modification of one or more properties. One way to implement immutable objects is by using the Object.assign() function. The following code snippet will create a clone of the object first, and then will do another clone with changing the lastName at the same time:
// Clone with Object.assign()
const myObject = { name: "Mary" , lastName: "Smith"};
const clone = Object.assign({}, myObject);
console.log(clone);
// Clone with modifying the `lastName`
const cloneModified = Object.assign({}, myObject, {lastName: "Lee"});
console.log( cloneModified);
The spread operator offers a more concise syntax for achieving the same goals:
// Clone with spread
const cloneSpread = {...myObject};
console.log(cloneSpread);
// Clone with modifying the `lastName`
const cloneSpreadModified = {...myObject, lastName: "Lee"};
console.log(cloneSpreadModified);
See it in CodePen: https://codepen.io/yfain/pen/XaRGYa?editors=0011
If you haven’t been using spread and rest operators yet, it’s a big mistake. Huge.
This article is just an intro to using the rest and spread operators. For more info, read the docs here and here.
yakovfain.com 