# Spread Operator(...) in javascript

I was working on a personal project and I came across a spread operator so I thought it'll be a good idea to have some good insights about it.

The spread operator (...) helps you expand iterable into individual elements.

The spread syntax works within array literals, function calls, and initialized property objects to spread the values of [iterable objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables) into separate items. So effectively, it does the opposite thing from the [rest](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters) operator.

We'll talk about the rest operator in the next one.

Spread syntax looks exactly like rest syntax. In a way, spread syntax is the opposite of rest syntax. Spread syntax **expands** an array into its elements, while rest syntax collects multiple elements and **condenses** them into a single element.

\*\*Example 1:\*\*Use of Spread Operator to convert string intro individual array elements.

```javascript
const myname = "suraj gaire"

console.log([...myname])

//output:- ['s','u','r','a','j',' ','g','a','i','r','e']
```

Let's see how the spread operator works on an array literal.

```javascript
const myname = ["suraj gaire"];

const aboutMe = [...myname, "is", "my", "name"];

console.log(aboutMe);

//output:- ['suraj gaire','is','my','name']
```

We can see in two examples how the spread operator works on **string** and array **literal**.

Now let's see spread operator works in a function call.

```javascript
const numbers = [1, 2, 3, 4];

function addNumber(a, b, c, d) {
  return a + b + c + d;
}

console.log(addNumber(...numbers));

// output:- 10
```

Here we have spread the array content i.e. we have spread the numbers as individual elements as 1,2,3,4 and pass them into the addNumber function.

Spread syntax can be used when all elements from an object or array need to be included in a new array or object.

Only [iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) objects, like `array` can be spread in array and function parameters. Many objects are not iterable, including all [plain objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) that lack a `Symbol.iterator` method:

```javascript
const obj = { key: "value" };

console.log(...obj);
```

It throws an error saying the object is not iterable:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688646359559/2ffc0296-0652-4d6f-9768-9afce4b6a2e8.png align="center")

We can spread an array into objects using the spread operator:

```javascript
const numbers = [1, 2, 3, 4];
console.log({ ...numbers });

//Output is: { '0': 1, '1': 2, '2': 3, '3': 4 }
```

### A better way to contact arrays

[`Array.prototype.concat()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) is often used to concatenate an array to the end of an existing array. Without spread syntax, this is done as:

```javascript
let arr1 = [0, 1, 2];
const arr2 = [3, 4, 5];

// Append all items from arr2 onto arr1
arr1 = arr1.concat(arr2);
```

With spread syntax, this becomes:

```javascript
let arr1 = [0, 1, 2];
const arr2 = [3, 4, 5];

arr1 = [...arr1, ...arr2];
// arr1 is now [0, 1, 2, 3, 4, 5]
```

A better use case you may have seen during the development of the todo app:

```javascript
const inittialTodo = [
  {
    id: 0,
    todo: "text",
    iscompleted: false,
  },
];

const finalTodoList = [
  ...inittialTodo,
  {
    id: 1,
    todo: "another",
    iscompleted: false,
  },
];
/* Output:-
[
  { id: 0, todo: 'text', iscompleted: false },
  { id: 1, todo: 'another', iscompleted: false }
] /*
```

This was some insight about the spread operator. You can learn more [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax).