JavaScript spread operator: To infinity and beyond!
Tags: Javascript Development, JavaScript, Arrays, Typescript, Software Development

Photo by Edvin Richardson from Pexels

Three dots can make a huge difference in a sentence. In JavaScript, this is not the exception. In JavaScript, the spread operator is identified by using three dots. This syntax is very powerful because it allows you to perform plenty of different tasks in a very simple and easy way.

Let’s go over some examples of how to use this syntax on JavaScript.

Passing arrays as arguments

The spread operator lets you grab an array, and decompose it in such a way that now you can have each one of the values out of it and can be passed as arguments to a function.

Let’s start by assuming you have the following code. A function that takes in three arguments and logs them separated by commas and an array with three elements.

const fun = (a, b, c) => console.log(`${a}, ${b}, ${c}`);

const arr = [0, 1, 2];

You could do this in a simple but not ideal way. This is, to take each one of the elements out of the array by their indexes and passing them as arguments.

const fun = (a, b, c) => console.log(`${a}, ${b}, ${c}`);

const arr = [0, 1, 2]; fun(arr[0], arr[1], arr[2]);

By using the spread syntax, there’s a more elegant (and safe) way of doing this. As you can see, when using the spread operator, now it passes in all the three elements as arguments to the fun function and no need to worry about indexes anymore.

const fun = (a, b, c) => console.log(`${a}, ${b}, ${c}`);

const arr = [0, 1, 2]; fun(...arr);

Copying objects

Another useful use case for the spread operator is that you can use it to copy objects. Let’s say you want to make a copy of obj1 and copy it to obj2. Finally, you will like to change the property a’s value on obj2 to be 3.

Your first thought might be to do the following…

const obj1 = { a: 1, b: 2, c: 3 };

const obj2 = obj1; obj2.a = 3; console.log(obj1);

console.log(obj2);

In this case, even though you think you are changing the value of obj2’s a to 3, when you instantiated obj2, you are assigning a reference to obj1 and not making a copy.

You might have also thought about doing copying the properties manually. While this example will work, it doesn’t scale. This is because if you end up adding more properties to obj1, this might lead to bugs in the future because of the manual effort of copying the object.

const obj1 = { a: 1, b: 2, c: 3 };

const obj2 = { a: obj1.a, b: obj1.b, c: obj1.c }; obj2.a = 3; console.log(obj1);

console.log(obj2);

There are other ways in which we could dot his safely, but we’ll focus for now on how to do it using the spread operator. In this example, you can instantiate obj2 to be equal obj1 but you will surround it with curly braces and use the spread operator in front of it.

const obj1 = { a: 1, b: 2, c: 3 };

const obj2 = { ...obj1 }; obj2.a = 3; console.log(obj1);

console.log(obj2);

In this last code snippet, as you can see, what we do now is to leverage the spread operator to build obj2. This will be creating a new object identical to obj1.

Concatenating arrays

Let’s now assume you want to take two arrays and join them into a single one. There are multiple ways in which you can do this.

To do this using the spread operator is once again… very simple. You will first start by creating a new array where you insert both arrays and prefix them with the spread operator.

const a = [1, 2, 3];

const b = [4, 5, 6]; const c = [...a, ...b]; console.log(c);

As you’ve seen the spread operator shines in multiple areas where it makes writing code in JavaScript simpler and some cases less prone to errors. Enjoy!