Modules JavaScript

Modules in javascript, allows to write script in different javascript files. It has following advantages:

1. Large javascript code can be divided into multiple javascript files.
2. Code become cleaner and more readable.
3. Error handling and debugging become easier.
4. No code duplicacy.
5. Modules can be reused.
6. Helps to maintain large projects.

It is a javascript file, so extension should be .js, Do not use <script></script> in module file.

Modules Syntax

<script type="module">
    import {variable_name, function_name} from "./filename.js";
</script>

How to create Module

1. Create a .js file with meaningful name. e.g. mymodule.js
2. Add function, class, variable and whatever is required as per javascript.

How to Import module in javascript

Module in a javascript file is imported using import statement and also type=”module” should be specified in script tag.

<script type="module">
    import {variable_name, function_name} from "./mymodule.js";
</script>

Export in Module

Export is used to make variables, class and function accessible to the javascript file, which is importing or using modules. Exports are of two type in javascript module.

1. Named export
2. Default export

Named export

Named export allows to export variables, functions, classes etc. In a module, there can be an any number of named export.

mymodule.js

export let username = "Krishna";
export let age = 24;
export function myName(){
     return "Hello " + username ;
}

In mymodule.js there are three named exports.

Importing Named Export

To import named export from mymodule.js in an HTML file (test.html)

<script type="module">

import   {username, age, myName}   from './mymodule.js';
	
console.log(username);
console.log(age);
console.log(myName());

</script>

From mymodule.js, all its named exports are exported in test.html using curly braces. Named export must be written inside curly braces.

Default export

In javascript module, it is used to export classes, function, variables etc. There can only be single default export in a javascript module. multiple default exports give syntax error.

mymodule.js

export default function(){
     return "Hello";
}

In mymodule.js, there is only single default export, and its function has given no name.

Importing Default Export without function name

To import mymodule.js, default export in an HTML file (test.html)

<script type="module">

import hello from './mymodule.js';
	
console.log(hello());
</script>

if you provide or do not provide any function name to default export, you can import it with any name.

Importing Default Export with function name

mymodule.js

export default function hello(){
     return "Hello";
}

To import mymodule.js, default export function in an HTML file (test.html)

<script type="module">
import hello from './mymodule.js';
	
console.log(hello());
</script>

To import default export, curly braces should not be used.

Importing Default and Named export together

mymodule.js

    // Named exports
    export const username = 'Rama';
    export const age = 30;
    export function getName() {
      console.log('Hello, ' + name);
    }
    // Default export
    export default function() {
      console.log('Hello, World!');
    }

Import named and default export together

Importing mymodule.js named and default export together in test.html

<script type="module">
    import   hello, {username, age} from './myf.js';
	
getName(); // Named export
console.log(name + " " + age); // Named export

hello();  // Default export
</script>

Default export should be written without curly braces and at the beginning of import statement, if you write it after named export it will give error, see below example.

Wrong way to import default export

<script type="module">
    import   {username, age}, hello from './mymodule.js'; // Wrong way to import default
</script>

Right way to import default export

<script type="module">
    import    hello, {username, age} from './mymodule.js'; //Right way to import default
</script>