JavaScript object destructuring and aliasing

by

According to my reading of the spec, this should be parseable, but it doesn’t mean what you think. It would be parsed from right-to-left as

const env = ({ENV_VAR_X, ENV_VAR_Y, ENV_VAR_Z} = process.env);

where the production

({ENV_VAR_X, ENV_VAR_Y, ENV_VAR_Z} = process.env)

is defined, like all other assignments, as evaluating to the RHS, which is process.env.

Therefore, your code is equivalent to

const {ENV_VAR_X, ENV_VAR_Y, ENV_VAR_Z} = process.env;
const env = process.env;

It’s quite easy to validate this:

const foo = {a: 1, b: 2};
const bar = {a} = foo;

results in a new constant a being declared with the value 1, as you would expect. However, the value of bar is not an “alias to the deconstructed object”, which would be {a: 1}; it’s the same as foo, which is {a: 1, b: 2}. bar === foo.

What you are trying to do has been discussed many times here on SO and also in the ES discuss group. The bottom line is that there is no way to do this. All you can do is:

const {ENV_VAR_X, ENV_VAR_Y, ENV_VAR_Z} = process.env;
const env = {ENV_VAR_X, ENV_VAR_Y, ENV_VAR_Z};

In other words, there is no way to “deconstruct from an object into an object”, or “pick from an object into an object”. You can only deconstruct from an object into variables.

You could fall back to the old-fashioned way:

const env = {ENV_VAR_X: process.env.ENV_VAR_X, ...

which I know is horrible.

You could use the pick function from underscore or write your own, but that requires you to say

const env = _.pick(process.env, 'ENV_VAR_X', "ENV_VAR_Y', 'ENV_VAR_Z');

which is only slightly less horrible.

We have “rest properties” and “spread properties” proposed for ES7, but they do not seem to help us here.

What we need is a new syntax for picking properties into another object. There have been various proposals made for this, none of which has gained much traction. One is the “extended dot notation”, which allows a curly-bracketed construct to be put after a dot. In your case, you would write

const env = process.env.{ENV_VAR_X, ENV_VAR_Y, ENV_VAR_Z};
                       ^^

You can find out more about this proposal here.

More Related Contents:

  1. Unable to access React instance (this) inside event handler [duplicate]
  2. Null-safe property access (and conditional assignment) in ES6/2015
  3. Using Node.js require vs. ES6 import/export
  4. Why does babel rewrite imported function call to (0, fn)(…)?
  5. Call async/await functions in parallel
  6. Getting Unexpected Token Export
  7. Arrow Function in Object Literal [duplicate]
  8. Extending built-in natives in ES6 with Babel
  9. ES6 exporting/importing in index file
  10. Can’t require() default export value in Babel 6.x
  11. Browserify, Babel 6, Gulp – Unexpected token on spread operator
  12. Is there any one-line analogy in ES6 for ES5 `module.exports = require(‘./inner.js’)`?
  13. Why doesn’t instanceof work on instances of Error subclasses under babel-node?
  14. Convert ES6 Iterable to Array
  15. SyntaxError: ‘import’ and ‘export’ may appear only with ‘sourceType: module’ – Gulp
  16. Extending Error in Javascript with ES6 syntax & Babel
  17. Webpack babel 6 ES6 decorators
  18. Unable to use Arrow functions inside React component class [duplicate]
  19. How to publish a module written in ES6 to NPM?
  20. ES6 `export * from import`?
  21. Clean way to keep original variable and destructure at the same time
  22. Difference between import X and import * as X in node.js (ES6 / Babel)?
  23. Export multiple classes in ES6 modules
  24. “unexpected token import” in Nodejs5 and babel?
  25. How to run Node.js app with ES6 features enabled?
  26. require(‘babel/register’) doesn’t work
  27. Re-export default in ES 6 modules
  28. gulp babel, exports is not defined
  29. Exporting functions with reactjs and babel
  30. Getting a list of statics on an ES6 class

Leave a Comment