The Spread Operator in Javascript & React
A basic intro/refresher course on how spread operators work in JS & React!
What is the spread operator?
The spread operator {…} or […] is a manipulation method used on iterables like array’s or objects to expand them, while taking 0+ arguments in its place. It is a non-destructive method, which means that the original iterable the method was called on will not be changed. It could replace harmful manipulation methods such as .concat() and .splice() . Let’s take a look and see how it works.
let jungle_reptiles = ['Python', 'Chameleon']
let jungle_birds = ['Tucan', 'Parrot']
let joined_array = [...jungle_reptiles,...jungle_birds]console.log(joined_array)
// => ['Python', 'Chameleon', 'Tucan', 'Parrot']console.log(jungle_birds)
// => ['Tucan', 'Parrot']console.log(jungle_reptiles)
// => ['Python', 'Chameleon']
As you can see, the original array’s stayed the same while still using their contents to join the two and form a new one. What if we wanted to copy the content of this new joined_array and save it to another?
let joined_array = ['Python', 'Chameleon', 'Tucan', 'Parrot']
let joined_array2 = [...joined_array]console.log(joined_array2)
// => ['Python', 'Chameleon', 'Tucan', 'Parrot']
console.log(joined_array)
// => ['Python', 'Chameleon', 'Tucan', 'Parrot']
joined_array2 = ['Tiger', ...joined_array]console.log(joined_array2)
// => ['Tiger', 'Python', 'Chameleon', 'Tucan', 'Parrot']
console.log(joined_array)
// => ['Python', 'Chameleon', 'Tucan', 'Parrot']
Under the hood, both of these arrays have two different places in memory, which is why the original array isn’t getting manipulated. What happens if we instead set both variables directly equal to each other and used the .unshift() method instead of the spread operator when we added 'Tiger' ?
let joined_array = ['Python', 'Chameleon', 'Tucan', 'Parrot']
let joined_array2 = joined_array
joined_array2.unshift('Tiger')console.log(joined_array)
// => ['Tiger', 'Python', 'Chameleon', 'Tucan', 'Parrot']console.log(joined_array2)
// => ['Tiger', 'Python', 'Chameleon', 'Tucan', 'Parrot']
Since joined_array2 and joined_array both had the same place in memory, using a destructive method on one affected the other. Here is what the spread operator looks like when we use it with objects!
let celebrity = {
name: 'Ariana Grande',
occupation: 'Pop Star'
}let updated_celeb = {
...celebrity,
age: 26
}console.log(updated_celeb)
// => { name: 'Ariana Grande', occupation: 'Pop Star', age: 26 }
console.log(celebrity)
// => { name: 'Ariana Grande', occupation: 'Pop Star' }
In React, you could use the spread operator in many cases, one being if you want to update your state! For example, let’s say you have an application where every time a user fills out a form that just consists of submitting their favorite animal, and you have an initial state set to an array that is eventually going to hold all of the new entries. We could implement the spread operator like this:
addAnimal(newAnimal) {
let newAnimal = [...this.state.animals, newAnimal]
this.setState({
animals: newAnimal
})
}What we are saying here is basically to give the new statea value of its original values, plus the ones the user adds with the form. It’s best to use methods like the spread operator in cases like these because you will always have a copy of your original iterable no matter how much you manipulate it with the spread operator. If you would like to read more documentation on how this wonderful method works check out the links below!
Happy Coding!
