Javascript Spread Operator Examples

The spread operator, also known as a rest parameter is a welcome addition to JavaScript.

While the syntax can appear a bit strange at first if you’ve never seen it before, you will likely find yourself using it quite frequently in your JavaScript journey.

In this tutorial we’ll go through some of the most common uses of the spread syntax.

Combining Arrays

Perhaps the most commonly seen use for the spread syntax is combining arrays which can be done easily.

arr1 = [1,2,3]
arr2 = [4,5,6]
combinedArray = [...arr1, ...arr2]
console.log(combinedArray)
// [ 1, 2, 3, 4, 5, 6 ]

Combining Objects

Combining objects is similarly easy just changing from the square to curly brackets.

obj1 = { first: 1 }
obj2 = { second: 2 }
combinedObject = {...obj1, ...obj2}
console.log(combinedObject)
// { first: 1, second: 2 }

Add To Array

Adding an element to an array is done like this, and you can create a new array with the editions or overwrite the original array.

arr1 = [1, 2, 3]
arr1 = [...arr1, 4]
console.log(arr1)
// [ 1, 2, 3, 4 ]

Deep Copy Arrays

This is where things get a bit more interesting. You can use the spread operator to make deep copies of an array very easily.

arr = [1, 2, 3, 4, 5, 6]
arrCopy = [...arr]
arr[0] = 0
console.log(arr)
// [ 0, 2, 3, 4, 5, 6 ]
console.log(arrCopy)
// [1, 2, 3, 4, 5, 6]

Deep Copy Objects

A deep copy of an object can similarly be made just by using curly brackets.

obj = { first: 1, second: 2 }
objCopy = {...obj}
obj.first = 0
console.log(obj)
// { first : 1, second: 2}
console.log(objCopy)
// { first : 0, second: 2}

Delete Keys From An Object

Extracting keys from an object can also be done, and this can be a very nice time saver.

This is not exactly deleting keys as the key values are placed in a variable with the same name as the key.

obj = {first: 1, second: 2, third: 3}
let {third, first, ...objPruned} = obj
console.log(objPruned)
// { second: 2 }
console.log(first)
// 1

Convert A String To A Character Array

You can also convert a string to a character array with the spread syntax.

str = "string"
charArray = [...str]
console.log(charArray)
// [ 's', 't', 'r', 'i', 'n', 'g' ]

Convert A Set To An Array

It also works on sets.

mySet = new Set(['a', 'b', 'c'])
console.log(mySet)
// Set(3) { 'a', 'b', 'c' }
myArr = [...mySet]
console.log(myArr)
// [ 'a', 'b', 'c' ]

Convert Function Arguments To An Array

Another handy task you can perform with the spread operator is taking function arguments and converting them to an array by using the spread operator on the arguments operator. Note that this won’t work on arrow syntax functions because they don’t have an arguments object.

myFunc = function(arg1, arg2, arg3) {
    console.log(arguments)
    console.log([...arguments])
}
myFunc(1, 2, 3)
// [Arguments] { '0': 1, '1': 2, '2': 3 }
// [ 1, 2, 3 ]

Spread Operator Performance

Not only is the spread operator some nice syntactic sugar it performs decently.

While extending an array with spread syntax is not quite as fast as push (although it’s pretty close) it is much faster than using concat.

Conclusion

Once you get a hang of the spread operator it’s a very useful syntatic tool to have in the toolbox.

Being able to easily convert almost anything into an array so you to use array methods like some(), every, and filter() is very nice.

There’s many more uses for the spread operator, but hopefully these examples will be helpful and at the very least give you some ideas.