The Rest/Spread Properties in ES2018

JavaScript continued with its enhancements in previous year. ES2018 didn’t bring revolutionary things as ES2015 did, rather some improvements. Some notable changes are:

• Rest/Spread properties in object literals
• Updated tagged templates rules
• Asynchronous Iteration
• “finally()” method in Promises
• New RegExp features

Let’s talk about the first one today!

What are Rest/Spread operators?

Three years ago, the JavaScript that we all love brought those operators in ES2015. Their primary purpose was simplifying work with arrays. The importance of making a copy of arrays instead of editing them directly increased over JavaScript frameworks expansion. Before that, you needed to use slice() or concat() methods to achieve that. Instead, you can do something like this:

const arr = [1, 2, 3];

// make a copy of arr
const arrCopy = [...arr];

console.log(arrCopy);    //  [1, 2, 3]

Do you want to merge two arrays? It’s so simple with spread operators!

const arr1 = [1, 2, 3];
const arr2 = [4, 5];

// merge arr2 with arr1
const arrMerged = […arr1, …arr2];

console.log(arrMerged);    // [1, 2, 3, 4, 5]

The Rest operators are handy as well! You can simply use “…” to represent the values as an array. In the example below, we will actually extract the first value from the array and assign it to the “x” variable. In addition, the rest of the values are assigned to the “rest” array (it’s logical, isn’t it 🙂 ?)! This process is called destructuring, and it’s a common pattern in modern JavaScript development.

const arr = [1, 2, 3];

const [x, …rest] = arr;

console.log(x);       // 1
console.log(rest);    // [2, 3]

ES2018 and Rest/Spread properties

In latest JavaScript release you’re able to add spread properties to object literals, too. Above all, with the spread properties, you can copy properties of one object to another. Here’s a practical example:

const obj1 = {
   a: 1,
   b: 2
 };
const obj2 = {
   …obj1,
   c: 55
 };

console.log(obj2);    //  {a: 1, b: 2, c: 55}

In the code above, “…” is used to retrieve properties from another object. As a result, properties from “obj1” are now in “obj2”! Keep in mind that this will work for enumerable properties only. However, the inherited properties won’t work, even if they’re enumerable.

Since ES2018, the Rest operators work with objects as well!

const obj = {
   a: 1,
   b: 2,
   c: 3,
   d: 4
 };

const {a, b, …rest} = obj;

console.log(a);       // 1
console.log(b);       // 2
console.log(rest);    // it's a new object {c: 3, d: 4} 

Use the destructuring pattern to copy the remaining enumerable properties into a new object! Be aware that multiple rest properties in an object will return an error unless they are not nested. Furthermore, it’s important to remember that the rest properties work only if placed at the end of the object.

JavaScript is rapidly evolving and new stuff are there all the time. Many of them will improve the way you work and probably save some time. This update regarding Rest/Spread properties is just one of them. A freelance web developer is becoming a challenging role lately. So, introduce new things to your projects as soon as possible and make the most of them!