using brackets with javascript import syntax

fox :

I came across a javascript library that uses the following syntax to import libraries:

import React, { Component, PropTypes } from 'react';

What is the difference between the above method and the following?

import React, Component, PropTypes from 'react';
user663031 :
import React, { Component, PropTypes } from 'react';

This says:

Import the default export from 'react' under the name React and import the named exports Component and PropTypes under the same names.

This combines the two common syntaxes which you've probably seen

import React from 'react';
import { Component, PropTypes } from 'react';

The first being used to import and name the default export, the second to import the specified named exports.

As a general rule, most modules will either provide a single, default export, or a list of named exports. It is somewhat less usual for a module to provide both a default export and named exports. However, in the case where there is one feature which is most commonly imported, but also additional sub-features, it is a valid design to export the first as the default, and the remaining ones as named exports. It is in such cases you would use the import syntax you refer to.

The other answers are somewhere between wrong and confusing, possibly because the MDN documents at the time this question was asked were wrong and confusing. MDN showed the example

import name from "module-name";

and said name is the "name of the object that will receive the imported values." But that's misleading and incorrect; first of all, there is only one import value, which will be "received" (why not just say "assigned to", or "used to refer to") name, and the import value in this case is the default export from the module.

Another way of explaining this is to note that the above import is precisely identical to

import { default as name } from "module-name";

and the OP's example is precisely identical to

import { default as React, Component, PropTypes } from 'react';

The MDN documentation went on to show the example

import MyModule, {foo, bar} from "my-module.js";

and claimed that it means

Import an entire module's contents, with some also being explicitly named. This inserts myModule (sic), foo, and bar into the current scope. Note that foo and myModule.foo are the same, as are bar and myModule.bar

What MDN said here, and what other answers claim based on the incorrect MDN documentation, is absolutely wrong, and may be based on an earlier version of the spec. What this actually does is

Import the default module export and some explictly named exports. This inserts MyModule, foo, and bar into the current scope. The export names foo and bar are not accessible via MyModule, which is the default export, not some umbrella covering all exports.

(The default module export is the value exported with the export default syntax, which could also be export {foo as default}.)

The MDN documentation writers may have gotten confused with the following form:

import * as MyModule from 'my-module';

This imports all exports from my-module, and makes them accessible under names such as MyModule.name. The default export is also accessible as MyModule.default, since the default export is really nothing more than another named export with the name default. In this syntax, there is no way to import only a subset of the named exports, although one could import the default export, if there is one, together with all the named exports, with

import myModuleDefault, * as myModule from 'my-module';

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Understanding import syntax in JavaScript

Java function definition with brackets syntax

Golang brackets syntax explanation

Syntax explanation: square brackets in Swift

linq javascript library with typescript es6 import syntax

Dynamically import JavaScript module using ES6 syntax?

Using C# brackets without function or class syntax

Syntax Error on dynamic import() using webpack and babel

In typescript, how can I import a plain javascript file with a default export using es6 syntax?

Mongoose is undefined when using import syntax and not when using require

Javascript/Typescript - Different syntax to import class

Using JavaScript NPM package with import

How to run several code before import syntax in Javascript?

Hide content inside brackets using pure JavaScript

PHP syntax array with brackets in front

Regular expression to capture html tag style syntax using double brackets

Using the VIM JavaScript syntax file

Swift: syntax explanation - round brackets then "in"

For loop brackets - C like syntax

Syntax error with hash and square brackets

How to include javascript files using 'import name from "module-name"' syntax in Ember.js?

Swift array syntax using angle brackets

Javascript import function syntax

Ruby method call using round brackets throwing syntax error

Javascript: using brackets in alpacajs form name fields?

Javascript es2015 import syntax

What is the syntax to import a javascript file into another file with ecmascript 6?

Angularjs brackets syntax

Can you import functions from an import_lib imported module using import from syntax?