The Rest/Spread Properties in ES2018

ES 2018 Spread/Rest Properties

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!

11 thoughts on “The Rest/Spread Properties in ES2018

  1. I like it when folks come together and share views.
    Great website, keep it up! Hi there would you mind stating which blog platform you’re working with?
    I’m going to start my own blog soon but I’m having a
    tough time selecting between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask is because your design and
    style seems different then most blogs and I’m looking for something completely unique.
    P.S My apologies for getting off-topic but I had to
    ask! I couldn’t resist commenting. Perfectly written! http://cspan.org/

    1. Thanks for your kind words! Well, this is a WordPress website, and I will definitely recommend that CMS for your new blog. Possibilities are really endless because WordPress is more than just a blog platform. You can easily express your creativity into a custom WordPress theme and build something unique!

  2. I am extremely inspired along with your writing abilities
    as smartly as with the format on your weblog. Is that this
    a paid subject matter or did you customize it your self?
    Anyway stay up the excellent quality writing, it’s rare to peer a nice weblog like this one nowadays..

  3. Hello there, I discovered your web site via Google while searching for a related
    subject, your site got here up, it looks great.
    I have bookmarked it in my google bookmarks.

    Hi there, just changed into alert to your blog via Google, and found that it is really
    informative. I’m going to watch out for brussels.
    I will appreciate should you continue this in future.

    Lots of people will be benefited from your writing.
    Cheers!

  4. I really like your blog.. very nice colors & theme.

    Did you make this website yourself or did you hire
    someone to do it for you? Plz answer back as I’m looking to
    design my own blog and would like to know where u got this from.
    thanks a lot

  5. you are really a just right webmaster. The web site loading velocity is amazing.
    It sort of feels that you are doing any distinctive trick.
    Furthermore, The contents are masterpiece. you have performed a great job
    on this topic!

  6. This is very interesting, You are an overly professional blogger.
    I’ve joined your feed and sit up for in quest
    of extra of your excellent post. Additionally, I have shared your web site in my social networks

  7. Thank you for being my personal teacher on this niche.
    I actually enjoyed your own article a lot and most of all
    enjoyed reading how you really handled the areas I thought to be controversial.

    You’re always really kind towards readers like me and assist me in my living.

    Thank you.

  8. Have you ever thought about writing an e-book or guest authoring on other sites?
    I have a blog based on the same topics you discuss and would love to have you share
    some stories/information. I know my viewers would value your work.

    If you are even remotely interested, feel free to send me an e mail.

Leave a Reply

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