What does React’s “three dots” (…) do?

These 3 dots come from JavaScript language. They aren’t something unique to react. They may be used with arrays, wherein there are referred to as relaxation factors for array destructuring undertaking and unfold factors for array literals. 

This characteristic become added in ES6 model of JavaScript, additionally referred to as ES2015. 

The comparable characteristic become added for gadgets referred to as relaxation residences for item destructuring undertaking and unfold residences for item literals. This characteristic become added in ES9 model of the language specification, additionally referred to as ES2018. But how is this option useful? Let’s take an example. 

I am on developer console of Brave browser, that is primarily based totally on Google’s Chrome browser. 

I will create a variable known as one, which refers to an item with residences, a1 and a2 with the values of one and a couple of respectively.

I’m in the Brave browser’s developer console, which is based on Google’s Chrome browser. In order to refer to an object having two properties, a1 and a2, with values of 1 and 2, respectively, I will construct a variable called one.

Then I create a second variable called two, which has two distinct attributes with the names b1 and b2 with values of 1 and 2, respectively. Let’s imagine I want to save these two objects, one and two, in a new variable named merge The Two and combine them into a single object. How do we combine these items then? The object spread syntax can be useful in this situation.

The properties from the object flatten up when this syntax is used, therefore when one is called with three dots enclosed in curly braces, properties a1 and a2 will open up and merge with the surrounding object. 

By separating the operation with a comma, we can also carry out this procedure on object two. Thus, the merger’s conclusion. Two properties from object one and two each will be present in The Two object’s four properties. Check to check if that is accurate. We can verify that it is true because we can print the object on the console.

utilizing the spread operator to pass props:

Syntax:

<Component {...props} />

Example:

var employee= {
    		name: 'Alma J. Brady',
    		age: 25
}
// The data listed above can be passed as props using the spread operator.

<employee {...employee} />

Or

<employee name={employee.name} age={employee.age}/>

Example:

import React from "react"

export const ProductDetails = () => {
  const { productName, Quantity ,price } = person
  return (
    <div>
        <p>productName :{productName} {category}</p>
	<p>Quantity:{Quantity}</p>
      <p>price :{price}</p>
    </div>
  )
}

const App = () => {
  const ProductDetails = { productName: "Laptop", Quantity: 1, price: 32000 }
  return (
    <Person
      productName={ProductDetails.productName}
      Quantity={ProductDetails.Quantity}
      price={ProductDetails.price}
    />
  )
}

Keep in mind that we will access each property independently and write it. The code enlarges as the number of properties increases. As demonstrated below, we can use the spread operator to convey all the properties included inside the person object:

import React from "react"

export const ProductDetails = () => {
  const { productName, Quantity, price } = person
  return (
    <div>
       <p>productName :{productName} {category}</p>
	<p>Quantity:{Quantity}</p>
      <p>price :{price}</p>

    </div>
  )
}

const App = () => {
  const ProductDetails = { productName: "Laptop", Quantity: 1, price: 32000 }
  return <ProductDetails {...ProductDetails} />
}

export default App

Arrays and spread operator:

1) making a duplicate of an array:

When we edit the duplicate of the array, it should be noted that the original array will not be affected. Also take note that it performs a shallow copy, meaning that all nested properties are duplicated by reference and just the top-level items are copied by value.

const var1 = [a, b, c]
const var2 = [...arr1]
arr2[2] = d
console.log(arr1) // [a, b, c]
console.log(arr2) // [a, b, d]

2) Merging Two arrays:

Using spread operators, we can join two arrays to form a new array as seen below:

const var1 = [a, b, c]
const var2 = [d, e, f]
const var3 = [...arr1, ...arr2]
console.log(var3) // [a, b, c, d, e, f]

3) Including objects to an array:

We can add an element to the start or end of an array while copying it:

const var1 = [a, b, c]
const var2 = [x, ...arr1]
const var3 = [...arr1, y]
console.log(var2) // [x, a, b, c]
console.log(var3) // [a, b, c, y]

4) passing a function a set of arrays:

An array can be passed as distinct arguments to a function using the spread operator:

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

const arr1 = [1, 2, 3]

sum(...arr1)

Object operations with the spread operator:

1) copier an object’s components:

const obj1 = { firstName: "Martha", lastName: "Blanco", age: 22 }
const person = { ...obj1 }
console.log(person) // {firstName: 'Martha', lastName: 'Blanco', age: 22}

2) combining two things:

const obj1 = { firstName: "Martha" }
const obj2 = { lastName: "Blanco", age: 22 }
const person = { ...obj1, ...obj2 }
console.log(person) // {firstName: 'Martha', lastName: 'Blanco', age: 22}

4) While cloning the object, adding a prop:

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

4) updating the object’s current properties:

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

Conclusion:

You now understand the significance of the JavaScript three dots operator. You’ve also seen the multiple uses for the three dots operator and its two distinct interpretations.