1. React Native tutorial

What is Spread Operator in react.js

The spread operator is three dots (…) that perform several different tasks. First, the
spread operator allows us to combine the contents of arrays. For example, if we had
two arrays, we could make a third array that combines the two arrays into one:

Example

var peaks = ["Tallac", "Ralston", "Rose"]
var canyons = ["Ward", "Blackwood"]
var tahoe = […peaks, …canyons]
console.log(tahoe.join(', ')) // Tallac, Ralston, Rose, Ward, Blackwood

Let’s take a look at how the spread operator can help us deal with a problem. Using
the peaks array from the previous sample, let’s imagine that we wanted to grab the
last item from the array instead of the primary .

We could use the Array.reverse method to reverse the array in combination with array destructuring:

var peaks = ["Tallac", "Ralston", "Rose"]
var [last] = peaks.reverse()
console.log(last) // Rose
console.log(peaks.join(', ')) // Rose, Ralston, Tallac

The reverse function has actually altered or mutated the array. In a world with the spread operator, we don’t have to mutate the original array; we can create a replica of the array then reverse it:

var peaks = ["Tallac", "Ralston", "Rose"]
var [last] = […peaks].reverse()
console.log(last) // Rose
console.log(peaks.join(', ')) // Tallac, Ralston, Rose

Since we used the spread operator to copy the array, the peaks array is still intact and
can be used later in its original form.

The spread operator can also be used to get some, or the rest, of the items in the
array:

var lakes = ["Donner", "Marlette", "Fallen Leaf", "Cascade"]
var [first, …rest] = lakes
console.log(rest.join(", ")) // "Marlette, Fallen Leaf, Cascade"

We can also use the spread operator to collect function arguments as an array. Here,
we build a function that takes in n number of arguments using the spread operator,
and then uses those arguments to print some console messages:

function directions(…args) {
var [start, …remaining] = args
var [finish, …stops] = remaining.reverse()
console.log(drive through ${args.length} towns)
console.log(start in ${start})
console.log(the destination is ${finish})
console.log(stopping ${stops.length} times in between)
}
directions(
"Truckee",
"Tahoe City",
"Sunnyside",
"Homewood",
"Tahoma"
)

The directions function takes within the arguments using the spread operator. The first
argument is assigned to the start variable. The last argument is assigned to a finish
variable using Array.reverse.

We then use the length of the arguments array to display how many towns we’re going through. The number of stops is the length of the arguments array minus the finish stop.

This provides incredible flexibility because we could use the directions function to handle any number of stops. The spread operator also can be used for objects.

2 Using the spread operator with objects is similar to using it with arrays. In this example, we’ll use it the same way we combined two arrays into a third array, but instead of arrays, we’ll use objects:

var morning = {
breakfast: "oatmeal",
lunch: "peanut butter and jelly"
}
var dinner = "mac and cheese"
var backpackingMeals = {
…morning,
dinner
}
console.log(backpackingMeals) // { breakfast: "oatmeal",
// lunch: "peanut butter and jelly",
// dinner: "mac and cheese"}

If you like this post, don’t forget to share 🙂

This article is written by our awesome writer
Comments to: What is Spread Operator in react.js

Your email address will not be published. Required fields are marked *

Attach images - Only PNG, JPG, JPEG and GIF are supported.

New Dark Mode Is Here

Sign In to access the new Dark Mode reading option.

Join our Newsletter

Get our monthly recap with the latest news, articles and resources.

By subscribing you agree to our Privacy Policy.

Latest Articles

Explore Tutorials By Categories

About

Codeverb is simply an all in one interactive learning portal, we regularly add new topics and keep improving the existing ones, if you have any suggestions, questions, bugs issue or any other queries you can simply reach us via the contact page

Login

Welcome to Codeverb

Ready to learn something new?
Join Codeverb!

Read Smart, Save Time
  •  
    Strength indicator
  •  
  •  
    Log In | Lost Password