Best of Modern JavaScript — Module Basics
Tags: javascript, webdev, beginners, programming
Published: 2021-01-19 00:25:49

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

**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.

### Before ES6

ES5 or earlier don’t have a native module system.

Therefore, there’re various module systems that were created to solve the problem of organizing code.

There’s the CommonHS module system that’s standard ib Node.js.

It has a compact syntax and loads modules synchronously and it’s usable on the server-side.

The Asynchronous Module Definition module system is another popular mobile system.

It has more complex syntax, which lets them work without `eval` or a compilation step.

### ES6 Modules

ES6 modules create a formal module system that’s standard to JavaScript.

It has a compact syntax and lets us do single exports.

Also, it has support for cyclic dependencies.

There’s direct support for async loading and the loading is configurable.

The syntax is even more compact than the ES6 module syntax.

And it has support for cyclic dependencies.

This is better than CommonJS.

The standard module system has a declarative syntax for imports and exports.

And it has a programmatic loader API to configure how modules are loaded and to conditionally load modules.

### Named Exports

With named exports, we can export more than one member of a module.

For instance, we can write:

`math.js`

```
export const sqrt = Math.sqrt;
export function add(x, y) {
  return x + y;
}
export function subtract(x, y) {
  return x - y;
}

```

to create a module that has several functions exported with the `export` keyword.

Then we can import the items by writing:

```
import { add, subtract } from "./math";

const sum = add(1, 2);
const difference = subtract(1, 2);

```

We imported the items from the `math.js` module.

The named exports are in the curly braces.

Then we can call the functions that we exported below it.

With CommonJS, we use the `module.exports` property to export multiple members of a module.

For instance, we can write:

`math.js`

```
const sqrt = Math.sqrt;
function add(x, y) {
  return x + y;
}
function subtract(x, y) {
  return x - y;
}

module.exports = {
  sqrt,
  add,
  subtract
};

```

`index.js`

```
const { add, subtract } = require("./math");

const sum = add(1, 2);
const difference = subtract(1, 2);

```

We call `require` to require the whole module, and then we destructured the entries from the imported module.

Then we can use the imported functions the same way.

### Default Exports

Default exports are a type of export that can only happen once in any module.

We can name them anything when we import default exports.

For instance, we can write:

`math.js`

```
export default function add(x, y) {
  return x + y;
}

```

to export the `add` function as a default export.

And then we can import the function by writing:

`index.js`

```
import add from "./math";

const sum = add(1, 2);

```

To export a class, we can write:

`Foo.js`

```
export default class {}

```

We don’t need a semicolon after the statement.

Then we can import it with:

```
import Foo from "./Foo";

const foo = new Foo();

```

We can include or exclude the name for default exports.

So we can write:

```
`export` `default` `function` baz`() {}`
`export` `default` `class` `Bar` `{}`

```

or

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

```

### Conclusion

Before ES6, there’s no module system that’s standard to the language.

Since then, JavaScript has a native mobile system that we can use to organize our code in a standard way.

The post [Best of Modern JavaScript — Module Basics](https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8amodule-basics/) appeared first on [The Web Dev](https://thewebdev.info).