Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I destructure all properties into the current scope/closure in ES2015?

I'd like to do something like this:

const vegetableColors = {corn: 'yellow', peas: 'green'};  const {*} = vegetableColors;  console.log(corn);// yellow console.log(peas);// green 

I can't seem to find or figure out how to do this but I really thought I had seen it done somewhere before! :P

NOTE: I'm using Babel with stage set to 0;

CONTEXT: I'm trying to be drier in JSX and not reference this.state or this.props everywhere. And also not have to keep adding properties to destructure if the data changes.

like image 379
Resist Design Avatar asked Aug 09 '15 19:08

Resist Design


People also ask

How do you Destructure an array of objects?

To destructure an array in JavaScript, we use the square brackets [] to store the variable name which will be assigned to the name of the array storing the element.

How do you Destructure an object in react?

In destructuring, It does not change an array or any object, it makes a copy of the desired object or array element by assigning them in its own new variables, later we can use this new variable in React (class or functional) components. It makes the code more clear.

How do you Destructure an object in es6?

When destructuring the objects, we use keys as the name of the variable. The variable name must match the property (or keys) name of the object. If it does not match, then it receives an undefined value. This is how JavaScript knows which property of the object we want to assign.


2 Answers

I think you're looking for the with statement, it does exactly what you are asking for:

const vegetableColors = {corn: 'yellow', peas: 'green'}; with (vegetableColors) {     console.log(corn);// yellow     console.log(peas);// green } 

However, it is deprecated (in strict mode, which includes ES6 modules), for good reason.

destructure all properties into the current scope

You cannot in ES61. And that's a good thing. Be explicit about the variables you're introducing:

const {corn, peas} = vegetableColors; 

Alternatively, you can extend the global object with Object.assign(global, vegetableColors) to put them in the global scope, but really, that's worse than a with statement.

1: … and while I don't know whether there is a draft to allow such things in ES7, I can tell you that any proposal will be nuked by the TC :-)

like image 56
Bergi Avatar answered Sep 22 '22 02:09

Bergi


I think you're looking for:

const {corn, peas} = vegetableColors; 

Live on Babel's REPL


If Pointy's right that you're asking how to do this without knowing the names corn and peas, you can't with destructuring assignment.

You can at global scope only, using a loop, but I'm sure you don't want to do this at global scope. Still, just in case:

// I'm sure you don't really want this, just being thorough Object.keys(vegetableColors).forEach((key) => {     Object.defineProperty(this, key, {         value: vegetableColors[key]     }); }); 

(Throw enumerable: true on there if you want these pseudo-constants to be enumerable.)

That works at global scope because this refers to the global object.

like image 32
T.J. Crowder Avatar answered Sep 21 '22 02:09

T.J. Crowder