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:

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():

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:

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.

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:

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:

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:

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:

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!

Comments

[Shrihan]

You can even merge two objects using ...:

const obj1 = {foo: 1, bar: 2};
const obj2 = {baz: 3};
const obj = {...obj1, ...obj2};
console.log(obj); //{foo: 1, bar: 2, baz: 3}