So here we are today to try to increment our Javascript knowledge. So why we don’t start to do that by mentioning one of the many news that ES6 brought into our life… The spread operator!

First, let’s give this operator a definition, and then we will build a context made of examples to try to understand it :

The spread operator allows you to expand an expression in a certain point of a program where multiple arguments( for a function call ) or multiple elements (  for array literals are expected). 

 

Doesn’t seem to clear to me right now, so let’s start to make some examples and let’s clarify when it can be useful:

Combining arrays:

Often, we find ourselves with the necessity to combine two arrays together. To do that, we might recur to the use of methods like push, concat and splice. But with the spread operator it all gets easier :

var mid = [3, 4];
var arr = [1, 2, ...mid, 5, 6];

console.log(arr);

 

First, notice the syntax for this operator made of three dots ...

Second, notice how with this operator we are able to combine the two arrays together by expanding one inside the other. And this is the most important point here, to understand that the spread operator expands an expression at a certain point. To make this clearer, imagine that we performed the same operation in this way :

var mid = [3, 4];
var arr = [1, 2, mid, 5, 6];

console.log(arr);

 

By inserting the mid array into the arr array, we’ve ended up with an array nested inside another one. And that’s not our goal! Our goal is to put the data inside of mid into arr , or better, to expand its content into the arr array.

 

Calling functions :

Up to this point, you have probably used apply to pass an array of arguments to a function, and that is correct but it can also be quite tedious to write :

function myFunction(x, y, z) {
// do stuff
}

var args = [1, 2, 3];
myFunction.apply(null, args);

 

So why don’t we use the spread operator to do this instead :

function myFunction(x, y, z) {
// do stuff
}

var args = [1, 2, 3];
myFunction(...args);

 

Performing operations using Math

To further analyze the use of the spread operator for arguments passing, we can use one of the tools that the  Javascript language provides us : the  Math object, which allows us to perform various arithmetic operations in our code. To illustrate the use of spread operator combined with the  Math object, we will use  Math.max() which return the largest of zero or more numbers.

Math.max(10, 20, 30); // 30

 

But wait, what happens if I want to pass much more than three arguments? Maybe I want to pass 10 of them, or maybe even a hundred. Well, in that case, you have probably stored them in an array, but with the Math.max() method you cannot simply pass an array. So here again, you should use the apply method. Let’s use the spread operator instead!

var args = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
Math.max(...args)

Coping an array

Coping an array is one of the most frequent task we can have in any programming language, unfortunately in Javascript this can become quite tedious due to its intrinsic structure. Consider the following example :

var myArray = [1, 2, 3];
var myCopy = myArray;
console.log(myCopy);

 

Now, At a first moment, we might think to have successfully copied the myArray into  myCopy. But that’s not the case ! See, in Javascript when we work with objects (yes, array are a type of object) the assignment operation is performed by reference not by copy. So this literally means that we have copied a reference of  myArray into  myCopy. So now everything that we do to  myCopy will be reflected to  myArray !

Consider :

var myArray = [1, 2, 3];
var myCopy = myArray;
myCopy.push(4);

console.log(myArray);

 

In this case the content of myArray would be modified too as an effect of assigning by reference. To avoid this we can use the spread operator :

var myArray = [1, 2, 3];
var myCopy = [...myArray];
console.log(myCopy);

// let’s check that myArray doesn’t get modified
myCopy.push(4);
console.log(myCopy); // only myCopy is changed
console.log(myArray); // immutated

 

Coping Strings into arrays

The last example I’m proposing today is coping a String into an array :

var myString = "hello";
var chars = [...myString];
console.log(chars);

 

And that was it for this lesson, keep following the coder swag for important updates and lessons.

Stay tuned,

Happy learning!

LEAVE A REPLY

Please enter your comment!
Please enter your name here