We are coding in a way where multiple files are shared across our app, is common to import an export components, helpers, states, etc. Let’s go through to how javascript handles this approach.

Exporting

The most common way.

The keyword export is used in front of the object or used like an operator.

export var alert = 'Message alert';

export function foo() {
  ....
}

const names = ['rolando', 'jenny', 'sally'];

export { names };

You can do multiple exports ( anything you don't export from the module stays private).

....

export { alert, names, foo };

Renaming an export object.

....
export { names as workers };

Once it's been rename, the names variable would not be available on the file.

If you change or mutate the object after being exported, it won't carry that change outside the file.

Consider:

....
export var alert = 'Message alert';

alert = 'New message alert'
// alert is till equal to 'Message alert'

For this reason we use default after the keyword export.

....
export default var alert = 'Message alert';

If reasigning this variable were you importing it, the original value still remains. If you never plan to update this export, this approach works, otherwise you can use export { name as default }

Another important thing to mention is that you can only have one default export per module, so alternative you can have a mix of export with and without default but is not recommended as it can be confusing.

Importing

Similar logic as exporting with some small differences

Imagine your module is called workers

....
import { ListOfworkers, myFunc } from 'workers';

ListOfworkers;
myFunc();

Note: The name of the module has to be called as a string.

Renaming

....
import { myFunc as myRenameFunc } from 'workers';

myRenameFunc();

The wildcard *

It could get a bit draining doing all this importing, using the * wildcard, we can simplify things a little bit

// workers
export var alert = 'Message alert';

export function foo() {
  ....
}

import * as worker from 'workers';

worker.alert; //'Message alert'
worker.foo();

Javascript modules intent to be static

As we mentioned before when exporting, changing values from imports are not allowed, otherwise this changes could affect your app in other places which is something we don't want.

....
import { foo } from 'foo';

foo = 'baz' // (runtime) TypeError!