Add properties to an object in place, using the spread syntax

Question

The object spread syntax allows for merging an object literal with another object, as in

const additional_object = { c:3, d:4 };
const object = { a:1, b:2, ...additional_object }; // object = { a:1, b:2, c:3, d:4 }

However, I can't find how to use the spread syntax to augment an existing object with new properties, without creating a new object. Rebounding on the previous example, I'd like to write:

const yet_another_object = { e:5, f:6 };
some_syntax_involving_object_here = {...yet_another_object };
// expected result: object = { a:1, b:2, c:3, d:4, e:5, f:6 }

It is easy to create a new object out of 2 objects (const new_objet = { ...object, ...yet_another_object }), but that is not what I need: the const reference to object must hold, and the object must get its additional properties. Note that Object.assign can be used to do so, but I'd assume the spread syntax can do the same in a much more readable way.

[Spread is not an operator](https://stackoverflow.com/q/44934828/1048572) - it's part of the object literal syntax, which always creates new objects. — Bergi, Jun 15 '21 at 18:08
@Bergi thanks, I fixed my question accordingly; from the first comments, I have little hope that I can avoid `Object.assign`. — Jean-Rene Bouvier, Jun 15 '21 at 18:36
@Jean-ReneBouvier I don't see why you would want to avoid `Object.assign`. There is no `object ...= yet_another_object` syntax or something like that. — Bergi, Jun 15 '21 at 18:46

score 4 · Answer 1 · answered Jun 15 '21 at 18:07

4

Object.assign(originalObject, newObject) is what you are looking for. It will merge properties of the new object into the existing one, thus saving the reference.

answered Jun 15 '21 at 18:07

ISAE

519
4
12

1

I am explicitly asking for not using `Object.assign`… – Jean-Rene Bouvier Jun 15 '21 at 18:37
2

Anything particularly bad with `Object.assign`? – ISAE Jun 15 '21 at 18:38

score 3 · Answer 2 · answered Jun 15 '21 at 18:08

3

There is no spread operator.

There is spread syntax. The important difference is that an operator can be used in any expression. Syntax is valid only in specific contexts.

Object spread syntax in particular is only valid within an object initialiser. Which means you can only use it when creating new objects. Therefore, you cannot modify objects via spreading.

answered Jun 15 '21 at 18:08

VLAZ

26,331
9
49
67

Unfortunately, this seems to make my hopes quite vain… I wish it were otherwise. Thanks anyway ;-) – Jean-Rene Bouvier Jun 15 '21 at 18:39
If there is a specific problem with `Object.assign`, then there is probably a way to amend it. – VLAZ Jun 15 '21 at 18:40
Nothing wrong with `Object.assign`, it’s just that the spread syntax is more readable. – Jean-Rene Bouvier Jun 17 '21 at 07:41
`Object.assign(obj, a, b, c)` seems at least as readable, if not more than `obj¯\_(ツ)_/¯...a¯\_(ツ)_/¯...b¯\_(ツ)_/¯...c` (using a placeholder for some sort of "take the spread object" syntax). You can make a simple fluent wrapper that enables you to do `merge(obj).and(obj2).and(obj3).and({...obj4, ...obj5})` [like this](https://jsbin.com/qijilegowi/1/edit?js,console). It seems more readable, IMO. – VLAZ Jun 17 '21 at 10:00

score -1 · Answer 3 · answered Jun 15 '21 at 18:05

-1

This is not possible as yet in javascript.

answered Jun 15 '21 at 18:05

V Maharajh

9,013
5
30
31

Add properties to an object in place, using the spread syntax

3 Answers3