What is . Spread Operator in javascript

The spread operator is another smart feature in JavaScript ES6. Many people hesitate to use it because it seems complicated. However, after paying a little attention or using it a few times, you’ll realize how useful it is. In truth, it’s also a kind of syntactic sugar.

The main function of the spread operator is to spread iterable data, such as arrays or strings, into their individual elements. It does exactly what the word “spread” means in English. The spread operator is essentially three dots. These three dots can be used in other contexts as well, which we will discuss later. For now, let’s look at an example to understand what the spread operator does. First, let’s see a program in ES5 version.

Suppose we have an array:

“`javascript

var numbers = [1, 2, 3, 4];

“`

Now, we create a function to sum these numbers:

“`javascript

function calculate(a, b, c, d) {

    console.log(‘Sum:’, a + b + c + d);

}

“`

If we call this function and pass the numbers:

“`javascript

calculate(numbers);

“`

Oops! We didn’t get the desired result:

“`javascript

> calculate(numbers)

Sum: 1,2,3,4undefinedundefinedundefined

“`

Why? Because the `numbers` argument we passed is an entire array. But our function parameters are four separate variables `a`, `b`, `c`, and `d`. So, it expected four arguments, but we passed a single array, resulting in an unexpected output. This can be solved by passing the numbers manually:

“`javascript

calculate(1, 2, 3, 4);

“`

Passing the four arguments manually gives us the desired result:

“`javascript

> calculate(1, 2, 3, 4)

Sum: 10

“`

Alternatively, if we want to use the `numbers` array, we can use this technique:

“`javascript

calculate.apply(null, numbers);

“`

Using `apply` gives the correct result:

“`javascript

> calculate.apply(null, numbers)

Sum: 10

“`

However, overall, this approach seems cumbersome. This is why the spread operator was introduced in ES6. By using the spread operator, we can easily pass the `numbers` array as arguments:

“`javascript

calculate(…numbers);

“`

That’s it! Just with three dots, the task is done:

“`javascript

> calculate(…numbers)

Sum: 10

“`

Similarly, the spread operator can be used for many other tasks. For example, to add new elements to an array, we usually use `push` or `unshift`. Suppose we have another array:

“`javascript

var arrName = [‘Rahim’, ‘Karim’, ‘Rafiq’, ‘Jabbar’];

“`

To add an element at the beginning using ES5:

“`javascript

arrName.unshift(‘Shafiq’);

“`

Now, the array looks like:

“`javascript

console.log(arrName);

> console.log(arrName)

(5) [“Shafiq”, “Rahim”, “Karim”, “Rafiq”, “Jabbar”]

“`

To add an element at the end using ES5:

“`javascript

arrName.push(‘Salam’);

“`

Now, the array looks like:

“`javascript

console.log(arrName);

> console.log(arrName)

(6) [“Shafiq”, “Rahim”, “Karim”, “Rafiq”, “Jabbar”, “Salam”]

“`

With the spread operator in ES6, things become much more flexible. You can place the elements wherever you want to spread your array. For example, to do both tasks in one line:

“`javascript

const arrName6 = [‘Bangladesh’, …arrName, ‘Language’];

“`

Now, the array looks like:

“`javascript

console.log(arrName6);

> console.log(arrName6)

(8) [“Bangladesh”, “Shafiq”, “Rahim”, “Karim”, “Rafiq”, “Jabbar”, “Salam”, “Language”]

“`

Suppose we have two arrays:

“`javascript

var arrOne = [0, 1, 2, 3, 4];

var arrTwo = [5, 6, 7, 8, 9];

“`

To combine these arrays in ES5:

“`javascript

arrOne = arrOne.concat(arrTwo);

“`

Since we stored the new array in `arrOne`, we now have the combined array:

“`javascript

console.log(arrOne);

> console.log(arrOne)

(10) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

“`

Now, you might guess how to do the same thing in ES6:

“`javascript

let arrOne6 = [0, 1, 2, 3, 4];

let arrTwo6 = [5, 6, 7, 8, 9];

“`

Using the spread operator, we store the new array in `arrOne6`:

“`javascript

arrOne6 = […arrOne6, …arrTwo6];

“`

That’s it! They are combined together:

“`javascript

console.log(arrOne6);

> console.log(arrOne6)

(10) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

“`