How to use deep destructuring on imports in ES6 syntax?

E_Jovi

I noticed that an ES6 destructuring import can be implemented like this:

foo.js

export default () => {
  return {
    a: 'b'
  }
}

index.js

import foo from './foo';
export default foo;
export const bar = foo();

Then I can use the module with:

import foo, { bar } from 'my-module';

But when I use a "deep destructuring" import from my-module, it fails with:

import foo, { bar: { a } } from 'my-module';

It seems like ES6 already implements the above syntax, but how do I use it?

T.J. Crowder

The ImportClause of an import isn't the same as destructuring. They do have some syntactic similarity, but if you read through the spec on import, you can see that it never refers to the usual destructuring constructs such as DestructuringAssignmentTarget or BindingPattern.

Remember that imports create bindings between the modules, but destructuring assignments copy values from a source to a target. With your imagined destructuring import, if the value of bar changes in the source module, would that change your imported a? (After all, with import { bar } from 'my-module';, if bar changes in my-module, the imported bar reflects that change.) Or would the destructuring import copy the value of bar.a to a as of some point in time? And if so, what point in time?

You get the idea. They're just different beasts.

You can, of course import and then destructure:

import foo, { bar } from 'my-module';
let { a } = bar;

...but I'm sure you knew that. :-)

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

ES6 Destructuring and Module imports

How to use destructuring assignment to define enumerations in ES6?

ES6 deep nested object destructuring

TypeScript imports vs. ES6 object destructuring

How to use spread syntax or destructuring into `this` value?

how to use node module with es6 import syntax in typescript

How to use array destructuring and assign to an object property in JavaScript ES6

How to use ES6 destructuring assignment to assign one object to another

Syntax for destructuring arrays into function parameters in ES6

ES6 syntax destructuring object + implements interface

Reassign variables using ES6 destructuring assignment syntax

how ES6 imports and exports works?

How to have synchronous ES6 imports

How can I in a simple way be able to use non CommonJS and es6 imports with webpack?

How to use special characters (like hyphen) in destructuring assignment syntax?

What can I use as placeholders in es6 array destructuring?

javascript es6: use case for destructuring rest parameter

Deep copy in ES6 using the spread syntax

Use ES6 syntax instead of `for` loop

Use resolve with es6 class syntax

How to convert es6 destructuring and rename argument to typescript?

AngularJS - Use ES6 imports instead of angular DI system

Can I use Destructuring to create a deep copy?

How to use destructuring here?

How can i use ES6 syntax such as let in chrome console?

How to use winston error handling with express-async-errors using ES6 syntax?

How using Vim alphabetically sort JS es6 imports

JavaScript - How to make ES6 imports work in browser?

How to test es6 module that imports jquery with jsdom