JavaScript ES6 - spread (syntax) syntax

Spread statement syntax

1. The spread syntax is just three points: ...
2. The spread operator allows you to extend expressions in those places where the use of multiple arguments is provided.

These definitions may be incomprehensible without context. Let's look at several use cases to better understand what I mean.

Example # 1 - Adding Arrays

Take a look at the code below. Here we do not use the spread operator:

var mid = [3, 4]; var arr = [1, 2, mid, 5, 6]; console.log(arr); 

Above, we created an array called mid. Then we created another array that contains our mid array. And at the end we got the result. What did you expect from the arr output? The result is the following:
')

 [1, 2, [3, 4], 5, 6] 

Did you expect the same result?

By inserting the mid array into the arr array, we ended up with an array containing a different array. It's great if this was our goal, but what if I want to get one array with values ​​from 1 to 6? To accomplish this, we can use the spread syntax. Remember, the spread syntax allows us to expand the elements of our array.

Look at the code below. All the same - except that now we use the spread operator to insert the mid array into the arr array:

 var mid = [3, 4]; var arr = [1, 2, ...mid, 5, 6]; console.log(arr); 

And as a result, we get:

 [1, 2, 3, 4, 5, 6] 

Cool!

Remember the definition of the spread statement you just read above? That's when he comes into play. As you can see, when we create the arr array and use the spread operator before the mid array, it’s not just the mid array that is inserted, but the mid array is expanded (expanded). This extension means that each element of the mid array is inserted into the arr array. Instead of a nested array, we get one array with elements from 1 to 6.

Example 2 - Mathematics

JavaScript has a built-in math object that allows us to do some fun math calculations. In this example we will look at Math.max (). The Math.max () function returns the largest number from the argument list. Here are some examples:

 Math.max(); // -Infinity Math.max(1, 2, 3); // 3 Math.max(100, 3, 4); // 100 

As you can see, if you want to get the maximum number of several values, then you need to pass these values ​​to Math.max (). Unfortunately, you cannot use an array as an input parameter. Before the appearance of the spread operator, the easiest way to use Math.max () with an array was to use the .apply () method

 var arr = [2, 4, 8, 6, 0]; function max(arr) { return Math.max.apply(null, arr); } console.log(max(arr)); 

It works, but it is just annoying.

Now let's see how we do the same thing, but with the spread operator:

 var arr = [2, 4, 8, 6, 0]; var max = Math.max(...arr); console.log(max); 

Instead of creating a function and using the apply method to return the result of Math.max (), we can write only two lines of code! The spread syntax expands our array and passes each element of the array separately to the Math.max () method.

Example 3 - Copying an Array

In JavaScript, you cannot simply copy an array by setting a new variable equal to an already existing array. Consider the following sample code:

 var arr = ['a', 'b', 'c']; var arr2 = arr; console.log(arr2); 

As a result, you will receive:

 ['a', 'b', 'c'] 

At first glance it seems that it worked - it looks like we copied the values ​​of the arr array into the arr2 array. But in reality it is not. You see, when you work with objects in JavaScript (and an array is an object), an assignment occurs by reference, not by value. This means that arr2 is assigned the same link as arr. In other words, everything we do for arr2 will also affect the original arr array (and vice versa). See the code below:

 var arr = ['a', 'b', 'c']; var arr2 = arr; arr2.push('d'); console.log(arr); 

Above, we added a new d element to arr2. However, when we output the contents of the arr array, we see that the value d has also been added to this array:

 ['a', 'b', 'c', 'd'] 

Do not be afraid! We can use the spread operator!

Consider the code below. This is almost the same as above. Instead, we used the spread operator in square brackets:

 var arr = ['a', 'b', 'c']; var arr2 = [...arr]; console.log(arr2); 

As a result, we see:

 ['a', 'b', 'c'] 

The above array values ​​in arr are expanded to become separate elements, which are then assigned to arr2. Now we can change the arr2 array as we would like, without consequences for the original arr array:

 var arr = ['a', 'b', 'c']; var arr2 = [...arr]; arr2.push('d'); console.log(arr); 

Again, this works like this because the arr values ​​are expanded to fill in the brackets of our definition of the arr2 array. Thus, we add elements to arr2 with separate values ​​from arr instead of copying the reference to arr, as in the first example.

Bonus example - converting a string to an array

As a fun final example, you can use the spread syntax to convert a string to an array. Just use spread syntax in a pair of square brackets:

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

As a result, we get:

 ["h", "e", "l", "l", "o"] 

Cool, right?

As for support :


Desktop Browser Compatibility


Mobile Browser Compatibility