JavaScript export/import ways

There’s 3 way to do it, all have a difference.

Named Export/Import (example)

//File where are You export some variable
export const name ='some string value';

//File where are You Import
import {name} from "..."

Mandatory :

In Export Module File after word “export” should be name of variable; (without name of variable you will get error, because it’s Named Export – so there should be name!

In Import file after word “import” should be curly braces it´s point out that You want to import exactly that variable name from source ‘…’

‘…’ (three dots) should be the path to file, it’s used just for example, in Your case it will be the path to directory where Your file has been saved for exp. “./Folder/fileName”

Default Export/Import (example)

//File where are You export some variable
const name="some text";
export default name;

//File where are You Import
import anyName from '...';

Mandatory :

In Export file after word “export default” – should be no declaration of variable name – but could be name of variable already decelerated before in Your file, or just value “some text” for example. So basically we exporting value, contained in “const name” or without variable like “some text”.

In Import file after word “import” should be Your variable name – because You get value of imported variable, and You should define new variable for writing there Your imported value.

Rename Export/Import (example)

//File where are You export some variable
export { name as anyNewName};

//File where are You Import
import {anyNewName} from '...';

//File where are You import & Rename
import {anyNewName as myNewName } from '...';

Mandatory:

In Export file after word “export” should be curly braces and inside there name of your declared variable you want to change word “as” and name Your new variable name which You will get in import file;

In Import file after word “import” – should be curly braces like in Named Import, and there if You need it You can also rename imported variable with word “as” and further declare Your own variable name;

List Export/Import (example)

//File where are You export some variables
export {
name1,
name2,
name3
}
//File where are You import list of some variables
import {name1, name2, name3} from '...';

Mandatory:

In Export file, after word “export” – should be curly braces with list of variable You want to export to another file, separated by comma delimiter. So basically it’s look like Named Import but with list of variables instead of one.

In Import file, after word “import” should be curly braces with list of variable You want to import from source ( three dots, should be replaced to path where are saved export file)

Import ALL in one variable

//File where are You export some variables
export const name="test";
export default "some text";

//File where are You Import all in one
import * anyName from '...';

// Will contain value "test"
anyName.name

// Will contain value "some text"
anyName.default

Mandatory:

In Import file, after word “import” should be * and variable name where are You put all imported values.

Leave a Reply

Your email address will not be published.