Worth to know this too in JavaScript - Part 02

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 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 and every 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.

No alt text provided for this image

In the example above, in order to get the accumulated result each time, we have to adjust the function's definition as well. 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.

No alt text provided for this image
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.

No alt text provided for this image

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.

No alt text provided for this image

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.

No alt text provided for this image

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

No alt text provided for this image

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.

No alt text provided for this image

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.

No alt text provided for this image

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!

No alt text provided for this image

As now you can see, our function receives the arguments the exact way it 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.

No alt text provided for this image

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 Object.assign() we can directly use the spread syntax to copy an array or an object.

No alt text provided for this image

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

No alt text provided for this image

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 and every 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 ??

要查看或添加评论,请登录

Nadun Malinda的更多文章

  • Worth to know this too in JavaScript - Part 03

    Worth to know this too in JavaScript - Part 03

    This is the third part of the series of small tutorials/articles about some of the cool features in JavaScript…

  • Strict Mode in ReactJS

    Strict Mode in ReactJS

    If you are familiar with the create-react app, there is a mechanism called StrictMode that came into the table with its…

    6 条评论
  • Worth to know this too in JavaScript - Part 01

    Worth to know this too in JavaScript - Part 01

    This is the first part of the series of small tutorials/articles about some of the cool features in JavaScript which…

  • Reducers in JavaScript

    Reducers in JavaScript

    The concept of reducers in JavaScript came to the table with the popularity of the stage management mechanisms like…

    2 条评论
  • Manage multiple GitHub accounts on Mac

    Manage multiple GitHub accounts on Mac

    Recently I switched from PC to Mac, and I was a bit uncomfortable and exhausted about one thing when it comes to the…

    27 条评论
  • What the heck is "Prototype" in JavaScript and what it can do?

    What the heck is "Prototype" in JavaScript and what it can do?

    One of the most abandoned and uncovered feature (at least for me) in JavaScript is its prototype property. So let's try…

  • Compile ES6 into VanillaJS using Babel

    Compile ES6 into VanillaJS using Babel

    Did you ever wonder how to use classes and other object-oriented programming features in javascript? And how to compile…

社区洞察

其他会员也浏览了