REST and Spread operators in JavaScript ES6

ES6 is full of amazing features, one of them is the use of ‘…’ which allows you to either invoke the REST or spread operator, the differences are below.

Rest operator — Collects the remaining elements from parameters and “condenses” them into a single element.

Spread operator — The spread operator allows an iterable i.e. anything that can be looped over such as arrays, strings and objects to be “expanded” for other uses so it.

Rest operator

I will show you a use case of the Rest operator below, when you are writing your code at work or on your own projects at home their may come at time when you need to pass in parameters to a function definition but the amount of parameters passed will be unknown. The Rest operator solves this problem using the ‘…’ syntax.

function addMe(a,b){
return a + b
}
addMe(3,3) = 6
addMe(3,3,3) = 6

The second call of “addMe” is still 6 because the function only allows for 2 arguments so the third will be ignored, for the function to take in a potentially unlimited number of parameters you need to write code like the below.

function addMe(…mynumber){
return mynumber.reduce((sum,number)=>{
return sum + number;
}, 0)
};
addMe(10,9,8,7,6,5,4,3,2,1);

If you run the code in the editor linked here https://repl.it/languages/babel

NOTE: I noticed when pasting this into “repl” that the “…” was formatted wrong, so you may need to remove and then enter the “…” again.

If everything is ok then the result returned should be 55.

The function “addMe” takes one parameter called “mynumber” which has the “…” syntax attached to it meaning that all of the arguments that get passed to the function “addMe” will be put into an array, and that is how I am able to successfully run the “reduce” function on the “mynumber” argument because it is an array, I then return the current sum of the reduce function while adding the next number to the sum, in addition, to using the value 0 as the accumulator.

Spread operator

The spread operator is quite the opposite of the Rest operator in that it can be used to “spread” an iterable (as mentioned at the start of the article) such as an array for different purposes

An example is below

const myVariable = ‘myvariable’;
const spreadMe = […myVariable]
console.log(myVariable);
console.log(spreadMe);

We have a const called “myVariable” containing some string and another const called “spreadMe” which is an array containing the variable “myVariable” with the 3 “…” before the variable name, if you were to copy the above code into a code editor and run it you would see that the “spreadMe” const has expanded and inserted every character from the “myVariable” const into the “receiver” which is the “spreadMe” variable.

Interestingly enough, this can also go the opposite way if you have an array first and want to convert it to a string you can do something like the below.

var myTestArray = [‘my’, ‘ test’, ‘ array’];
console.log(myTestArray);
console.log(…myTestArray);

Another use case is if you want to concatenate multiple arrays together into one array, the syntax would be something like the below.

var coloursOne = ['red','blue','green'];
var coloursTwo = ['yellow','purple','pink'];
console.log([...coloursOne,...coloursTwo])

Implementing the spread operator stops you from having to use other functions such as splice, split or concat. You can even insert individual values into the array like below.

var coloursOne = ['red','blue','green'];
var coloursTwo = ['yellow','purple','pink'];
console.log(['orange',...coloursOne,...coloursTwo])

In addition to arrays, the spread operator can work on object literals, by using the same sort of syntax and setting a variable equal to a previously created object with the syntax “…” in front of the object name.

var obj1 = { foo: ‘bar’, x: 42 };
var obj2 = { foo: ‘baz’, y: 13 };
var cloneObj = {…obj1}
console.log(cloneObj)

In addition, the spread operator is clever enough not to overwrite properties if the object you are cloning has the same key as the object you are cloning to, an example is below.

var obj1 = { foo: ‘bar’, customKey: ‘obj1 custom key’ };
var obj2 = { foo: ‘baz’, y: 13 };
var cloneObj = {…obj1,customKey:’cloneObj custom key’}
console.log(obj1);
console.log(cloneObj);

In “obj1” I have the key “customKey” with a value, in the “cloneObj” object I also have a key named “customKey” but I still want to retrieve the other properties so the “cloneObj” object will have the other key and it’s value from “obj1” but its other key “customKey” will not be overwritten because it is already present in “cloneObj”.

Sorry if this article seems rushed or of lower quality I am trying to get back into the swing of things with this article writing thingy!, if you have any questions, criticisms or things I could add to the article please feel free to write a comment down below, have a nice day :)