What are three dots (...) or spread operators in React

You might have often seen code in React where they have used three dots (...) ahead of a variable, as shown below:

1<Component {...props} />

These are called spread operators in JavaScript and this article, we will see the different use cases of how spread operators can be used in React and JavaScript.

Passing props using the spread operator

Say you have a component called Person and you want to pass three different properties, firstName, lastName, and age. Traditionally we would pass them as shown below:

1import React from "react"
2
3export const Person = () => {
4  const { firstName, lastName, age } = person
5  return (
6    <div>
7      <p>
8        Name :{firstName} {lastName}
9      </p>
10      <p>Age :{age}</p>
11    </div>
12  )
13}
14
15const App = () => {
16  const person = { firstName: "John", lastName: "Doe", age: 32 }
17  return (
18    <Person
19      firstName={person.firstName}
20      lastName={person.lastName}
21      age={person.age}
22    />
23  )
24}
25
26export default App

Notice that we will access each property and write it individually. As the number of properties grow, the code becomes bulky. We can use spread operator here to pass all the properties inside the person object as shown below:

1import React from "react"
2
3export const Person = () => {
4  const { firstName, lastName, age } = person
5  return (
6    <div>
7      <p>
8        Name :{firstName} {lastName}
9      </p>
10      <p>Age :{age}</p>
11    </div>
12  )
13}
14
15const App = () => {
16  const person = { firstName: "John", lastName: "Doe", age: 32 }
17  return <Person {...person} />
18}
19
20export default App

Arrays and spread operator

Spread operator can also be used for performing different array operations

Creating a copy of an array

We can copy items for an array to another array using spread operator as shown below:

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

Note that the original array will not be impacted when we modify the copy of the array. Also, note that it does a shallow copy, that is, it copies only the items at the top level by value and all the nested properties will be copied by reference.

Combining 2 arrays

We can combine 2 arrays and create a new array as shown below, using spread operators:

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

Adding items to an array

While copying an array, we can add an element to the beginning or to the end:

1const arr1 = [1, 2, 3]
2const arr2 = [0, ...arr1]
3const arr3 = [...arr1, 4]
4console.log(arr2) // [0, 1, 2, 3]
5console.log(arr3) // [1, 2, 3, 4]

In my previous article, I have explained how to add an item in between the array.

Passing arrays to a function

We can use spread operator to pass an array to a function as separate arguments:

1const sum = (a, b, c) => {
2  return a + b + c
3}
4
5const arr1 = [1, 2, 3]
6
7sum(...arr1)

Spread operator for Object operations

Now, let's see different object operations that can be performed using the spread operator.

Copying items of an object

Similar to arrays, we can create shallow copy of an object:

1const obj1 = { firstName: "John", lastName: "Doe", age: 32 }
2const person = { ...obj1 }
3console.log(person) // {firstName: 'John', lastName: 'Doe', age: 32}

Combining 2 objects

Similar to arrays, we can combine 2 objects as shown below:

1const obj1 = { firstName: "John" }
2const obj2 = { lastName: "Doe", age: 32 }
3const person = { ...obj1, ...obj2 }
4console.log(person) // {firstName: 'John', lastName: 'Doe', age: 32}

If the same property is present in both the objects, then the property of the left object will be replaced by the property of the right object in the created copy.

Adding a prop while copying the object

We can add additional properties while copying the object:

1const obj1 = { firstName: "John", lastName: "Doe" }
2const person = { ...obj1, age: 32, profession: "Full Stack Developer" }
3console.log(person) // {firstName: 'John', lastName: 'Doe', age: 32, profession: 'Full Stack Developer'}

Updating existing properties of the object

Similar to adding props, we can update existing properties as well:

1const obj1 = {
2  firstName: "John",
3  lastName: "Doe",
4  age: 32,
5  profession: "Full Stack Developer",
6}
7const person = { ...obj1, age: 33 }
8console.log(person) //{firstName: 'John', lastName: 'Doe', age: 33, profession: 'Full Stack Developer'}

Do follow me on twitter where I post developer insights more often!