The new destructuring assignment features of ES6 are fairly well known now (live copy on Babel's REPL); in the case of variables that already exist:
let a, b; // Existing variables
let o = {a: "a", b: "b"}; // An object to get values from
// ...
({a, b} = o); // Set them to the props from `o`
console.log(a); // "a"
console.log(b); // "b"
Is there a simple converse in ES6? Setting properties on an existing object based on variables with the same name? (Other than the obvious o.a = a; o.b = b;
)
Note I'm not talking about when creating an object, we could do that with the wonderful new object initializer syntax that lets us not repeat the names unnecessarily:
let a = "a";
let b = "b";
let o = {a, b};
But if I already have an object, can I do some kind of structuring assignment in ES6?
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
Object destructuring is new syntax introduced in ES6. It helps create variables by extracting the object's properties in a much simpler way.
With the syntax of destructuring, you can extract smaller fragments from objects and arrays. It can be used for assignments and declaration of a variable. Destructuring is an efficient way to extract multiple values from data that is stored in arrays or objects.
Default values in destructuring assignement only work if the variables either don't exist or their value is set to undefined . Any other value, including null , false and 0 , bypasses the default values in the destructuring statement.
The closest I've come up with is to use Object.assign
and a temporary object (live copy):
let a = "a", b = "b"; // The variables
let obj = {c: "c"}; // The existing object
Object.assign(obj, {a, b}); // "Structuring" assignment, sort of
console.log(JSON.stringify(obj)); // "{"c":"c","a":"a","b":"b"}
It's fairly simple, but it's a function call and a temporary object.
Update: Bergi points out in a comment that there's a strawman proposal (link now dead) for a :=
operator that will do this, and one of their first use cases is indeed the use case that primarily lead me to this question: Constructors:
// From strawman proposal linked above, doesn't actually exist yet!
class Point {
constructor(x,y) {
this := {x,y} //define and initialize x and y properties of new object
// ^^
}
}
So given that strawman exists, I suspect for now the assign
is going to be the best I can do in ES6. The old wiki with the strawman is offline, and there's nothing about :=
in the proposals repo.
Some experimental stuff, building on top of your answer.
If you wanted to get a little cheeky you could emulate the assignment portion of it with a setter. Definitely not practical, but it's a fun way to see what the behaviour might look like on the outside, if maybe you could empty assign o[] =
. (Babel)
let a = '1', b = '2';
let o = {z: '26'};
Object.defineProperty(Object.prototype, '', {
set: function (o) {
Object.assign(this, o);
}, configurable: true
});
o[''] = {a, b};
Same issues you face with your answer, actually more, but some food for thought.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With