Subscribe to my email list now at http://jauyeung.net/subscribe/

Follow me on Twitter at https://twitter.com/AuMayeung

Many more articles at https://medium.com/@hohanga

Even more articles at http://thewebdev.info/

Since 2015, JavaScript has improved immensely.

It’s much more pleasant to use it now than ever.

In this article, we’ll look at how to use JavaScript modules.

Exporting Function Expressions

The export functions expressions, we can put parentheses around our export statements.

For example, we can write:

export default (function () {});
export default (class {});

Classes are functions in JavaScript so the same rules apply.

Default Exporting Values Directly

We can default export values directly.

For example, we can write:

export default 'foo';

to export the string 'foo' .

Also, we can write:

const foo = function() {};

export { foo as default };

We create a function foo and export it with the as default keywords to make default exports.

We need this syntax so that we can turn variables declarations into default exports.

Imports and Exports Must be at the Top Level

Imports and exports must be at the top level.

For instance, we can write:

import 'foo';

But we can’t write:

if (true) {
  import 'foo';
}

or

{
  import 'foo';
}

They’ll both raise SyntaxErrors.

Imports are Hoisted

Imports aren’t hoisted, so we can use them before they’re defined.

For example, we can write:

console.log(add(1, 2));

import { add } from "./math";

And the return value of add will be logged.

Imports and Exports

Imports are read-only.

This enables the module system to allow cyclic dependencies.

Also, we can split code into multiple modules and it’ll still work as long as we don’t change the value of them.

Cyclic Dependencies

Cyclic dependencies are where 2 modules import members from each other.

They should be avoided since it makes both modules tightly coupled.

However, we may not be able to eliminate them altogether, so we’ve to live with them.

We can add cyclic dependencies in ES6 by wiring something like the following

For instance, we can write:

math.js

import { foo } from "./index";

export const bar = () => {
  foo();
};

index.js

import { bar } from "./math";

export const foo = () => {
  bar();
};

We import foo from index.js in math.js and use the imported function.

Likewise, we import bar from math.js and call that.

Other Importing Styles

In addition to named and default exports.

We can use import to just load the module and don’t import anything.

For example, we can write:

import 'lib';

Also, to rename imports, we can use the as keyword.

For example, we can write:

import { name as foo, bar } from "baz";

The as keyword is used to rename a named export name .

We can also use it to rename a default export.

For example, we can write:

import { default as foo } from "baz";

We can also use the as keyword by writing:

import * as baz from "baz";

to import the whole module and name it as baz .

Default imports can be mixed with named imports.

For example, we can write:

import foo, { bar, qux } from "baz";

Conclusion

We can export and import module members in various ways,

Cyclic dependencies also work with ES6’s module system.

The post Best of Modern JavaScript — Modules appeared first on The Web Dev.