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:

<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:

import React from "react"

export const Person = () => {
  const { firstName, lastName, age } = person
  return (
    <div>
      <p>
        Name :{firstName} {lastName}
      </p>
      <p>Age :{age}</p>
    </div>
  )
}

const App = () => {
  const person = { firstName: "John", lastName: "Doe", age: 32 }
  return (
    <Person
      firstName={person.firstName}
      lastName={person.lastName}
      age={person.age}
    />
  )
}

export 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:

import React from "react"

export const Person = () => {
  const { firstName, lastName, age } = person
  return (
    <div>
      <p>
        Name :{firstName} {lastName}
      </p>
      <p>Age :{age}</p>
    </div>
  )
}

const App = () => {
  const person = { firstName: "John", lastName: "Doe", age: 32 }
  return <Person {...person} />
}

export 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:

const arr1 = [1, 2, 3]
const arr2 = [...arr1]
arr2[2] = 4
console.log(arr1) // [1, 2, 3]
console.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:

const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const arr3 = [...arr1, ...arr2]
console.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:

const arr1 = [1, 2, 3]
const arr2 = [0, ...arr1]
const arr3 = [...arr1, 4]
console.log(arr2) // [0, 1, 2, 3]
console.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:

const sum = (a, b, c) => {
  return a + b + c
}

const arr1 = [1, 2, 3]

sum(...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:

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

Combining 2 objects

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

const obj1 = { firstName: "John" }
const obj2 = { lastName: "Doe", age: 32 }
const person = { ...obj1, ...obj2 }
console.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:

const obj1 = { firstName: "John", lastName: "Doe" }
const person = { ...obj1, age: 32, profession: "Full Stack Developer" }
console.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:

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