Length: 15 minutes.
Even after years of professional development I see tricks every now and then which are straightforward conceptually, but easy to miss, and there's no place where I could read more about real usage, and not a 30 page long detailed article about every small detail of a given feature.
The following variables are used in the examples:
The rest/spread operator looks like this:
.... It is always on a left side of an identifier ( a name for a variable etc... ),
otherwise it would be easily confused with property access on objects ( plus
2..toString() is a valid JS expression,
dangerously close to three dots ).
It was introduced with es6, which was quite a while ago. As with every new feature it solves a problem that's solvable with old tools ( there will be examples of that, don't worry ), but using it simpifies code a lot, making it way more readable. One common thing with a lot of cool js features is that they can be used to solve a lot of different, seemingly unrelated problems, and the result is less head space occupied by syntax and more with code.
write immutable code, which means never mutating variables, but creating new ones whenever they needed. No more
Code written in this manner is way easier to read and reason about.
It can be a confusing thing to use the same operator for two different things. Obviously there's a rule which specifies that, but in everyday coding it's more intuitive. A good rule of thumb is the following:
...operator is on a "left" side of an expression, or in a function definition's arguments, then it's a rest
I'll use the following variables in the examples:
The spread operator is commonly used in two places, always before an array variable:
], at a array variable
Let's see some examples for the first part, with-and-without:
You can see some of the benefits right away:
thisand the correct arguments for
apply, you don't have to remember if
slice()modifies the existing array ( its not, it is used to make a copy ), you won't mutate
argumentListand use it later without remembering etc... I'm not going to make this statement every time, I promise, but only because I don't like repeating myself.
Let's see the another option, in creating a new array:
Again, you don't have to remember any built-in functions.
If you see it for the first time then it can get confusing for a moment, but after that period it's very easy to read.
You can also concat multiple arrays, with elements between arrays:
The line above prints out the fibonacci numbers up to
The rest is used
The first one is mainly used for functions which have a variable length argument list, meaning you can pass as many
arguments as one ( for ex.
console.log is such a function, try
Let's see a simple example, which removes the first item from an array, prints it on the console, and returns the sum of the remaining items:
arguments in the old example comes from? It exists in every function, and it is an Array-like object,
meaning that sometimes it behaves like an array, sometimes it does not. It does not for example have a
You have to create a new array ( from which you have to pop out a member ) from
arguments, which then you can use.
As you can see you have to remember a lot of things again, just to solve a relatively simple problem. The bonus is that in a good IDE ( let's say Webstorm ) you get much better type hints.
One thing to remember that in an argument list the rest operator must be at the last argument. You can't do this:
For the variable declaration:
Again, numberArr is mutated. Of course you can get around the mutation issue even with "old" JS, but it will be messier.
Usage with object is coming up in the next part!