What is import * doing?

Question

What is import * doing?

Answer

import *, syntax: import * as name from 'path/to/moduleToExport.js';, is importing all the the named exports from the moduleToExport.js file, including the default export.
Example:
moduleToExport.js:

const myDefaultExport = {
  name: 'default export'
}

const myObj = {
  prop1: 'prop 1',
  prop2: 'prop 2'
};


export default myDefaultExport; //default export
export {myObj}; //named export

main.js:

import * as myImports from './moduleToExport.js'; //importing all named exports including default export

console.log(myImports.default); //the object `{name: "default export"}` is logged to the console
console.log(myImports.myObj); //the object `{prop1: "prop 1", prop2: "prop 2"}` is logged to the console
10 Likes

@aubsrey

Shouldn’t that be:

console.log(myImports.myDefaultExport);

instead of:

console.log(myImports.default);

?

3 Likes

I’ve tested this and it seems to me that import * as Alias from './moduleToExport'; ONLY imports all the named exports as properties of this Alias object, and in fact doesn’t include the default export. To import a default export as well as the named exports, I had to include a separate import myDefaultExport from './moduleToExport'; (in addition to the import * as Alias from ... ;

Could someone with more experience confirm this?.. or explain why I’m wrong, and how the model answer is in fact correct? Thanks :upside_down_face:

3 Likes

Hey @jon_morris! I’m not extremely experienced in this field but I think in this line:

there was an export by the name of default. So now this can be called by just default

1 Like

Hey, thanks for the reply! You pointed me in the right direction. :+1:

I’ve done some more testing and it turns out that you can also import the default export together with all the named exports using import * as Alias from './file';
HOWEVER, it seems that to then be able to access it, you have to use Alias.default. In other words, you can’t access it via its name/identifier (in this example myDefaultExport).

This is what led to my confusion, as in the associated lesson and exercises, we had only covered accessing the object that was exported using export default myDefaultExport (and then imported) by reference to its identifier (in this example myDefaultExport).

It seems that when you import the default export separately (using import myDefaultExport from './file'), then you have to access it (and its properties) via its identifier e.g.

// based on the example given in the original FAQ model answer

console.log(myDefaultExport.name);   // prints "default export"

console.log(default.name);           // throws an error

However, when you import the default export together with all the named exports under an “umbrella” alias (using import * as Alias from './file'), then it seems that you have to access it (and its properties) via the keyword default as a property of Alias e.g.

// based on the example given in the original FAQ model answer

console.log(Alias.default.name);            // prints "default export"

console.log(Alias.myDefaultExport.name);    // throws an error

So in the end it seems that the model answer is correct, and I was wrong. However, I hope that by questioning this, and adding this explanation, I may have provided some clarification to anyone else confused by the same thing…

…although, this is only what I’ve deduced myself based on playing around. If anyone else can confirm this, that would be great! :smiley:

20 Likes

* is a wildcard meaning all

1 Like

Ah. Rather quite similar to how we use the * card in CSS for universal rules, non?