Spread Operator – Just so you know JavaScript

Published by Rienz on

Spread Operator or Spread Syntax was introduced as part of the ES2015 release and have some really useful features. It expands an iterable such as Array, Object or a String.

Spread Operator looks like this ... then the iterable expression for example items that would look like ...items.

Here’s an example of what it looks like.

So from the word itself, it spreads an iterable expression. Another example to solidify your understanding.

From our second example you can see that we put the spread operator inside the open and close brackets to have the same result as the original array.

Now that we have the basic knowledge about it. Let’s proceed on its use cases.

 

 

Copying or Cloning

You can copy an expression and that copy is a clone so whatever you do with it, it doesn’t affect the original expression.

The old way of copying arrays are using Array.from or slice array method.

Caveat

Something important to note that the spread operator will only appear to deep copy the contents of an expression. In fact, what is going on is that any embedded object/array is simply being copied by reference.

Here’s a link reference to that problem. but It wont be a problem if your not dealing with multi dimensional array or array of objects.

 

 

Apply to a new expression

We could adopt the contents of the existing iterable expression to a new expression.

 

 

Concatenate Multiple Expressions

We could also concatenate multiple iterable expression in any position you want to a new expression.

The other way to do it is using Object.assign with objects and concat for arrays.

 

 

Spread as arguments

In previous versions of the language, we would have used Function.prototype.apply to set array items into arguments but thanks to ES2015, now we could do it with spread syntax.

Example using spread.

Just a note that some people still use apply because of the ability to specify the value of this as the first parameter.

 

Rest Syntax

Rest Parameter syntax looks exactly the same as Spread Syntax. However rest combines the arguments into a single array. Using it means we’re expecting zero or more arguments to be pass in our function.

Also we could expect/name our first to n parameter and then assign the Rest Parameter on the end.

Note than you could only put the Rest Syntax on the last formal parameter or else you would have an Syntax Error. Also I would like to mention that Rest Syntax is a different topic from RESTful apis just to avoid any confusion for new people that learning JavaScript.

 

 

Rest Element

Just like the Rest Parameter you can also do this with variables.

It can only applied at the last element or you would also have a SyntaxError message that Rest element must be last element.

 

 

Application on in-built JavaScript functions

You can also use spread syntax on in-built JavaScript functions.

 

 

Split String

Spread Syntax can also spread strings and turn then to an array of characters which also happens when you use split function.

 

 

Benefits of using Spread Operator

    • Avoids mutation or the cloned expression doesn’t affects the original.
    • Better way to concat arrays (Put anywhere you like)
    • Better than using apply method (Array.prototype.push.apply(arr1, arr2) vs [...arr1, ...arr2])
    • Shorter code (some might think its not a benefit but once you get use to it, it is)

 

 

You could also checkout the MDN website to check more about the spread syntax.

To learn more checkout our latest JavaScript articles. Also feel free to comment any suggestion, correction and improvements that you might want to share. that’s all, Cheers!


3 Comments

gang · February 6, 2019 at 4:50 pm

Riցht here is the perfect web site for everyone who hоpеs to understand
this topic. You understand a whole lot its almoѕt hard to argue witһ yⲟu (not that I actualⅼy will need
to…HaHa). You definitely put a brand new ѕpin on a subject that’s
been discussed for decades. Excellent ѕtuff, just great!

    Rienz · February 6, 2019 at 5:20 pm

    Hey! thanks for your feedback. I hope you enjoy the article 🙂

8 NEW FEATURES in JavaScript ES2019 - Codedam · February 13, 2019 at 5:06 pm

[…] like I said on my Spread Operator article, Be careful because any embedded object/array is simply being copied by […]

Leave a Reply

%d bloggers like this: