Import Statements in ES6 from MDN docs

Question

I was going through Firefox import statements.

They have shown certain import statement like this

import defaultExport from \"module-name\";
import         


        

Answer 1

how is name different from defaultExport?

name is an object that holds all the exported values as exported key/values, except for the default export, which will be in defaultExport. If you would export the following from a file:

export default function main() {}
export function helper1() {}
export function helper2() {}

Then you could import main as the default import:

import main from "file";

That won't import the helpers. For that you would use * as:

import * as helpers from "file";
helpers.helper1();

And then if we import, how would we attach variable to it?

They get attached to the same name they were exported with, so to only import one of the above helpers:

import { helper1 } from "file";
helper1();

If you want to rename that import because it is missleading / clashing, then the as syntax comes in:

import { helper1 as someOther } from "file";
someOther();