What is Spread Operator in JavaScript

JavaScript spread operator (…) allows you to expand an iterable object (such as an array, string, or object) into multiple elements. It splits an array into single arguments passed to the function as separate arguments.

The spread operator takes either an array or an object and expands it into its set of elements and allows an iterable such as an array expression or string, to be expanded in places where zero or more arguments or elements are expected or an object expression to be expanded in areas where zero or more key-value pairs are expected.

Syntax

let variable_name = [...value]; 

Example 1: Simple demo of spread operator

const array = [1, 2];

const combined = [...array, 3, 4];

console.log(combined);

In the above example, we have defined one array with two items. Then we defined the second array with items like …array. It means we have included the first defined array. This (…) syntax is called spread syntax.

Output

The spread operator lets you drop an array in and get its values.

We have not modified an original array, meaning other parts of our code can call that array without fear of side effects.

Example 2: Spread syntax as rest parameter

When the spread operator is used as a parameter, it is known as the rest parameter. You can also accept multiple arguments in a function call using the rest parameter.

let meth = function (...args) {
  console.log(args);
}

meth(11);
meth(19, 21, 46);

Output

[ 11 ]
[ 19, 21, 46 ]

Example 3: JavaScript Spread operator with objects

Javascript objects spread syntax allows you to do the equivalent of Object.assign, copying the values of an object into a new one. Looking at a simple code example.

const obj = {
  name: 'AppDividend',
  author: 'Krunal Lathiya'
};

const combined = {
  ...obj,
  age: 25
};

console.log(combined);

Here, we have done the same thing as we have done with arrays.

Output

Example 4: Copy Array Using Spread Operator

You can also use the spread syntax(…) to copy the items into a single array.

const arr_1 = ['one', 'two'];
const arr_2 = [...arr1];

console.log(arr_2); 

Output

[ 'one', 'two' ]

Example 5: Spread Operators For Functions

const multiplication = (x, y, z) => {
  return x * y * z;
};

const args = [1, 2, 3];
const output = multiplication(...args);

console.log(output);

Here, we have passed the formal argument in the form of spread syntax, and actual arguments become the individual elements and return the multiplication of the numbers.

Output

Any argument in the function argument list can use the spread syntax and be used multiple times as well.

Example 6: Spread Operator Only for iterables

We can only use Spread Syntax with the iterables. Let’s see the following example and see if we can use it with un-iterable objects.

const obj2 = {'name': 'Ankit'};
const ob3 = [...obj2];

console.log(ob3);

Output

We get an error. So keep in mind that use the spread operator with the iterable object.

When using the spread syntax for function calls, you must consider the possibility of exceeding the JavaScript engine’s argument length limit.

That’s it for this tutorial.