The release of ES2015 brought a host of new features to JavaScript to allow us to write more concise and declarative code. One of the powerful new features is the spread and rest operators, three dots that can be used to spread and collect data in objects and arrays. We can take advantage of ES2015 and later updates to ECMAScript by using a transpiler like Babel to convert our code to ES5 compliant JavaScript.
With ES2015 arrow functions there is no arguments object available within the function. In strict mode, the arguments object is created and initialised with the same values as the named arguments, but changes to either the arguments object or the named arguments aren't reflected in one another. In non-strict mode, modifying a value in the arguments object modifies the corresponding named argument. Its hard coded name makes difficult to access arguments of an outer function in an inner one (which defines its own arguments). The arguments object also appears array like but does not have common array methods except length.
If you want to pass an unknown number of arguments to your function, or by pass the arguments object you can use the rest operator to collect the extra arguments:
https://gist.github.com/0035361780a38d1aaf565fddc29674d1
As long as we use the rest operator as the last parameter in the function declaration we can use it along with other individual parameters like the example above, or it can collect all the arguments by using it as the only parameter on a function. We can also use array methods on collect now to iterate over it.
Anther common task is using [querySelectorAll] to select particular elements in the DOM. This returns a Nodelist which resembles an array but does not have all the methods available to an array. We can spread the Nodelist into an array when we declare it like this:
https://gist.github.com/2274fa4787f25cc9646b7f8b1716db08
Copying of an array is a frequent task, something we've used Array.prototype.slice to do in the past, but we can now use the spread operator to get a copy of an array:
https://gist.github.com/f51a866a20f136db4df5405e6ef65d70
Important: any objects within the array will copy the reference to the object in the original array, so both arrays references point to the same object.
We can use the spread operator to spread the array anywhere into a new array:
https://gist.github.com/e97f47a1d0fe35aef3c5a3d193308417
Destructing assignments is a powerful way to manipulate objects and arrays, frequently used in React apps when passing props. The rest operator provides you with a good way to remove a property from an object in an immutable way:
https://gist.github.com/399caa69771e93e0a1e7aaf80b8892ee
The same thinking can be very useful with arrays too:
https://gist.github.com/cc6bfdab2d39680e0d942b34efe7bfe6
With Ecma foundation releasing incremental updates to ECMAScript annually, keeping up to date with new features can make our code cleaner and easier for other developers to interpret. If you have further information to add, contact me via Twitter @rhysonrails or click the email link below to send me an email.