# A Beginner's Guide to ... in JavaScript

### What is ... ?

The '...' or spread operator is a useful tool for syntax in JavaScript. It can be used in:

* Function calls
    
* Arrays/Strings
    
* Rest Parameters
    

Let's go through how to use it in each of the mentioned uses.

## Function Calls

### 1\. 'new' object using array

Traditionally, you cannot use the 'new' keyword to create an object using an array directly. I'm talking about something like a `new Date(array)` (a new Date Object). Using an array in the constructor is not valid but with '...' , it becomes possible:

```javascript
const date = [2020, 0, 1];  // 1 Jan 2020
const dateObj = new Date(...date);

console.log(dateObj);
// VM60:1 Wed Jan 01 2020 00:00:00 GMT-0500 (Eastern Standard Time)
```

### 2\. 'apply()' method

The '...' can be used just like the `apply()` method in JavaScript.

For example, instead of using `apply()`:

```javascript
const array = ['a', 'b'];
const elements = [0, 1, 2];
array.push.apply(array, elements);
console.info(array); // ["a", "b", 0, 1, 2]
```

You can use '...' for a more concise syntax like so:

```javascript
const array = ['a', 'b'];
const elements = [0, 1, 2];
array.push(...elements);
console.info(array); // ["a", "b", 0, 1, 2]
```

> For more details on how `apply()` works, you can read up at https://www.w3schools.com/js/js\_function\_apply.asp.

### 3\. Array as a function argument

You can also use the spread operator to supply an array as a function argument.

```javascript
function sum(x, y, z) {
  return x + y + z;
}
const num = [1, 2, 3];
console.log(sum(...num)); //6
```

## Arrays/Strings

### 1\. Copy an array

This is one of the most useful ways to use the spread operator. Easily copy an array with:

```javascript
const arr = [1, 2, 3];
const arr2 = [...arr];
```

And now, arr2 instantly becomes a copy of arr! Any changes you make to either arrays would not affect the other!

> Important: '...' only copies arrays one level deep. Multidimensional arrays will be affected if either arrays have changes made to them!

### 2\. Insert new elements

Without using methods like `splice()` and `concat()`, the spread operator allows a much simpler way to insert new elements easily between existing elements in an array.

Here's a short example:

```javascript
const middle = [3, 4]; 
const numList = [1, 2, ...middle, 5]; 
console.log(numList); //  [1,2,3,4,5]
```

> For more details on how `splice()` works, you can read up at https://www.w3schools.com/jsref/jsref\_splice.asp.

### 3\. Combine 2 arrays

Instead of using `concat()`, you can use '...' to concatenate arrays like so:

```javascript
let numList = [1, 2];
let arr2 = [3, 4, 5];

numList = [...numList, ...arr2]; 
console.log(numList); //  [1,2,3,4,5]
```

> For more details on how `concat()` works, you can read up at https://www.w3schools.com/jsref/jsref\_concat\_array.asp.

## Rest Parameter

A rest parameter represents an indefinite amount of arguments as an array. In a function, only the last parameter can be the rest parameter. A good example to illustrate this can be:

```javascript
function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a)
  console.log("b", b)
  console.log("manyMoreArgs", manyMoreArgs)
}

myFun("one", "two", "three", "four", "five", "six")

// Console Output:
// a, one
// b, two
// manyMoreArgs, [three, four, five, six]
```

*(Code from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest\_parameters)*

As seen above, `...manyMoreArgs` has an unknown and indefinite length that the user will supply. In this case, the user supplies 4 and thus, these arguments are represented as an array with 4 elements.

## And that's the power of ...

I hope now you understand the power of the spread operator and how useful it is in JavaScript! Incorporating it in your projects can help you learn how to use it for all sorts of uses! Like removing duplicates in an array, replace `unshift()` and various common array methods and more!

Please share your questions or thoughts below. Thanks for reading! Cheers!