Spread Syntax vs Rest Parameter in ES2015 / ES6

rest and spread operator
spread operator es6
es6: use the rest operator with function parameters
rest parameters in typescript
use the rest parameters instead of 'arguments'
uncaught syntaxerror: rest parameter must be last formal parameter
rest function
javascript unlimited parameters

I am confused about the spread syntax and rest parameter in ES2015. Can anybody explain the difference between them with proper examples?

When using spread, you are expanding a single variable into more:

var abc = ['a', 'b', 'c'];
var def = ['d', 'e', 'f'];
var alpha = [ ...abc, ...def ];
console.log(alpha)// alpha == ['a', 'b', 'c', 'd', 'e', 'f'];

Spread syntax, The spread operator “spreads” the values in an iterable (arrays, strings) across zero or more arguments or elements. I'll explain exactly what that means later on. Spread Operator […spread] It’s the opposite to rest parameter , where rest parameter collects items into an array, the spread operator unpacks the collected elements into single elements.

ES6 has new feature three dots ...

Here is how we can use these dots:

  1. As Rest/Collector/Gather
var [c, ...m] = [1,2,3,4,5]; // m -> [2,3,4,5]

Here ...m is a collector, it collects the rest of the parameters. Internally when we write:

var [c, ...m] = [1,2,3,4,5]; JavaScript does following

var c = 1,
    m = [2, 3, 4, 5];
  1. As Spread
var params = [ "hello", true, 7 ];
var other = [ 1, 2, ...params ]; // other => [1,2,"hello", true, 7]

Here, ...params spreads so as to adding all of its elements to other

Internally JavaScript does following

var other = [1, 2].concat(params);

Hope this helps.

JavaScript ES6: Spread Operator and Rest Parameters, Some ES2015 features are pretty easy to grasp and you can be productive with them querySelectorAll("p"));const args = Array.from(arguments); and you've probably already seen it in production code when using Babel as a But wait… the “spread” operator uses the same token as the “rest” operator Yes, yes it does. Rest parameter and Spread operator are introduced in ES6 JavaScript. Rest parameter converts elements to array and Spread operator converts array to elements.

Summary:

In javascript the ... is overloaded. It performs a different operations based on where the operator is used:

  1. When used in function arguments of a function declaration/expression it will convert the remaining arguments into an array. This variant is called the Rest parameters syntax.
  2. In other cases it will spread out the values of an iterable in places where zero or more arguments (function calls) or elements (array literals) are expected. This variant is called the Spread syntax.
Example:

Rest parameter syntax:

function rest(first, second, ...remainder) {
  console.log(remainder);
}

// 3, 4 ,5 are the remaining parameters and will be 
// merged together in to an array called remainder 
rest(1, 2, 3, 4, 5);

ES2015 Array.from, rest, and spread - Kerri Shotts, For my fourth post, I'll be discussing rest parameters and the spread syntax: the most concise ways to condense or expand arguments,  The logical OR operator (||) always returns the second operand when the first is falsy. ES6 gives us a way to set default function parameters. Any parameters with a default value are considered to be optional.

When we see "..." in the code, it is either rest parameters or the spread operator.

There’s an easy way to distinguish between them:

When ... is at the end of function parameters, it’s "rest parameters" and gathers the rest of the list into the array. When ... occurs in a function call or alike, it’s called a "spread operator" and expands an array into the list. Use patterns:

Rest parameters are used to create functions that accept any number of arguments. The spread operator is used to pass an array to functions that normally require a list of many arguments. Together they help to travel between a list and an array of parameters with ease. For more information about this click here

Spread & Rest Parameters: JavaScript ES6 Feature Series (Pt 4), It can also be used as rest operator in conjugation with destructuring. In ES6, the spread operator worked only for arrays. However Math.max takes n number of numeric parameters and returns the largest number in the group. VS Code extensions that make me fall love in programming each day. ES6 Rest Parameters and Spread Operators. This section of our series on ES6 features looks at the new Rest and Spread Operators. An almost constant requirement in programming is the ability to easily take a group of values, and put them into an array.

Basically like in Python:

>>> def func(first, *others):
...    return [first, *others]
>>> func('a', 'b', 'c')
['a', 'b', 'c']

A Simple Guide to Destructuring and ES6 Spread Operator, The rest parameter has the same syntax as the spread operator, but instead of expanding an array into parameters, it collects parameters and  These are the newest and most crucial features in ES6 or also known as ECMAScript 6, ES2015, or JavaScript 6. This series of articles explains them super simple for you. Plus, each article states how to use the specific feature at its best. The rest operator takes any number of arguments and put them into an array.

How To Use ES6 Arguments And Parameters, Rest parameters and spread syntax. Many JavaScript built-in functions support an arbitrary number of arguments. For instance: Math.max(arg1  This repository discusses about Spread/Rest Operator in ES6. View on GitHub Spread and Rest Operator in ES6. We know that ECMA6/ES2015 came up with a lot of new features and syntatic sugars. In this blog, we are going to discuss about a new feature introduced in ECMA6 that is .. is known as Spread/Rest operator depending upon how and where

Rest parameters and spread syntax, It now supports parameter default values, rest parameters (varargs) and Additionally, the spread operator helps with function/method/constructor calls and Array The ES6 way of handling parameters is equivalent to destructuring the actual  Rest syntax (parameters) Rest syntax looks exactly like spread syntax but is used for destructuring arrays and objects. In a way, rest syntax is the opposite of spread syntax: spread 'expands' an array into its elements, while rest collects multiple elements and 'condenses' them into a single element.

JavaScript spread operator and rest parameters tutorial ES6 / ES2015, Rest parameter syntax is not the same as spread syntax: Rest parameter syntax looks the same as spread syntax but actually represents an unknown number of function arguments as an array. So rather than "unpacking" the iterable, rest parameters actually package multiple arguments into an array.

Comments
  • One is at the call site, the other is in the parameter list. Or for arrays, one is in the literal, the other is in a destructuring expression.
  • Can anybody explain why it is downvoted?
  • Probably because of no shown research effort. Also, where did you find those terms, where/how were they so bad explained that you cannot tell the difference?
  • Thanks @Bergi but I was in hurry.
  • @Bergi personal opinion, your comments offer more insights than the accepted answer, simply stating expanding vs collapsing doesn't tell their use case, thanks ;)
  • what about const [a, b, ...c] = [1, 2, 3, 4, 5, 6, 7, 8, 9]?
  • @yukulélé this is rest. Read it as a, b and the rest of the array.
  • @Yukulélé its rest and the value of c will be [3,4,5,6,7,8,9]
  • The most understandable and simplest explanation I've seen so far.
  • this is the best answer.
  • I love your answer. Well explained.
  • @jtr13 That makes no sense to me. just give it one name with differing functionality depending on context.