Best of Modern JavaScript — Module Details
Tags: javascript, webdev, beginners, programming
Published: 2021-01-19 00:26:15

---
title: Best of Modern JavaScript — Module Details
published: true
date: 2020-07-25 19:48:14 UTC
tags: javascript,webdev,beginner,programming
canonical_url: https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8amodule-details/?utm_source=rss&utm_medium=rss&utm_campaign=best-of-modern-javascript%25e2%2580%258a-%25e2%2580%258amodule-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](https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8amodule-details/) appeared first on [The Web Dev](https://thewebdev.info).