JavaScript Spread & Rest Operators

The Spread and Rest operators are very strong tools for JavaScript and react projects. Actually it’s only one operator with three dots|…|. If we call it spread or rest depending on where we want to use it, the spread operator is used to split array elements or object properties. We spread the array or object with this method.

For example, If we have an old array and we want to add all the elements from old array to new array and additionally add one or two elements. The syntax should be as follows.

As you see three dots|…| the front of the old array will simply pull out all the elements and add it to the new array which we created. We can add more elements into it. We just use the normal syntax with square brackets to create an array. We can do the same thing for objects as well. We can create a new object with curly braces with the new prop but then we also have need spread operator which means |…|. Spread operators help us to pull out all the properties of the old object and their values to add them as key value pairs to the new object. If the old object also has a new property it would be overwritten by a new prop “5” like the example above. Our own property takes precedence. This is how the spread operator works.

Rest Operator

The Rest operator is the same operator as the spread operator but we used it differently in the following example. It’s used to merge a list of the function arguments into an array. It shows us where to use the Rest Operator.

We use it in a function argument list. sortArg receives an unlimited amount of arguments. One argument, two arguments, three or whatever argument you want to pass in the function. We just need to write one argument(args) with |…|but we may actually get more than one and they will be merged into an array together. Then we can apply array methods to our argument list whichever way is convenient for us to store arguments.

Let’s have a deeper look at console!

output

Breaking down the codes

We created an array of numbers = [1,2,3,4]

We also created a new array which calls newNumbers with |…|

Then old array of numbers and adding new number |4 |

If we run the function above and console.log(newNumbers)

We will have all numbers from the old array and have them together in our newArray.
Output = [1,2,3,4]

As we see in the examples above; The spread operator is copying properties for arrays or objects and adding properties from old arrays or objects and adding them in a new object or array with the same key and value pair.

Lets see how the spread operator works for object

output

Breaking down the codes

I created a person object with a name property;

I also created newPerson object which called newPerson;

Then we used spread operator | … | on the person object to copy all the property value pairs of the old object and add the

new property-> age: 20 ->(new value)

if we console.log(newPerson) We can see our newPerson object is copied property name from original array object and added new property age and key value in the newPerson.

Rest operator in JS

Output

Breaking down the codes

I implemented a Filter function which is called filter , We will use ES6 arrow function. We had a couple of arguments with|…| in front of it. We can also use inline syntax to have them in one line.

Then we return args and we call built-in filter method which is available on arrays.Dont forget |…| on the example used for Rest operator and merges the arguments into an array. We can use array methods like filter. The filter executed a function on every element in the passed array.

We get our element by using the inline arrow function to return true or false. Which filter expects if the element is equal to number(1). Three equal signs check for type and value equality so the el also has to be a number. This is just an arrow function that we pass to the built-in filter method.

When we call console.log(filter(1,2,3) we have to result number one which is equal the number of the element of the arrays arguments

The spread operator is useful for many different routine tasks in JavaScript, including the following:

  • Copying an array
  • Concatenating or combining arrays
  • Using Math functions
  • Using an array as arguments
  • Adding an item to a list
  • Adding to state in React
  • Combining objects
  • Converting NodeList to an array

In each case, the spread syntax expands an iterable object, usually an array, though it can be used on any interable, including a string.

Destructuring

Destructuring means taking out ( technically, making a copy of ) individual items from an object or an array and assigning them to a variable. Example ( with arrays) —

Notice the bold line. To the left of the = sign, we declared the variables which will hold the extracted values. We use const because we intend to make the variables constant. let could have also been used instead. Then, we wrote the names of the variables in an array-like syntax, that is, beginning and ending with a [ and ] since we are destructuring from an array.

Notice two consecutive commas in [ houseNo, , city ]. It may not feel like natural array syntax. It looks like it is missing something in between those two commas. Your intuition is right. We can omit values from being destructured. If a variable name is not specified, the value is not assigned to anything.

Software Engineer | Ruby on Rails | JavaScript | HTML5 | CSS | PostgreSQL | React | Redux