Modules in ES6
Tags: es6, javascript, modules
Published: 2019-05-19 10:48:34

---
title: Modules in ES6
published: true
description: Quick guide on how to use modules in ES6
tags: es6, javascript, modules
---

Modules in ES6:

​	JavaScript has had modules for a long time but they were implemented using external libraries. ES6 (ECMAScript 2015) introduced native support for modules.

Below you can find a quick guide on how to use import/export in ES6

- Clause export

```javascript
// file exportModule.js

function testFunction(param) {
    console.log(param)
};

class TestClass {
    constructor() {
        this.name = test;
    }
};

export { testFunction, TestClass }
```

- Import all clause exports:

```javascript
// file app.js

// importing all
import { testFunction, TestClass } from '/.exportModule'

testFunction('Imported with success!');
```

- Import selected clause exports:

```javascript
// file app.js

// importing only selected
import { TestClass } from '/.exportModule'

const importedClass = new TestClass();
```

- Import clause exports with renaming:

```javascript
// file app.js

// importing all
import { testFunction as myWishedName, TestClass } from '/.exportModule'

myWishedName('Imported with success!');
```

- Clause export with using different names:

```javascript
// file exportModule.js

function testFunction(param) {
    console.log(param)
};

class TestClass {
    constructor() {
        this.name = test;
    }
};

export { testFunction as exportedFunction , TestClass as exportedClass }
```

- Import clause export where names have been changed:

```javascript
// file app.js

// importing all
import { exportedFunction, exportedClass } from '/.exportModule'

exportedFunction('Imported with success!');
```

- Inline Export (can't export using different names as it is possible with clause export):

```javascript
// file exportModule.js

export function testFunction(param) {
    console.log(param)
};

export class TestClass {
    constructor() {
        this.name = test;
    }
};
```

- Import inline export:

```javascript
// file app.js

// importing all
import { testFunction, TestClass } from '/.exportModule'

testFunction('Imported with success!');
```

- Default export - if you would like to export a single value or create fallback value for your module. Can be used only once per module.

```javascript
// file exportModule.js

export default const myVariableFunction = param => {console.log(param)};

// the same as:

const myVariableFunction = param => {console.log(param)};

export { myVariableFunction as default };
```

- Import default export:

```javascript
// file app.js

import myVariableFunction from '/.exportModule'

myVariableFunction('Imported with success!')
```

- Default export already is an alias, hence they don't need to be named the same as it is in the export when imported:

```javascript
// file app.js

// import default doesn't require to be sorrounded by {} when importing
import importDefault from '/.exportModule'

importDefault('Imported with success!')
```

- Mixed export (default export and clause export):

```javascript
// file exportModule.js

function testFunction(param) {
    console.log(param)
}

class TestClass {
    constructor() {
        this.name = test;
    }
}

export default const myVariableFunction = param => {console.log(param)}

export { testFunction, TestClass }
```

- Mixed import:

```javascript
// file app.js

import importDefault, { testFunction, TestClass } from '/.exportModule'

importDefault('Log this');
```

- Namespace import, using alias is required here:

```javascript
// file app.js

import * as myNameSpace from '/.exportModule'

myNameSpace.testFunction('Hello World');
```

Some observations using import/export:

  - Modules require to add type="module" in script tag in HTML

  - ```html
    <script src="somepath.js" type="module"></script>
    ```

  - In order to check your code using LiveServer extension with VSCode and modules you have to type the file extension (.js) when specifying the path to the exported module

  - ```javascript
    import * as myNameSpace from '/.exportModule.js'
    ```

  - Default mode of modules is strict mode, so you don't have to include 'use strict' in your modules

  - Modules are executed asynchronously

This is my first article, so if you found it interesting or not, let me know! I would love to know what you think about it. If you have some specific observations about import/export modules it would be great if you could share it in comments.