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.
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.
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.
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.
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 :-)
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.
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