Blog

You are currently viewing Modules in JavaScript

Modules in JavaScript

Modules in JavaScript

Modules in JavaScript

Modules in JavaScript is a JavaScript file where we write our codes and save the file with .js extension. Every file is a module in JavaScript. To use the classes, functions, and variables of one module we use import and export keywords in our modules.

Export / Import keywords

export – export keyword is used when creating JavaScript modules to export objects, functions, and variables. It means it allows access to the objects, functions, and variables to be used in another module that imports it.

Types of export

  • Named Export

We can have multiple named export per module. During import, it is mandatory to use the same name of the corresponding object.

Syntax:

export function function_name(){

//Body of the function

}

or

function function_name(){

//Body of the fucntion

}

export { function_name };

  • Default Export

We can have only one default export per module. During import, it is not mandatory to use the same name of the corresponding object.

Syntax:

export default function function_name(){

//Body of the function

}

or

function function_name(){

//Body of the fucntion

}

export default function_name;

In the same way classes and variables exported.

import -import keyword is used to import the export objects, functions, and variables.

Types of import

  • To import the Named export, Named import is used.

Syntax:

import { function_name } from “path of the export named module”;

  • To import the Default export, Default import is used.

Syntax:

import function_name from ” path of the export default module”;

To add JavaScript file to Html file following syntax is used

<script type=”module” src=”filename”></script>

Example

Suppose we have created three files one Html file name index.html and two JavaScript files name createdata.js and displaydata.js.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modules</title>
</head>
<body>
    <h2>Modules in JavaScript</h2>
    <script type="module" src="displaydata.js"></script> 
</body>
</html>

createdata.js

export function create() {
    console.log("Hello World");
}

displaydata.js

import { create } from "./createdata";
create();

Hello World will be print and visible in the console.

We can also import default export in the same way.

That鈥檚 it. We have covered all the concepts of Modules in JavaScript here.

Check this also Functions in JavaScript.

Article written By: : Ankita Kataria.

Thank you !!

Tags: ,

This Post Has 4 Comments

  4. 4xva52 20 Aug 2022 Reply

    It’s actually a great and helpful piece of information. I’m happyy thast you shared this helpful information witth us.
    Pleasee kesp uss uup to ddate like this. Thank yyou foor sharing.

  5. clip 7 Sep 2022 Reply

    Hi tyere wopuld you ind shaing which blolg platform you’re working with?
    I’m plawnning too tart my own blog son but I’m havinjg
    a hard tie deciding between BlogEngine/Wordpress/B2evolution aand Drupal.
    Thee reason I assk is because your design seems dkfferent then most blogs
    andd I’m loooking for something unique. P.S Sorry foor being off-topic buut I had to ask!

Leave a Reply