2 min read
Uses of JavaScript Spread Operator
Last Update: 10 June, 2022Spread operator can be used to make everything a lot easier when working with arrays and objects in JavaScript. Non-mutating operations can be done using this operator as well. When a function is expecting zero or more arguments you can again make use of spread operator.
§In Arrays and Objects
Spread operator (...) is commonly used for concatenating arrays or to add an item to an existing array. A very simple example could look like this:
let nums = [1,2,3,4]
let five = [5]
nums = [...nums, ...five]
console.log(nums) // [ 1, 2, 3, 4, 5 ]
The usage of spread operator in objects is also very similar:
let person = { name: "ilker", age: 28 }
let job = { job: "web dev" }
let newPerson = {...person, ...job}
console.log(newPerson) // { name: 'ilker', age: 28, job: 'web dev' }
In cases that require non-mutating operations we can consider using spread operator. Object.assign() would perform a muating operation while spread operator will be non-mutating. Let's say I turned 29 and age value in my object has to be updated:
let person = { name: "ilker", age: 28 }
let job = { job: "web dev" }
let newAge = { age: 29 }
let newPerson = {...person, ...newAge, ...job}
console.log(newPerson) // { name: 'ilker', age: 29, job: 'web dev' }
Copying an array and creating a clone using spread operator is also possible. We can create two seperate array this way that occupies two different spaces in the memory:
const arr = [1, 2, 3, 4]
const arr2 = [...array]
arrayClone.push(5)
console.log(arr) // [1, 2, 3, 4]
console.log(arr2) // [1, 2, 3, 4, 5]
§In Array Destructuring
Spread operator can be also used in destructuring an array. Let's say we need to get the first and the second elements of an array. Normally you would get the first and second this way :
let fruits = ["peach", "apricot", "apple", "pear", "cherry"]
let first = fruits[0]
let second = fruits[1]
console.log(first) // peach
console.log(second) // apricot
We can replace this functionality using array destructuring this way in one line:
let fruits = ["peach", "apricot", "apple", "pear", "cherry"]
let [ first, second ] = fruits
console.log(first) // peach
console.log(second) // apricot
As you can see the console gives out the same results. Let's say that you need to get the rest of the elements from this array. You don't need to deal with any array methods. You can just use the spread operator this way:
let fruits = ["peach", "apricot", "apple", "pear", "cherry"]
let [ first, second, ...rest ] = fruits
console.log(first) // peach
console.log(second) // apricot
console.log(rest) // [ 'apple', 'pear', 'cherry' ]
Now the rest gets all the remaining elements from the array. How easy was that!
This method of destructuring applies also to the objects:
const person = { name: 'ilker', age: 28, job: 'web dev' }
const { name, ...rest } = person
console.log(name) // ilker
console.log(rest) // { age: 28, job: 'web dev' }
§In Functions
Spread operator apply to some edge cases in functions. An example would work better for functions I believe:
const func = (a,b,c,d) => {
return [a,b,c,d]
}
const arr = [ 1, 2, 3, 4, 5 ];
console.log(func(...arr)) [ 1, 2, 3, 4 ]
As you can see that the function only accepts the first 4 elements as arguments and executes without throwing an error. I'm sure you can find couple of uses cases for this method of using spread operator.
§Conclusion
I intentionally kept this post as short as possible in order to touch the most important parts only. I am personally tired of posts that take too long to get to the point.
Learning about spread operator made working with arrays and objects a lot easier for me. There are many cases that call for the usage of spread operator. Next time you are coding just think about where you can use spread operator to make you code cleaner.
Ilker AkbiyikTable of Contents
Related Posts
