Best of Modern JavaScript — Module Details

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 the design of the ES6 module system.

Use a Variable to Specify from which Module I want to Import

We can specify which module to import with the import function.

It takes a string with the path to the module.

For instance, we can write:

(async () => {
  const foo = await import("./foo");
  //...
})();

to import a module with the import function.

It takes a string so we can pass in a string generated dynamically.

It returns a promise so we use await to get the resolved value.

Import a Module Conditionally or On-demand

With the import function, we can import a function conditionally or on-demand.

For instance, we can write:

(async () => {
  if (Math.random() < 0.5) {
    const foo = await import("./foo");
    //...
  }
})();

to import a module conditionally.

Using Variables with Import Statements

We can’t use variables with our import statements.

So we can’t write something like:

import foo from 'bar-' + SUFFIX;

But with the import function, we can write:

(async () => {
  if (Math.random() < 0.5) {
    const foo = await import(`bar-${SUFFIX}`);
    //...
  }
})();

Use Destructuring in an import Statement

We can’t use nested destructuring in an import statement.

This makes sense because exports can only be done at the top level.

It looks like destructuring but the syntax is different.

Imports are static and views on exports.

So we can’t write something like:

import { foo: { bar } } from 'some_module';

Named Exports

With named exports, we can enforce a static structure with objects.

If we create a default export with an object, then we can’t statically analyze the object.

The object can have any properties and they can be nested.

eval() the Code of a Module

We can’t call eval on module code.

Modules are too high level for eval .

eval accepts scripts which doesn’t allow the import or export keywords.

Benefits of ES6 Modules

ES6 modules come with several benefits.

They include a more compact syntax.

Static module structure also helps with eliminating dead code, static checks, optimizations, etc.

Also, we check for cyclic dependencies.

With a standard module system, we eliminate the fragmentation of multiple module systems.

Everything using old module systems will migrate to ES6 standard modules.

Also, we don’t have to use objects as namespaces anymore.

This functionality is now provided by modules.

Objects like Math and JSON serve as namespaces for segregating entities.

Conclusion

ES6 modules provide us with many benefits over older non-standard module systems.

Also, they can be dynamically imported.

They allow for various optimizations.

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