What is SpreadElement in ECMAScript documentation? Is it the same as Spread syntax at MDN?

Question

At ECMAScript specification the SpreadElement is described

SpreadElement[Yield]:
...AssignmentExpression[In, ?Yield]

Is this the same as the Spread syntax

Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

Syntax

For function calls:

myFunction(...iterableObj);

For array literals:

[...iterableObj, 4, 5, 6]

described at MDN documentation?

What are use cases of SpreadElement and, or, spread syntax; and if SpreadElement and spread syntax are different, in which specific manners do they differ?

Answer 1

The term "spread operator" is kind of an "umbrella term" that refers to various syntactic constructs in ES6 which all look like ...x. MDN does the same.

However, this is misguiding, because ... is not an operator (at least not in the sense the ECMAScript spec uses the term "operator"). It doesn't generate a value that can be used in further computations. I'd rather compare it to other punctuators, such as , or ; (which are also kind of related but have different meaning in different context).

The term "spread operator" could refer to:

• Spread element, var arr = [a, b, ...c];: The spread element expands the iterable (c) into the new array. It's equivalent to something like [a,b].concat(c).

• Rest element, [a, b, ...c] = arr;^†: Inside destructuring, the ... construct has the opposite effect: It collects remaining elements into an array. The example here is equivalent to

  a = arr[0];
  b = arr[1];
  c = arr.slice(2);
  

  (note that this only an approximation, because destructuring works on any iterable value, not just arrays)

• fun(a, b, ...c): This construct doesn't actually have a name in the spec. But it works very similar as spread elements do: It expands an iterable into the list of arguments.
  It would be equivalent to func.apply(null, [a, b].concat(c)).

  The lack of an official name might be the reason why people started to use "spread operator". I would probably call it "spread argument".

• Rest parameter: function foo(a, b, ...c): Similar like rest elements, the rest parameter collects the remaining arguments passed to the function and makes them available as array in c. The ES2015 actually spec uses the term BindingRestElement to refer to to this construct.

Related questions:

• Spread operator vs Rest parameter in ES2015/es6
• Using spread operator multiple times in javascript?

---

†: If we are very pedantic we would even have to distinguish between a variable declaration (var [a, b, ...c] = d;) and simple assignment ([a, b, ...c] = d;), according to the spec.

Answer 2

SpreadElement is just a name in the ES6 grammar for spread "operator" together with its argument when in an Array literal:

SpreadElement[Yield]:
    ... AssignmentExpression[In, ?Yield]

So, SpreadElement in [a, b, ...c] is ...c; spread "operator" is .... (scare quotes because it is not a real operator in the same sense that, e.g. - is.)

The name of the grammar rule being used in function calls will be different, as it is a different grammatical context (it's just one kind of ArgumentList).

Answer 3

One more use case is a replacement for Object.assign method:

// naive use of assign--overwrites shared properties in o:

Object.assign(o, defaults); 

/* non-naive use of assign—prevents shared properties in o from being 
   overwritten */ 
o = Object.assign({}, defaults, o);  

alternately, use the spread operator:

o = {...defaults, ...o} 

This is one of the most import features in ES2018

let position = { x: 0, y: 0 };  
let dimensions = { width: 100, height: 75 };  
let rect = { ...position, ...dimensions };  
rect.x + rect.y + rect.width + rect.height // => 175 

-MDA

Answer 4

Normally the three dots are referred to as the "spread operator", but when written as part of a function parameter it is referred to as the "rest operator" (MDN Link). It's used when you may not know exactly how many arguments may be passed into the function. The rest operator will group all of the arguments passed into the function into an array. Example below:

function getNames(...names){
  console.log(names) // Output: ["Raul", "Chris", "Megan"]
}

getNames("Raul", "Chris", "Megan")

If you want the functionality of passing a combination of known arguments and a grouping of remaining arguments, you would need to make sure the rest operator is the last parameter listed when creating the function. For example:

function getNamesInClass(teacher, room, ...students){
  console.log(teacher) // Output: "David"
  console.log(room) // Output: "3B"
  console.log(students) // Output: ["Raul", "Chris", "Megan"]
}

getNamesInClass("David", "3B", "Raul", "Chris", "Megan")