Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ES6 Structuring Assignment?

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?

like image 730
T.J. Crowder Avatar asked Jun 17 '15 17:06

T.J. Crowder


People also ask

What is Destructuring assignment in JS?

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

What is object Destructuring in ES6?

Object destructuring is new syntax introduced in ES6. It helps create variables by extracting the object's properties in a much simpler way.

Can we Destructure array?

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.

What are default values in Destructuring assignment in JavaScript?

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.


2 Answers

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.

like image 76
T.J. Crowder Avatar answered Sep 20 '22 02:09

T.J. Crowder


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.

like image 27
Oka Avatar answered Sep 19 '22 02:09

Oka