How to use spread operator in JavaScript? [SOLVED]

What is spread operator in JavaScript?

The spread operator is a feature of JavaScript that allows an iterable (such as an array or a string) to be expanded, or "spread," into individual elements. It is denoted by three dots (...) and is most commonly used in function calls, array literals, and object literals.

Before ES6, interacting with an arbitrary amount of function parameters was complicated. You had to use arguments, which isn’t an array but has a length property. Usually you’d end up casting the arguments object into an actual array using Array#slice.call, and going from there, as shown in the following snippet.

function join() {
  var list = Array.prototype.slice.call(arguments)
  return list.join(', ')
}
join('first', 'second', 'third')
// <- 'first, second, third'

There are different areas where spread operators are used from function calls to object literals. In this article, we will discuss the different areas the spread operator is used.

 

Using spread operators with function calls

One of the most popular uses of the spread operator is within function calls. The spread operator can be used to pass the elements of an array as individual arguments to a function. This can be particularly useful when you want to pass the elements of an array as individual arguments to a function.

Here is an example of how we can pass an array elements as the argument to a function.

function sum(a, b, c) {
    return a + b + c;
}

const numbers = [1, 2, 3];
console.log(sum(...numbers));

Output

6

This is equivalent to calling sum(1, 2, 3).

 

Using spread operators with array literals

Another way the spread operator can be used is with arrays. The spread operator can also be used to create a new array by combining multiple arrays. The spread operator will expand the array elements it is applied upon.

Let’s illustrate this by applying the spread operator on two arrays within a new array that will contain the elements of the two arrays.

const a = [1, 2, 3];
const b = [4, 5, 6];
const c = [...a, ...b];

console.log(c);

Output

[ 1, 2, 3, 4, 5, 6 ]

This creates a new array c that consists of the elements of a followed by the elements of b.

In addition, the spread operator can also be used to create a copy of an array

let array = [1, 2, 3];
let copy = [...array];

console.log(copy);

Output

[ 1, 2, 3 ]

In this example, the copy array is created by using the spread operator to expand the array into a list of individual elements, which are then combined into a new array literal. The resulting array will contain the same elements as array.

 

Using spread operators with object literals

The spread operator can be used to create a new object by copying the properties of one or more objects. Just like with arrays, when we apply spread operator to expand all the key and their corresponding properties to be added to the new object.

Here is an example of how to use spread operators with object literals.

const a = { x: 1, y: 2 };
const b = { z: 3 };
const c = { ...a, ...b };

console.log(c);

Output

{ x: 1, y: 2, z: 3 }

This creates a new object c that has the properties of a and b. If both objects have a property with the same name, the property in the object listed later in the spread takes precedence.

 

Using spread operators on strings

The spread operator can also be used to split a string into an array of individual characters. Here, the characters of the string are expanded to be added to an array.

Here is an example of how we can use spread operators on strings

let string = "hello";
let chars = [...string];

console.log(chars);

Output

[ 'h', 'e', 'l', 'l', 'o' ]

In this example, the chars array is created by using the spread operator to expand the string into a list of individual characters, which are then combined into an array literal. The resulting array will contain the individual characters of the string in the order they appear.

The spread operator can also be used to combine an array of characters into a single string:

let chars = ["h", "e", "l", "l", "o"];
let string = [...chars].join("");

console.log(string);

Output

hello

In this example, the string is created by using the spread operator to expand the chars array into a list of individual characters, which are then combined into a new array literal using the join method. The join method concatenates all the elements of the array into a single string, separated by the specified delimiter (in this case, an empty string).

 

Shifting and spreading

When you want to extract an element or two from the beginning of an array, the common approach is to use .shift. While functional, the following snippet of code can be hard to understand at a glance, because it uses .shift twice to grab a different item from the beginning of the list each time. The focus is, like in many other pre-ES6 situations, placed on getting the language to do what we want.

var list = ['a', 'b', 'c', 'd', 'e']
var first = list.shift()
var second = list.shift()
console.log(first)
// <- 'a'

In ES6, you can combine spread with array destructuring. The following piece of code is similar to the preceding one, except we’re using a single line of code, and that single line is more descriptive of what we’re doing than repeatedly calling list.shift() in the previous example.

var [first, second, ...other] = ['a', 'b', 'c', 'd', 'e']
console.log(other)
// <- ['c', 'd', 'e']

Using the spread operator you can focus on implementing the functionality you need while the language stays out of the way. Improving expressiveness and decreasing time spent working around language limitations is a common pattern we can observe in ES6 features.

 

Summary

The spread operator (...) is a feature of JavaScript that allows an iterable object, such as an array, to be expanded into a list of individual elements. It can be used in a variety of contexts, including function calls, array literals, strings, and object literals.

The spread operator is a convenient and concise way to manipulate and combine iterable objects in JavaScript. It can greatly improve the readability and maintainability of your code, particularly when working with higher-order functions and complex data structures.

 

References

Spread syntax (...) - JavaScript | MDN (mozilla.org)