# Spread Operator

Spread means spreading or expanding. And the spread operator in JavaScript is denoted by three dots.

This spread operator has many different uses. Let's see them one by one.

Let's say we have two arrays and we want to merge them.

```javascript
let array1 = [1, 2, 3, 4, 5]
let array2 = [6, 7, 8, 9, 10]

let array3 = array1.concat(array2);
console.log(array3)
```

We are getting the combination of both arrays, which are array1 and array2.

But there is an easier way to do this:

```javascript
let array1 = [1, 2, 3, 4, 5]
let array2 = [6, 7, 8, 9, 10]

let array3 = [...array1, ...array2]
console.log(array3)
```

In this case, we are using the spread operator to merge both arrays.

Let's imagine another use case where we have to insert *array1* between the elements of *array2*.

For example, we want to insert *array2* between the second and third element of *array1*.

So, how do we do that? We can do something like this:

```javascript
let array1 = [1, 2, 3, 4, 5]
let array2 = [6, 7, ...array1, 8, 9, 10]

console.log(array2);
```

Now, let's merge two objects together using the spread operator.

```javascript
let object1 = {
    firstName: "Nishant",
    age: 24, 
    salary: 300,
}

let object2 = {
    lastName: "Kumar",
    height: '20 meters',
    weight: '70 KG'
}
```

We have two objects here. One contains firstName, age, and salary. The second one contains lastName, height, and weight.

Let's merge them together.

```javascript
let object1 = {
    firstName: "Nishant",
    age: 24, 
    salary: 300,
}

let object2 = {
    lastName: "Kumar",
    height: '20 meters',
    weight: '70 KG'
}

let object3 = {...object1, ...object2}
console.log(object3);
```

  
We have now merged both objects using the spread operator, and we've logged the value in the console.

### **How Does the Rest Operator Work in a Function?**

In JavaScript functions, rest gets used as a prefix of the function’s last parameter.

```js
// Define a function with two regular parameters and one rest parameter:
function myBio(firstName, lastName, ...otherInfo) { 
  return otherInfo;
}
```

The rest operator (`...`) instructs the computer to add whatever `otherInfo` (arguments) supplied by the user into an array. Then, assign that array to the `otherInfo` parameter.

As such, we call `...otherInfo` a rest parameter.

**Note:** [Arguments](https://www.codesweetly.com/javascript-arguments) are optional values you may pass to a function’s parameter through an invocator.

```js
// Define a function with two regular parameters and one rest parameter:
function myBio(firstName, lastName, ...otherInfo) { 
  return otherInfo;
}

// Invoke myBio function while passing five arguments to its parameters:
myBio("Oluwatobi", "Sofela", "CodeSweetly", "Web Developer", "Male");

// The invocation above will return:
["CodeSweetly", "Web Developer", "Male"]
```

In the snippet above, notice that `myBio`’s invocation passed five arguments to the function.

In other words, `"Oluwatobi"` and `"Sofela"` got assigned to the `firstName` and `lastName` parameters.

At the same time, the rest operator added the remaining arguments ( `"CodeSweetly"`, `"Web Developer"`, and `"Male"`) into an array and assign that array to the `otherInfo` parameter.

Therefore, `myBio()` function correctly returned `["CodeSweetly", "Web Developer", "Male"]` as the content of the `otherInfo` rest parameter.