Javascript Property with three dots (...)

Question

I have a problem with code I am supposed to work with. I found a syntax I am not familiar with and I have trouble googling the documentation:

export const Something = class Something {
    constructor(someObject = {}) {
        this.someObject = {...Something.someObjectDefaultAsStaticMethod,...someThing};
    };
// The rest of the class
};

I have problems understanding what the three dots (...) in front of the parameter do. And "dots in parameter javascript" is a bad search term. Can someone help me, maybe tell me what this syntax is actually called or just directly link me to documentation?

Adolfoadolph

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… – Socket

Possible duplicate of Spread Syntax ES6 – Ctn

Does this answer your question? Spread Syntax vs Rest Parameter in ES2015 / ES6 – Amaya

@Ctn and Henke: no, this question is the canonical target for "What does ... do in an object literal?". In the ones you linked, the term "spread syntax" is already known, and they ask for a comparison with other things. – Ivy

Answer 1

That is not ES6 but has only been added in ECMAScript 2018.

It is called "Object Rest/Spread Properties" and is part of the Spread Syntax.

Taking

This answer is correct. But just to clarify - the array rest / spread operator is in ES6, the object is in Stage 3. – Seedy

Answer 2

... (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.

I want to list down the mostly used practical Use Cases of the Spread Syntax (Spread Operator). The following has been explained with examples in this stackoverflow answer.

1. Combine Arrays (Concatenate Arrays)
2. Copying Arrays
3. Calling Functions without Apply
4. Destructuring Arrays
5. Function Arguments as Rest Parameters
6. Using Math Functions
7. Combining Two Objects
8. Separate a String into Separate Characters

Bumboat

See this stackoverflow answer for clear examples for each use case written out. – Dichotomy

@Keet It would be nice if you write out clear code examples for each of your 8 use cases. – Dichotomy

@Dichotomy I have provided clear code examples in the link attached in the answer. https://mcmap.net/q/45244/-what-are-these-three-dots-in-react-doing – Bumboat

Answer 3

The [...something] is the spread operator. It in essence allows for an array or string to be expanded. You will see it used often in React, but has many other use cases.

MDN has great documentation on the spread operator: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator

Bombard

Correct but note that it's not an operator; it's not part of the Expression grammar. – Krystin

Answer 4

You can use "..." in an object. In this example below, "...data" gets 'name: "John", age: 24':

const data= { name: "John", age: 24 };

const newData = {
  ...data, // Here
  sex: "Male"
}

console.log(newData);

This is the result:

{ name: "John", age: 24, sex: "Male" }

This is other example with "...data[key]" to add "id" to each object in an array:

const data = [
  { name: "John", age: 24 },
  { name: "Marry", age: 18 },
  { name: "Tom", age: 15 },
]

const newData = [];

for(const key in data) {

  const obj = {
    id: Number(key),
    ...data[key] // Here
  }

  newData.push(obj);
}

console.log(newData);

This is the result:

[
  { id: 0, name: "John", age: 24 },
  { id: 1, name: 'Marry', age: 18 },
  { id: 2, name: 'Tom', age: 15 }
]

Simmons

Answer 5

Context: One of the use cases is to do a "copy", but you should take care of this particular "by reference" behavior when working with sub-properties.

Finding: Take care that sub-properties are NOT passed by value, but by reference. In other words, only first level properties are passed as a copy "by value". See the example:

sourcePerson = { name: 'John', colors: ["red", "blue"] }
targetPerson = { ...sourcePerson }
console.log("Target person result:\n", JSON.stringify(targetPerson), "\n\n") //it seems a copy, but...

console.log("Let's update the name source value:\n")
sourcePerson.name = 'Kevin'
console.log("Updated source person:\n", JSON.stringify(sourcePerson), "\n")
console.log("Target person is NOT updated, It keeps a copy by value\n")
console.log(JSON.stringify(targetPerson), "\n\n")

//But if you update a sub-property, it has NOT been copied by value
console.log("Let's update a color sub-property:\n")
sourcePerson.colors[0] = "YELLOW"
console.log("Updated source person:\n", JSON.stringify(sourcePerson), "\n")
console.log("Target person is updated BY REFERENCE!\n")
console.log(JSON.stringify(targetPerson)) // it is not a copy, it is a reference!

console.log("\nCONCLUSION: ... spread syntax make a copy 'by value' for first level properties, but 'by reference' for sub-properties, so take care!\n")

Bonnett