What is the meaning of this operator with three dots in my reducer?

Question

My reducer looks like this:

export const setName = action => {
  return {
    type: "SET_NAME",
    ...action
  };
};

what are these 3 dots and reducer doing?

Answer 1

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.

Example with function:

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// expected output: 6

console.log(sum.apply(null, numbers));

Example with object

let a = {a: 1};
let b = {...a, b: 2};

console.log(b) //will print {a: 1, b: 2}

Think about it like unzipping one object into another.

More info

Answer 2

Well, this is spread operator which preserves original object and adds new elements to new object. For example

var colors = ['red', 'green', 'blue'];
var refColors = [...colors, 'yellow'];
//colors=> ['red', 'green', 'blue']
//refColors => ['red', 'green', 'blue', 'yellow']