Best of Modern JavaScript — Modules
Tags: javascript, webdev, beginners, programming
Published: 2021-01-19 00:26:29

---
title: Best of Modern JavaScript — Modules
published: true
date: 2020-07-25 19:49:00 UTC
tags: javascript,webdev,beginner,programming
canonical_url: https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8amodules/?utm_source=rss&utm_medium=rss&utm_campaign=best-of-modern-javascript%25e2%2580%258a-%25e2%2580%258amodules
---


**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](https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8amodules/) appeared first on [The Web Dev](https://thewebdev.info).