Videos
... isn't an operator. It's primary syntax, like the () in a for statement (which are part of the for syntax, not an instance of the grouping operator). Operators can't do what spread and rest syntax do.
The parser knows which you're using because of where you use it, since each is only valid in a place the other isn't valid. For instance, with:
// 1
const [first, ...rest] = someArray;
// 2
const { a, ...others } = someObject;
// 3
function example(p1, ...others) {
// ...
}
...it's clear you're using rest in both cases because it's being used in destructuring patterns (1 & 2) and a parameter list (3).
Whereas for:
// 1
const x = [...someIterable];
// 2
const o = { ...someObject };
// 3
example(...someIterable);
...it's clearly spread, not rest, since you're using it in an array literal (1), an object literal (2), and the argument list of a function call (3).
JavaScript parser determines by analyzing the syntactic context in which three dots appears.
It takes into account whether these 3 dots used with an array literals, function call or function parameter.
For Spread operator:- When 3 dots used within an array literals and in function call then it is treated as Spread operator.
For Rest operator:- When 3 dots used within the parameters of a function definition then it is treated as Rest operator.
Is the difference between them is just syntax or there's a performance issue?
Both, and more...
Rest parameters:
- Are a known idiom in other languages (Ruby, Python).
- Are easier to read and maintain (vs.
slice). - Are easier to understand for beginners.
- Can (and likely will) result in better performance, since engines can optimize.
- Are tool friendlier, as they can be analyzed statically.
In addition to @kangax’s response, I would elaborate that performance and correctness are problematic many times the arguments object is invoked. If you pass the arguments object to another function, you pass with it the right to modify the corresponding local variables in your scope.
function foo(arg) {
bar(arguments);
return arg;
}
function bar(args) {
args[0] = 20;
}
foo(10) // 20
The existence of this feature invalidates local reasoning within a function, which makes JIT optimization more difficult and introduces certain security hazards. Programs that are designed for speed must work around this problem with far more elaborate boilerplate code than the Array.prototype.slice.call(arguments) idiom, and in security contexts, the passing of arguments must be strictly disallowed.
Eliminating the need to use the arguments object to extract variadic arguments is one of the many advantages to the new syntax.
Hi all,
I'm currently having some issues learning the spread vs rest operator in JS. In the beginning of the lecture, the teacher said that the spread operator is on the right side of the "=" whereas the rest operator is on the left side of the "=". I thought I had understood it as it made sense with the problems that was presented. Then towards the end of the lecture when he used it as a function, he was able to use the rest operator on the RIGHT side of the function. Why is that?
const add = function (...numbers) {
let sum = 0;
for (let i = 0; i < numbers.length; i++) sum += numbers[i];
console.log(numbers);
};
add(2, 3);Shouldn't this then be a spread operation instead of a rest operation since the ... is on the right side of the =? Or is it because when the function gets called, since the input is individual numbers, it will automatically do the opposite of what it currently is? like since its already individual numbers, the ... essentially will use it as a rest operator whereas if maybe I put in an array then it will understand to use it as a spread operator?
please ELI5, the more I look at it the more I confuse myself
thanks