ES6: Rest/Spread Operator in JavaScript

Let’s go over how we can use ES6 feature rest and spread operators to make our code more flexible.

Rest

One very common use case of rest operator is when we are dealing with an indefinite number of arguments passed into a function. Let’s take an example of a function that will take in an argument and print that argument:

function printMe(a) {
  console.log(a)
}

What if we want to pass two arguments?

function printMe(a, b) {
  console.log(a)
  console.log(b)
}

What if we want to pass n number of arguments?

We start see that this is becoming a very annoying process as we need to keep editing the function depending on how many arguments we’re expecting. This is where rest operator can be used to make our lives much easier.

Rest operator is denoted with three periods (…) and it will group all the arguments passed in as an array. So, let’s take a look at how our function will look like using the rest operator:

function printMe(...args) {
  args.forEach(arg => console.log(arg))
}

Because the rest operator groups the arguments as an array, we can iterate through it and do whatever operation we need to do using the array. This is very useful whenever we need to create function that will take various number of arguments as parameters.

Another cool thing about the rest operator is that we can use it with a normal passing of an argument.

function printMe(a, b, ...args) {
  console.log(a)
  console.log(b) 
  args.forEach(arg => console.log(arg))
}

*Note: The arguments that you want to use the rest operator must be at the end of the list of arguments like we have in the code block above.

Spread

The spread operator is sort of the opposite of the rest operator. Instead of grouping the list of elements as an array, the spread operator will create a list of elements from a list. Let’s take an example of a function that takes in three arguments and return the product of the three:

function multiplyMe(a, b, c) {
  return a * b *c
}

var list = [1, 2, 3]

multiplyMe(list[0], list[1], list[2])
=> 6

The function above is very simple to use since we only need to pass two values to the function.

Some of you will notice the problem from just this code block.

If we have an array with large length and it’s a very tedious work to pass each element like we have done above. This is when the spread operator can reduce the time and allow us to handle wide range of cases. So let’s take a look at the same function but passing in the arguments using the spread operator:

function multiplyMe(a, b, c) {
  return a * b * c
}

var list = [1, 2, 3]

multiplyMe(...list) // same as multiplyMe(1, 2, 3)
=> 6

There are couple of more use cases of the spread operator other than passing arguments into a function: array literal and object literal.

Array Literal

var list = [1, 2, 3]

var newList = [...list, 4, 5, 6]
=> [1, 2, 3, 4, 5, 6]

Object Literal

var object = {
  'a': 0,
  'b': 1,
  'c': 2
}

var newObject = {...object, 'd': 3, 'e': 4}
=> {'a': 0, 'b': 1, 'c': 2, 'd': 3, 'e': 4}

Those are rest & spread operators!

Thank you so much everyone for the read! You can also check my other JavaScript posts through my profile.

Basics of JavaScript:

Variable: https://readmedium.com/basics-of-javascript-variable-3eb6f4f0af18

Data Types: https://readmedium.com/basics-of-javascript-data-types-385bab24b51

JavaScript Fundamentals

Prototypal Inheritance: https://readmedium.com/javascript-fundamental-prototypal-inheritance-9153ab434aae

Merge Sort

Merge Sort Algorithm in JavaScript: https://readmedium.com/javascript-merge-sort-3205891ac060