We Keep Coding

what is ...{} (three dots followed by curly brackets) in React [duplicate]

What does the ... do in this React (using JSX) code and what is it called?
<Modal {...this.props} title='Modal heading' animation={false}>

That's property spread notation. It was added in ES2018 (spread for arrays/iterables was earlier, ES2015), but it's been supported in React projects for a long time via transpilation (as "JSX spread attributes" even though you could do it elsewhere, too, not just attributes).
{...this.props} spreads out the "own" enumerable properties in props as discrete properties on the Modal element you're creating. For instance, if this.props contained a: 1 and b: 2, then
<Modal {...this.props} title='Modal heading' animation={false}>
would be the same as
<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>
But it's dynamic, so whatever "own" properties are in props are included.
Since children is an "own" property in props, spread will include it. So if the component where this appears had child elements, they'll be passed on to Modal. Putting child elements between the opening tag and closing tags is just syntactic sugar — the good kind — for putting a children property in the opening tag. Example:
class Example extends React.Component {
render() {
const { className, children } = this.props;
return (
<div className={className}>
{children}
</div>
);
}
}
ReactDOM.render(
[
<Example className="first">
<span>Child in first</span>
</Example>,
<Example className="second" children={<span>Child in second</span>} />
],
document.getElementById("root")
);
.first {
color: green;
}
.second {
color: blue;
}
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Spread notation is handy not only for that use case, but for creating a new object with most (or all) of the properties of an existing object — which comes up a lot when you're updating state, since you can't modify state directly:
this.setState(prevState => {
return {foo: {...prevState.foo, a: "updated"}};
});
That replaces this.state.foo with a new object with all the same properties as foo except the a property, which becomes "updated":
const obj = {
foo: {
a: 1,
b: 2,
c: 3
}
};
console.log("original", obj.foo);
// Creates a NEW object and assigns it to `obj.foo`
obj.foo = {...obj.foo, a: "updated"};
console.log("updated", obj.foo);
.as-console-wrapper {
max-height: 100% !important;
}

... are called spread attributes which, as the name represents, it allows an expression to be expanded.
var parts = ['two', 'three'];
var numbers = ['one', ...parts, 'four', 'five']; // ["one", "two", "three", "four", "five"]
And in this case (I'm going to simplify it).
// Just assume we have an object like this:
var person= {
name: 'Alex',
age: 35
}
This:
<Modal {...person} title='Modal heading' animation={false} />
is equal to
<Modal name={person.name} age={person.age} title='Modal heading' animation={false} />
So in short, it's a neat short-cut, we can say.

The three dots represent the spread operator in ES6. It allows us to do quite a few things in JavaScript:
Concatenate arrays
var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
var racingGames = ['Need For Speed', 'Gran Turismo', 'Burnout'];
var games = [...shooterGames, ...racingGames];
console.log(games) // ['Call of Duty', 'Far Cry', 'Resident Evil', 'Need For Speed', 'Gran Turismo', 'Burnout']
Destructuring an array
var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
var [first, ...remaining] = shooterGames;
console.log(first); //Call of Duty
console.log(remaining); //['Far Cry', 'Resident Evil']
Combining two objects
var myCrush = {
firstname: 'Selena',
middlename: 'Marie'
};
var lastname = 'my last name';
var myWife = {
...myCrush,
lastname
}
console.log(myWife); // {firstname: 'Selena',
// middlename: 'Marie',
// lastname: 'my last name'}
There's another use for the three dots which is known as Rest Parameters and it makes it possible to take all of the arguments to a function in as one array.
Function arguments as array
function fun1(...params) {
}

... (three dots in JavaScript) is called the Spread Syntax or Spread Operator. This allows an iterable such as an array expression or string to be expanded or an object expression to be expanded wherever placed. This is not specific to React. It is a JavaScript operator.
All these answers here are helpful, but I want to list down the mostly used practical Use Cases of the Spread Syntax (Spread Operator).
1. Combine Arrays (Concatenate Arrays)
There are a variety of ways to combine arrays, but the spread operator allows you to place this at any place in an array. If you'd like to combine two arrays and place elements at any point within the array, you can do as follows:
var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];
// arr2 = ["one", "two", "three", "four", "five"]
2. Copying Arrays
When we wanted a copy of an array, we used to have the Array.prototype.slice() method. But, you can do the same with the spread operator.
var arr = [1,2,3];
var arr2 = [...arr];
// arr2 = [1,2,3]
3. Calling Functions without Apply
In ES5, to pass an array of two numbers to the doStuff() function, you often use the Function.prototype.apply() method as follows:
function doStuff (x, y, z) {}
var args = [0, 1, 2];
// Call the function, passing args
doStuff.apply(null, args);
However, by using the spread operator, you can pass an array into the function.
doStuff(...args);
4. Destructuring Arrays
You can use destructuring and the rest operator together to extract the information into variables as you'd like them:
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }
5. Function Arguments as Rest Parameters
ES6 also has three dots (...) which indicates a rest parameter that collects all remaining arguments of a function into an array.
function f(a, b, ...args) {
console.log(args);
}
f(1, 2, 3, 4, 5); // [3, 4, 5]
6. Using Math Functions
Any function where spread is used as the argument can be used by functions that can accept any number of arguments.
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
7. Combining Two Objects
You can use the spread operator to combine two objects. This is an easy and cleaner way to do it.
var carType = {
model: 'Toyota',
yom: '1995'
};
var carFuel = 'Petrol';
var carData = {
...carType,
carFuel
}
console.log(carData);
// {
// model: 'Toyota',
// yom: '1995',
// carFuel = 'Petrol'
// }
8. Separate a String into Separate Characters
You can use the spread operator to spread a string into separate characters.
let chars = ['A', ...'BC', 'D'];
console.log(chars); // ["A", "B", "C", "D"]
You can think of more ways to use the Spread Operator. What I have listed here are the popular use cases of it.

The three dots in JavaScript are the spread / rest operator.
Spread operator
The spread syntax allows an expression to be expanded in places where multiple arguments are expected.
myFunction(...iterableObj);
[...iterableObj, 4, 5, 6]
[...Array(10)]
Rest parameters
The rest parameter syntax is used for functions with a variable number of arguments.
function(a, b, ...theArgs) {
// ...
}
The spread / rest operator for arrays was introduced in ES6. There's a State 2 proposal for object spread / rest properties.
TypeScript also supports the spread syntax and can transpile that into older versions of ECMAScript with minor issues.

This is a feature of ES6, which is used in React as well. Look at the below example:
function Sum(x, y, z) {
return x + y + z;
}
console.log(Sum(1, 2, 3)); // 6
This way is fine if we have a maximum of three parameters. But, what if we need to add, for example, 110 parameters. Should we define them all and add them one by one?
Of course there is an easier way to do, which is called spread.
Instead of passing all those parameters you write:
function (...numbers){}
We have no idea how many parameters we have, but we know there are heaps of those.
Based on ES6, we can rewrite the above function as below and use the spread and mapping between them to make it as easy as a piece of cake:
let Sum = (...numbers) => {
return numbers.reduce((prev, current) => prev + current);
}
console.log(Sum(1, 2, 3, 4, 5, 6, 7, 8, 9)); // 45

Kudos to Brandon Morelli. He explained perfectly here, but links may die so I am just pasting the content below:
The spread syntax is simply three dots: ...
It allows an iterable to expand in places where 0+ arguments are expected.
Definitions are tough without context. Let's explore some different use cases to help understand what this means.
Example 1 — Inserting Arrays
Take a look at the code below. In this code, we don’t use the spread syntax:
var mid = [3, 4];
var arr = [1, 2, mid, 5, 6];
console.log(arr);
Above, we’ve created an array named mid. We then create a second array which contains our mid array. Finally, we log out the result. What do you expect arr to print? Click run above to see what happens. Here is the output:
[1, 2, [3, 4], 5, 6]
Is that the result you expected?
By inserting the mid array into the arr array, we’ve ended up with an array within an array. That’s fine if that was the goal. But what if you want only a single array with the values of 1 through 6? To accomplish this, we can use the spread syntax! Remember, the spread syntax allows the elements of our array to expand.
Let’s look at the code below. Everything is the same — except we’re now using the spread syntax to insert the mid array into the arr array:
var mid = [3, 4];
var arr = [1, 2, ...mid, 5, 6];
console.log(arr);
And when you hit the run button, here’s the result:
[1, 2, 3, 4, 5, 6]
Awesome!
Remember the spread syntax definition you just read above? Here’s where it comes into play. As you can see, when we create the arr array and use the spread operator on the mid array, instead of just being inserted, the mid array expands. This expansion means that each and every element in the mid array is inserted into the arr array. Instead of nested arrays, the result is a single array of numbers ranging from 1 to 6.
Example 2 — Math
JavaScript has a built-in math object that allows us to do some fun math calculations. In this example we’ll be looking at Math.max(). If you’re unfamiliar, Math.max() returns the largest of zero or more numbers. Here are a few examples:
Math.max();
// -Infinity
Math.max(1, 2, 3);
// 3
Math.max(100, 3, 4);
// 100
As you can see, if you want to find the maximum value of multiple numbers, Math.max() requires multiple parameters. You unfortunately can’t simply use a single array as input. Before the spread syntax, the easiest way to use Math.max() on an array is to use .apply().
var arr = [2, 4, 8, 6, 0];
function max(arr) {
return Math.max.apply(null, arr);
}
console.log(max(arr));
It works, it’s just really annoying.
Now take a look at how we do the same exact thing with the spread syntax:
var arr = [2, 4, 8, 6, 0];
var max = Math.max(...arr);
console.log(max);
Instead of having to create a function and utilize the apply method to return the result of Math.max() , we only need two lines of code! The spread syntax expands our array elements and inputs each element in our array individually into the Math.max() method!
Example 3 — Copy an Array
In JavaScript, you can’t just copy an array by setting a new variable equal to already existing array. Consider the following code example:
var arr = ['a', 'b', 'c'];
var arr2 = arr;
console.log(arr2);
When you press run, you’ll get the following output:
['a', 'b', 'c']
Now, at first glance, it looks like it worked — it looks like we’ve copied the values of arr into arr2. But that’s not what has happened. You see, when working with objects in JavaScript (arrays are a type of object) we assign by reference, not by value. This means that arr2 has been assigned to the same reference as arr. In other words, anything we do to arr2 will also affect the original arr array (and vice versa). Take a look below:
var arr = ['a', 'b', 'c'];
var arr2 = arr;
arr2.push('d');
console.log(arr);
Above, we’ve pushed a new element d into arr2. Yet, when we log out the value of arr, you’ll see that the d value was also added to that array:
['a', 'b', 'c', 'd']
No need to fear though! We can use the spread operator!
Consider the code below. It’s almost the same as above. Instead though, we’ve used the spread operator within a pair of square brackets:
var arr = ['a', 'b', 'c'];
var arr2 = [...arr];
console.log(arr2);
Hit run, and you’ll see the expected output:
['a', 'b', 'c']
Above, the array values in arr expanded to become individual elements which were then assigned to arr2. We can now change the arr2 array as much as we’d like with no consequences on the original arr array:
var arr = ['a', 'b', 'c'];
var arr2 = [...arr];
arr2.push('d');
console.log(arr);
Again, the reason this works is because the value of arr is expanded to fill the brackets of our arr2 array definition. Thus, we are setting arr2 to equal the individual values of arr instead of the reference to arr like we did in the first example.
Bonus Example — String to Array
As a fun final example, you can use the spread syntax to convert a string into an array. Simply use the spread syntax within a pair of square brackets:
var str = "hello";
var chars = [...str];
console.log(chars);

For someone who wants to understand this simple and fast:
First of all, this is not a syntax only to React. This is syntax from ES6 called spread syntax which iterate (merge, add, etc.) the array and object. Read more about it here.
So to answer the question:
Let's imagine you have this tag:
<UserTag name="Supun" age="66" gender="male" />
And you do this:
const user = {
"name": "Joe",
"age": "50"
"test": "test-val"
};
<UserTag name="Supun" gender="male" {...user} age="66" />
Then the tag will be equal to this:
<UserTag name="Joe" gender="male" test="test-val" age="66" />
So when you used the spread syntax in a React tag, it took the tag's attribute as object attributes which merge (replace if it exists) with the given object user. Also, you might have noticed one thing that it only replaces before attribute, not after attributes. So in this example, age remains as it is.

It's just defining props in a different way in JSX for you!
It's using ... array and object operator in ES6 (object one not fully supported yet), so basically if you already define your props, you can pass it to your element this way.
So in your case, the code should be something like this:
function yourA() {
const props = {name='Alireza', age='35'};
<Modal {...props} title='Modal heading' animation={false} />
}
so the props you defined, now separated and can be reused if necessary.
It's equal to:
function yourA() {
<Modal name='Alireza' age='35' title='Modal heading' animation={false} />
}
These are the quotes from React team about spread operator in JSX:
JSX Spread Attributes
If you know all the properties that you want to place on a component
ahead of time, it is easy to use JSX:
var component = <Component foo={x} bar={y} />;
Mutating Props is Bad If you don't know which properties you want to set, you might be tempted to add them onto the object later:
var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y; // also bad
This is an anti-pattern because it means that we can't help you check
the right propTypes until way later. This means that your propTypes
errors end up with a cryptic stack trace.
The props should be considered immutable. Mutating the props object
somewhere else could cause unexpected consequences so ideally it would
be a frozen object at this point.
Spread Attributes Now you can use a new feature of JSX called spread attributes:
var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;
The properties of the object that you pass in are copied onto the
component's props.
You can use this multiple times or combine it with other attributes.
The specification order is important. Later attributes override
previous ones.
var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'
What's with the weird ... notation? The ... operator (or spread operator) is already supported for arrays in ES6. There is also
an ECMAScript proposal for Object Rest and Spread Properties. We're
taking advantage of these supported and developing standards in order
to provide a cleaner syntax in JSX.

For those who come from the Python world, JSX Spread Attributes are equivalent to
Unpacking Argument Lists (the Python **-operator).
I'm aware this is a JSX question, but working with analogies sometimes helps to get it faster.

Three dots ... represent spread operators or rest parameters.
It allows an array expression or string or anything which can be iterating to be expanded in places where zero or more arguments for function calls or elements for array are expected.
Merge two arrays
var arr1 = [1,2,3];
var arr2 = [4,5,6];
arr1 = [...arr1, ...arr2];
console.log(arr1); //[1, 2, 3, 4, 5, 6]
Copying array:
var arr = [1, 2, 3];
var arr2 = [...arr];
console.log(arr); //[1, 2, 3]
Note: Spread syntax effectively goes one level deep while copying an
array. Therefore, it may be unsuitable for copying multidimensional
arrays as the following example shows (it's the same with
Object.assign() and spread syntax).
Add values of one array to other at specific index e.g 3:
var arr1 = [4, 5]
var arr2 = [1, 2, 3, ...arr1, 6]
console.log(arr2); // [1, 2, 3, 4, 5, 6]
When calling a constructor with new:
var dateFields = [1970, 0, 1]; // 1 Jan 1970
var d = new Date(...dateFields);
console.log(d);
Spread in object literals:
var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };
var clonedObj = { ...obj1 };
console.log(clonedObj); // {foo: "bar", x: 42}
var mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // {foo: "baz", x: 42, y: 13}
Note that the foo property of obj1 has been overwritten by the obj2 foo property.
As a rest parameter syntax which allows us to represent an indefinite number of arguments as an array:
function sum(...theArgs) {
return theArgs.reduce((previous, current) => {
return previous + current;
});
}
console.log(sum(1, 2, 3)); //6
console.log(sum(1, 2, 3, 4)); //10
Note: The spread syntax (other than in the case of spread properties) can be applied only to iterable objects:
So the following will throw an error:
var obj = {'key1': 'value1'};
var array = [...obj]; // TypeError: obj is not iterable
Reference1
Reference2

The ...(spread operator) is used in React to:
provide a neat way to pass props from parent to child components. E.g., given these props in a parent component,
this.props = {
username: "danM",
email: "dan#mail.com"
}
they could be passed in the following manner to the child,
<ChildComponent {...this.props} />
which is similar to this
<ChildComponent username={this.props.username} email={this.props.email} />
but way cleaner.

The three dots (...) are called the spread operator, and this is conceptually similar to the ES6 array spread operator, JSX
taking advantage of these supported and developing standards in order to provide a cleaner syntax in JSX
Spread properties in object initializers copies own enumerable
properties from a provided object onto the newly created object.
let n = { x, y, ...z };
n; // { x: 1, y: 2, a: 3, b: 4 }
References:
Spread Properties
JSX In Depth

It is common practice to pass props around in a React application. In doing this we able to apply state changes to the child component regardless of whether it is Pure or Impure (stateless or stateful). There are times when the best approach, when passing in props, is to pass in singular properties or an entire object of properties. With the support for arrays in ES6 we were given the "..." notation and with this we are now able to achieve passing an entire object to a child.
The typical process of passing props to a child is noted with this syntax:
var component = <Component foo={x} bar={y} />;
This is fine to use when the number of props is minimal but becomes unmanageable when the prop numbers get too much higher. A problem with this method occurs when you do not know the properties needed within a child component and the typical JavaScript method is to simple set those properties and bind to the object later. This causes issues with propType checking and cryptic stack trace errors that are not helpful and cause delays in debugging. The following is an example of this practice, and what not to do:
var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y;
This same result can be achieved but with more appropriate success by doing this:
var props = {};
props.foo = x;
props.bar = y;
var component = Component(props); // Where did my JSX go?
But does not use JSX spread or JSX so to loop this back into the equation we can now do something like this:
var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;
The properties included in "...props" are foo: x, bar: y. This can be combined with other attributes to override the properties of "...props" using this syntax:
var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'
In addition we can copy other property objects onto each other or combine them in this manner:
var oldObj = { foo: 'hello', bar: 'world' };
var newObj = { ...oldObj, foo: 'hi' };
console.log(newObj.foo); // 'hi';
console.log(newObj.bar); // 'world';
Or merge two different objects like this (this is not yet available in all react versions):
var ab = { ...a, ...b }; // merge(a, b)
Another way of explaining this, according to Facebook's react/docs site is:
If you already have "props" as an object, and you want to pass it in JSX, you can use "..." as a SPREAD operator to pass the whole props object. The following two examples are equivalent:
function App1() {
return <Greeting firstName="Ben" lastName="Hector" />;
}
function App2() {
const props = {firstName: 'Ben', lastName: 'Hector'};
return <Greeting {...props} />;
}
Spread attributes can be useful when you are building generic containers. However, they can also make your code messy by making it easy to pass a lot of irrelevant props to components that don't care about them. This syntax should be used sparingly.

It is called spreads syntax in JavaScript.
It use for destructuring an array or object in JavaScript.
Example:
const objA = { a: 1, b: 2, c: 3 }
const objB = { ...objA, d: 1 }
/* Result of objB will be { a: 1, b: 2, c: 3, d: 1 } */
console.log(objB)
const objC = { ....objA, a: 3 }
/* result of objC will be { a: 3, b: 2, c: 3, d: 1 } */
console.log(objC)
You can do it same result with Object.assign() function in JavaScript.
Reference: Spread syntax

The spread operator (triple operator) introduced in ECMAScript 6 (ES6). ECMAScript (ES6) is a wrapper of JavaScript.
The spread operator enumerable properties in props.
this.props =
{
firstName: 'Dan',
lastName: 'Abramov',
city: 'New York',
country: 'USA'
}
<Modal {...this.props} title='Modal heading' animation={false}>
{...this.props} = { firstName: 'Dan',
lastName: 'Abramov',
city: 'New York',
country: 'USA' }
But the main feature spread operator is used for a reference type.
For example,
let person= {
name: 'Alex',
age: 35
}
person1 = person;
person1.name = "Raheel";
console.log( person.name); // Output: Raheel
This is called a reference type. One object affects other objects, because they are shareable in memory. If you are getting a value independently means spread memory and both use the spread operator.
let person= {
name: 'Alex',
age: 35
}
person2 = {...person};
person2.name = "Shahzad";
console.log(person.name); // Output: Alex

... 3 dots represent the spread operator in JS.
Without a spread operator.
let a = ['one','one','two','two'];
let unq = [new Set(a)];
console.log(a);
console.log(unq);
Output:
(4) ['one', 'one', 'two', 'two']
[Set(2)]
With spread operator.
let a = ['one','one','two','two'];
let unq = [...new Set(a)];
console.log(a);
console.log(unq);
Output:
(4) ['one', 'one', 'two', 'two']
(2) ['one', 'two']

Spread operator! As most ppl have already answered the question elegantly, I wanted to suggest a quick list of ways to use the spread operator:
The ... spread operator is useful for many different routine tasks in JavaScript, including the following:
Copying an array
Concatenating or combining arrays
Using Math functions
Using an array as arguments
Adding an item to a list
Adding to state in React
Combining objects
Converting NodeList to an array
Check out the article for more details. How to use the Spread Operator. I recommend getting used to it. There are so many cool ways you can use spread operators.

Those 3 dots ... is not React terms. Those are JavaScript ES6 spread operators. Which helps to create a new array without disturbing the original one to perform a deep copy. This can be used for objects also.
const arr1 = [1, 2, 3, 4, 5]
const arr2 = arr1 // [1, 2, 3, 4, 5]
/*
This is an example of a shallow copy.
Where the value of arr1 is copied to arr2
But now if you apply any method to
arr2 will affect the arr1 also.
*/
/*
This is an example of a deep copy.
Here the values of arr1 get copied but they
both are disconnected. Meaning if you
apply any method to arr3 it will not
affect the arr1.
*/
const arr3 = [...arr1] // [1, 2, 3, 4, 5]

<Modal {...{ title: "modal heading", animation: false, ...props} />
Much cleaner.

Those are called spreads. Just as the name implies, it means it's putting whatever the value of it in those array or objects.
Such as:
let a = [1, 2, 3];
let b = [...a, 4, 5, 6];
console.log(b);
> [1, 2, 3, 4, 5, 6]

The spread syntax allows an data structures like array and object to destructure
them for either to extract a value from them or to add a value to them.
e.g
const obj={name:"ram",age:10} const {name}=obj
from above example we can say that we destructured the obj and extracted name from that object.
similarly,
const newObj={...obj,address:"Nepal"}
from this example we added a new property to that object.
This is similar in case of array too.

The Spread operator lets you expand an iterable like an object, string, or array into its elements while the Rest operator does the inverse by reducing a set of elements into one array.

set new value for array's value using destructure

i got two noob questions about destructure an array:
1st question: when destructuring an object, I can define a new value or a new key or both. On array, can I add a new value without add a new key?
const obj = {a: undefined, b:2};
const {a = 3, b} = obj;
console.log(a); // 3
I want to know if there is a version of this but with array instead.
2nd question: is it possible to do not provide a default value for objects? Considering that I think that it is not possible to change default values using destructure.
const obj = [1, {a: 1, b:2}, 3, 4];
const [, object, three, four] = obj;
console.log(object); //{a: 1, b:2}
In this example, object returns {a: 1, b:2} but I wanted it change the value instead. Is that possible?
thanks, regards.

You are confusing default values with mutation of values, and assignment of values to variables with mutation of objects. Below is a demo of the default value feature of destructuring, with comments to explain the behavior.
You will see here that in general, destructuring is not designed for mutation of objects, but for extraction of variables and values. And hopefully also get a feel for why it would be undesirable for mutation to be mixed in to it, even if it were possible.
const obj = [1, {a: 1, b:2, 99:'z'}, ,3, 4, {mutateme: 1}];
const [, {a=3,b=4,c=5}, object={a:7,b:7},three, four, object2] = obj;
// a prop has value=1, b has value=2, c is not defined use default value 5
console.log(a,b,c,object);
//object is empty use default value={a:7,b:7}
// obj is unchanged
console.log(obj)
// mutate object2={mutateme:1} by reference (like a pointer)
object2.mutateme=7
// {mutateme: 1=>7}
console.log(obj)
// example of how you could (sort of) mutate inside a destructuring statement
// computed property, obj[1]=obj[3]=99 returns 99,
// so extract property 99 to variable z and mutate object obj at index [1] and [3] to =99
// y will 99 now.
const [y1, {[obj[1]=obj[3]=99]:z},, y2 ] = obj
console.log(y1, z, y2)
// if something similar were built into destructuring syntax,
// can you imagine how confusing it could get, and cause of all kinds of unexpected behavior?

flattening an array? [].concat(...[array])?

I understand that [].concat(...array) will flatten an array of arrays, but I've been taking a webpack course, and in the code to load presets it uses the syntax [].concat(...[array])
My understanding of it is:
const array = [[1,2,3], [4,5,6], [7,8,9]];
const result = [].concat(...array); // [1,2,3,4,5,6,7,8,9]
const result2 = [].concat(...[array]); // [[1,2,3], [4,5,6], [7,8,9]]
It's definitely confusing me because the course code (below) does work, but I can't see what [].concat(...[array]) achieves?
const webpackMerge = require("webpack-merge");
const applyPresets = (env = {presets: []}) => {
const presets = env.presets || [];
/** #type {string[]} */
const mergedPresets = [].concat(...[presets]);
const mergedConfigs = mergedPresets.map(presetName =>
require(`./presets/webpack.${presetName}`)(env)
);
return webpackMerge({}, ...mergedConfigs);
};
module.exports = applyPresets;
Can anyone give me a vague idea please?

This is a bit odd.
the concat() method takes each element from multiple arrays and adds them to a new array. So
[].concat([1],[2],[3]) = [1, 2, 3]
Now the [somevariable] syntax, places the somevariable into an array.
let arr1 = [1, 2, 3, 4]
let arr2 = [arr1]
console.log(arr2) // prints [[1, 2, 3]]
And finally, the ... syntax (called spread syntax) essentially disassembles an array, so its elements can be accessed directly
function myFunc(...[x, y, z]) {
return x * y* z; // without the dots, we'd have to say arr[0] * arr[1] * arr[2]
}
Thus, the [].concat(...[array]) expression you're confused about indeed accomplishes nothing; it places array into another array with the [] syntax, then immediately disassembles it back to how it was with the ... syntax. An equivalent expression is [].concat(array), which doesn't accomplish much since it has a single argument and the contact() method is called on an empty array.

Let me start of by saying that I have no clue why the spread operator is used. [].concat(...[presets]) is equivalent to [].concat(presets) as far as I know.
However [].concat(presets) is probably used to normalize presets. If presets already is an array than this does nothing other than creating a shallow copy.
If presets is not concat spreadable (has the Symbol.isConcatSpreadable property set to a falsy value), like "foo" then it is converted into an array with a single element and the output will be ["foo"].
If there are custom data types that are concat spreadable (has the Symbol.isConcatSpreadable property set to a truthy value), but don't have all array methods. It can be converted into an array of size presets.length using this method.
Since the output is always an array methods like map (mergedPresets.map) can be used without worrying about the type of presets.
const normalize = presets => [].concat(presets);
console.log(normalize(["foo"]));
console.log(normalize("foo"));
console.log(normalize({
0: "foo",
length: 1,
[Symbol.isConcatSpreadable]: true
}));

Difference between Object.assign and object spread (using [...] syntax)?

I have some code here and I was wondering if it is the same thing or different. I am pretty sure these are both suppose to be the same but I wasnt sure if I was doing it right.
let zoneComment = updatedMap[action.comment.zone]
? [...updatedMap[action.comment.zone]] : [];
let zoneComment = updatedMap[action.comment.zone]
? Object.assign([], updatedMap[action.comment.zone]) : [];
If these are the same then which should I use or does it matter? I want to use best practice so if it is your OPINION of which is better then please state so.

In your particular case they are not the same.
The reason is that you have an array, not an object.
Doing ... on an array will spread out all the elements in the array (but not the properties)
Doing Object.assign expects an object so it will treat an array as an object and copy all enumerable own properties into it, not just the elements:
const a = [1, 2, 3];
a.test = 'example';
const one = [...a] // [1, 2, 3];
const two = Object.assign([], a); // { '0': 1, '1': 2, '2': 3, 'test': 'example' }
console.log('\none');
for (let prop in one) {
console.log(prop);
}
console.log('\ntwo');
for (let prop in two) {
console.log(prop);
}
However, if you compare the ... operator applied on an object with Object.assign, they are essentially the same:
// same result
const a = { name: 'test' }
console.log({ ...a })
console.log(Object.assign({}, a))
except ... always creates a new object but Object.assign also allows you to mutate an existing object.
// same result
const a = { name: 'test' }
const b = { ...a, name: 'change' };
console.log(a.name); // test
Object.assign(a, { name: 'change'})
console.log(a.name); // change
Keep in mind that Object.assign is already a part of the language whereas object spread is still only a proposal and would require a preprocessing step (transpilation) with a tool like babel.

To make it short, always use ... spread construction and never Object.assign on arrays.
Object.assign is intended for objects. Although arrays are objects, too, it will cause a certain effect on them which is useful virtually never.
Object.assign(obj1, obj2) gets values from all enumerable keys from obj2 and assigns them to obj1. Arrays are objects, and array indexes are object keys, in fact.
[...[1, 2, 3], ...[4, 5]] results in [1, 2, 3, 4, 5] array.
Object.assign([1, 2, 3], [4, 5]) results in [4, 5, 3] array, because values on 0 and 1 indexes in first array are overwritten with values from second array.
In the case when first array is empty, Object.assign([], arr) and [...arr] results are similar. However, the proper ES5 alternative to [...arr] is [].concat(arr) and not Object.assign([], arr).

Your question really bubbles down to:
Are [...arr] and Object.assign([], arr) providing the same result when arr is an array?
The answer is: usually, yes, but:
if arr is a sparse array that has no value for its last slot, then the length property of the result will not be the same in both cases: the spread syntax will maintain the same value for the length property, but Object.assign will produce an array with a length that corresponds to the index of the last used slot, plus one.
if arr is a sparse array (like what you get with Array(10)) then the spread syntax will create an array with undefined values at those indexes, so it will not be a sparse array. Object.assign on the other hand, will really keep those slots empty (non-existing).
if arr has custom enumerable properties, they will be copied by Object.assign, but not by the spread syntax.
Here is a demo of the first two of those differences:
var arr = ["abc"]
arr[2] = "def"; // leave slot 1 empty
arr.length = 4; // empty slot at index 3
var a = [...arr];
var b = Object.assign([], arr);
console.log(a.length, a instanceof Array); // 4, true
console.log(b.length, b instanceof Array); // 3, true
console.log('1' in arr); // false
console.log('1' in a); // true (undefined)
console.log('1' in b); // false
If however arr is a standard array (with no extra properties) and has all its slots filled, then both ways produce the same result:
Both return an array. [...arr] does this by definition, and Object.assign does this because its first argument is an array, and it is that object that it will return: mutated, but it's proto will not change. Although length is not an enumerable property, and Object.assign will not copy it, the behaviour of the first-argument array is that it will adapt its length attribute as the other properties are assigned to it.
Both take shallow copies.
Conclusion
If your array has custom properties you want to have copied, and it has no empty slots at the end: use Object.assign.
If your array has no custom properties (or you don't care about them) and does not have empty slots: use the spread syntax.
If your array has custom properties you want to have copied, and empty slots you want to maintain: neither method will do both of this. But with Object.assign it is easier to accomplish:
a = Object.assign([], arr, { length: arr.length });

Spread Syntax vs Rest Parameter in ES2015 / ES6

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'];
When using rest arguments, you are collapsing all remaining arguments of a function into one array:
function sum( first, ...others ) {
for ( var i = 0; i < others.length; i++ )
first += others[i];
return first;
}
console.log(sum(1,2,3,4))// sum(1, 2, 3, 4) == 10;

ES6 has new feature three dots ...
Here is how we can use these dots:
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];
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);

Summary:
In javascript the ... is overloaded. It performs a different operations based on where the operator is used:
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.
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);
Spread syntax:
// example from MDN:
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
// the numbers array will be spread over the
// x y z parameters in the sum function
console.log(sum(...numbers));
// the numbers array is spread out in the array literal
// before the elements 4 and 5 are added
const newNumbers = [...numbers, 4, 5];
console.log(newNumbers);

Javascript's three dots ( ... ) operator can be used in two different ways:
Rest parameter: collects all remaining elements into an array.
var days = ["Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri"];
const [sat, sun, ...weekdays] = days;
console.log(sat); // "Sat"
console.log(sun); // "Sun"
console.log(weekdays); // ["Mon", "Tue", "Wed", "Thu", "Fri"]
Spread operator: allows iterables( arrays / objects / strings ) to be expanded into single arguments/elements.
var weekdays = ["Mon", "Tue", "Wed", "Thu", "Fri"];
var days = [...weekdays, "Sat", "Sun"];
console.log(days) // ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
Note that the spread operator can be the first element, but the rest parameter needs to be the last to collect the rest elements .

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

Added in ES6 these three dots ... has two meanings, Spread operator and Rest parameter
Spread operator: You use the three dots to expand iterables, by iterables I mean arrays, string, etc. As arguments. For example Math.max() function expect an indeterminate number of arguments so you can use Spread operator to expand elements as arguments on Math.max() function. Here an example from mdn
console.log(Math.max(1, 3, 2));
// expected output: 3
console.log(Math.max(-1, -3, -2));
// expected output: -1
var array1 = [1, 3, 2];
console.log(Math.max(...array1));
// expected output: 3
Another use case is to add, for example having this array
const videoGames = ['mario galaxy', 'zelda wind waker', 'ico'];
You can add it to another array
const favoritesVideoGames = ['Shadow of the colosus', ...videoGames];
Then favoritesVideoGames value is
[ 'Shadow of the colosus', 'mario galaxy', 'zelda wind waker', 'ico' ]
About Rest parameter, here the MDN definition
The rest parameter syntax allows us to represent an indefinite number
of arguments as an array.
This means you can pack many elements into a single element
Here an example from MDN
function sum(...theArgs) {
return theArgs.reduce((previous, current) => {
return previous + current;
});
}
console.log(sum(1, 2, 3));
// expected output: 6
console.log(sum(1, 2, 3, 4));
// expected output: 10
I usually get confused with these three points, this illustration by #stephaniecodes helps me to remember its logic. I mention that I took inspiration from this illustration to answer this question.
I hope it is useful.

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

Simple to remember ............
if the triple dots (...) are on the left side its Rest paramenter, if the triple dots are on the right side its Spread parameter.
const [a,b,...c] = [1,2,3,4,5] // (left) rest
const [d,e] = [1, ...c] // (right) spread

In reference to this i cant understand how we are passing a function and returning arguments in javascript
Function is a set of instructions that takes some input and processes them and returns result.
here we have an array [1, 2, 3, 4, 5, 6], and filter function iterates over each element and passes each element to positive functions which returns the number if it is even, else skips it.
trace:
1 => Filter(1) => positive(1) => skips 1,
2 => Filter(2) => positive(2) => returns 2,
3 => Filter(3) => positive(3) => skips 3,
...
6 => Filter(6) => positive(6) => returns 6
hence the result
[2, 4, 6]

considering 3 scenarios
1] without using any operator
function add(x, y) {
return x + y;
}
add(1, 2, 3, 4, 5) // returns 3 (function will takes first 2 arg only)
2] with rest operator
function add(...args) {
let result = 0;
for (let arg of args) result += arg;
return result
}
add(1) // returns 1
add(1,2) // returns 3
add(1, 2, 3, 4, 5) // returns 15
- we can gather any number of arguments into an array
3] with spread operator
const arr = ["Joy", "Wangari", "Warugu"];
const newArr = ["joykare", ...arr];
The value of newArr will be [ 'joykare', 'Joy', 'Wangari', 'Warugu' ]
another one
function add(a, b, c) {
return a + b + c ;
}
const args = [1, 2, 3];
add(...args);
-We have been using arrays to demonstrate the spread operator,
but any iterable also works. So, if we had a
string const str = 'joykare', [...str] translates to [ 'j', 'o', 'y', 'k', 'a', 'r', 'e' ]

From: Ved Antani, Stoyan Stefanov Book “Object-Oriented JavaScript - Third Edition.” :
Rest parameters
ES6 introduces rest parameters. Rest parameters allow us to send an arbitrary number of parameters to a function in the form of an array. Rest parameter can only be the last one in the list of parameters, and there can only be one rest parameter. Putting a rest operator(...) before the last formal parameter indicates that parameter is a rest parameter. The following example shows adding a rest operator before the last formal parameter:
function sayThings(tone, ...quotes){
console.log(Array.isArray(quotes)); //true
console.log(`In ${tone} voice, I say ${quotes}`)
}
sayThings("Morgan Freeman","Something serious","
Imploding Universe"," Amen");
//In Morgan Freeman voice, I say Something serious,
Imploding Universe,Amen
The first parameter passed to the function is received in tone, while the rest of the parameters are received as an array. Variable arguments (var-args) have been part of several other languages and a welcome edition to ES6. Rest parameters can replace the slightly controversial arguments variable. The major difference between rest parameters and the arguments variable is that the rest parameters are real arrays. All array methods are available to rest parameters.
Spread operators
A spread operator looks exactly like a rest operator but performs the exact opposite function. Spread operators are used while providing arguments while calling a function or defining an array. The spread operator takes an array and splits its element into individual variables. The following example illustrates how the spread operator provides a much clearer syntax while calling functions that take an array as an argument:
function sumAll(a,b,c){
return a+b+c
}
var numbers = [6,7,8]
//ES5 way of passing array as an argument of a function
console.log(sumAll.apply(null,numbers)); //21
//ES6 Spread operator
console.log(sumAll(...numbers))//21