JavaScript Spread Operator: What Does It Bring to JS Community?

The JavaScript ES6 standard was a breath of fresh air for the whole JS community back then as it provided a new neat syntax which enabled developers to write more maintainable and accurate code. As well, the new standard introduced a lot of important features and one of the most significant ones was the spread operator. It proved to be so valuable that it is now impossible to imagine the current day-to-day development routine without these magical three dots.

What is a spread operator?

As can be guessed from its name, the spread operator is ‘spreading’ the iterable objects into a list of its elements. in other words, it gives you the “content” of these objects. By iterable objects we mean the structures that can be looped through – arrays, objects and strings. If it sounds a bit tricky, don’t worry – we will elaborate it in examples below. Let’s see how exactly a spread operator benefits JavaScript developers and where it can be applied.

Dynamic function arguments

Spread operator is extremely useful for passing dynamic parameters count to functions. A good example is the push array method. Let’s imagine that you have a dynamic array of values that needs to be passed as parameters to the `push` function. Before the ES6 era, developers had to do it via calling `apply` or `forEach` loop.

let basket = [];
let products = ["bread", "milk", "bread"];
Array.prototype.push.apply(basket, products)
console.log(basket); // ["bread", "milk", "bread"];
basket = [];
products.forEach(product => { basket.push(product); })
console.log(basket); // ["bread", "milk", "bread"];

Even though it works, it looks quite complicated. Hopefully we have the spread now. Compare how neat and handy it looks after using the spread:

let basket = [];
let products = ["bread", "milk", "bread"];
basket.push(...products);
console.log(basket); // ["bread", "milk", "bread"]

Operations with arrays

The spread operator is often used for manipulations with arrays. A very common use case is the concatenation of two arrays. It can be done through our well-known method – the `concat` function:

let fruits = ["banana", "apple"];
let vegetables = ["tomato", "cucumber"];
let basket = fruits.concat(vegetables); // ["banana", "apple", "tomato", "cucumber"] 

However we can do the same operation with `…` and it looks much more expressive:

let fruits = ["banana", "apple"];
let vegetables = ["tomato", "cucumber"];
let basket = [...fruits, ...vegetables]; // ["banana", "apple", "tomato", "cucumber"] 

The `…` can be used for copying arrays as well:

let fruits = ["banana", "apple"];
let copyFruits = [...fruits]; //["banana", "apple"]

Operations with objects

The ES standard from 2018 introduced the spread operator for the objects. It was a predictable enhancement and a great replacement for `Object.assign` in terms of copying and combining the objects. Compare how it looks with `Object.assign:

let cat = { 
  age: 3,
  sex: 'male'
};
let copyCat = Object.assign({}, cat, { age: 5, color: 'brown' }); 
// { age: 5, color: "brown", sex: "male" }

And how the same piece of code looks with spread:

let cat = { 
  age: 3,
  sex: 'male'
};
let copyCat = { ...cat, age: 5, color: 'brown' }; 
// { age: 5, color: "brown", sex: "male" }

As you can see, with the spread operator the code looks cleaner. Most importantly, the spread operator lets you use the same construction for manipulation with objects and arrays.

Convert string to letters

Another usage of the spread operator implies splitting the string:

const text = 'split me';
const letters = [...text];
console.log(letters); // ["s", "p", "l", "i", "t", " ", "m", "e"]

It might look a bit unusual and the built-in string “split” function seems to be a more straightforward way to perform this operation, but it’s good to know that there is one more option to do so.

Summary

The introduction of the spread operator was a great step forward for the whole JS community. It allows various manipulations with the core JS structures by using compact and expressive syntax and it also allows to build a common mental model for such operations. This, in turn, significantly simplifies the process of reading the code and improves the overall maintainability of the projects.