Worth to know this too in JavaScript — Part 02

This is the second part of the series of small tutorials/articles about some of the cool features in JavaScript sometimes we don’t use very often but are worth knowing. If you haven’t checked my previous article, which is the first part of this series, where I’ve explained about JavaScript Optional Chaining Operator, I’d like to invite you to read it as well. Let’s get started 😎

2) Rest and Spread

Syntax:- …arg (three dots and the argument)

Even though the syntax seems equal for both rest and the spread, actually the one will be the complete opposite of the other. First, let’s have a look at the rest parameter.

Rest Parameter

The rest parameter allows a function to accept an indefinite number of arguments as an array.

For example, let’s imagine we have an array of numbers that we need to calculate the sum of the values of that array. So we have to create a function to accept the values of that array and accumulate each value together and return it. But the problem is we don’t know how many elements are there inside the array, hence not possible to define the arguments in the function definition.

In the example above, to get the accumulated result each time, we have to adjust the function’s definition. But how can we do this dynamically and returns the accumulated result no matter how many arguments we passed to that function? The rest parameter will be the saviour.

The rest parameter (three dots) will collect all of the arguments which have been passed into the function, as an array.

Now, the arguments are treated as one single array so we can do anything legitimate for an array to return the sum. In the example above I’ve used the JavaScript array reduce method, but it’s also possible to use for…of since our arguments are now a single array.

The cool thing is, not only get the arguments as one single array, we can even extract some of the individual arguments out from that arguments list.

Please be aware, you only can use the rest parameter at the end of the arguments list. Usage of any other place will throw an error.

Also, you can’t have multiple rest parameters inside the function definition.

Now you know everything about the rest parameter to continue with. Let’s have a look at the opposite of this, the spread syntax.

Spread Syntax

The spread syntax allows an iterable (Arrays and Strings) to be expanded (spread) into a list of arguments.

Quite the opposite of the rest parameter we’ve learnt above.

Let’s assume we have a function that capable enough to return the accumulated value of any given three numbers. But as an input to that function, we have an array of 3 numbers. But the problem is, we can’t just pass our array (with 3 numbers) directly into that function, since the function itself only accepts 3 separate values.

We got an awkward result! The reason for this is now our function think it only gets a single argument (because we pass a single array with 3 elements) and it’ll assign that single argument to its first argument “a” and the rest will be undefined. So the “b” and the “c” arguments now will be undefined.

One way of doing this is manually getting the array elements and pass them into our function.

Even though we get the exact output we anticipated, this will completely reduce the ability of dynamic programming since everything is now manually passed into the function. What will happen if our array length varies from time to time? So, how can we pass our array as a list of arguments into the function where we can get the accumulated result without bothering how many elements it has? The spread syntax will rescue us!

As now you can see, our function receives the arguments the exact way it was designed to receive them. This is pretty much the same as we manually get the elements of our array items and pass them to our function. But it does the job pretty decently and ensures a dynamic way of doing things.

The spread syntax not only can be used with Arrays but can be used with Strings as well. As I mentioned in the beginning, spread syntax can be used with any iterable, so Strings should be a valid candidate.

The spread syntax will get the string “JavaScript” and spread it’s each character as an array element in the above example.

Another usage of our spread syntax is, we can copy arrays and objects by using it. Without using a method like an Object.assign() we can directly use the spread syntax to copy an array or an object.

Not only arrays, but you also can copy objects using the spread syntax.

That’s all about the rest parameter and the spread syntax. Now you should be able to apply these concepts to your projects with ease. Now let’s summarize the things we’ve learnt:

Summary:-

• The rest parameter can be used to collect function arguments as an array.
• The spread syntax can be used to apply/spread each element in the iterable (array or string) to separate arguments.
• The spread syntax also can be used to copy an array or an object.
• Check here and here for browser compatibility.

Thanks 🙏 for reading this and feel free to share this with your colleagues. If you have any question, I’d love to answer those 😊