Import Export in JavaScript

What is a module in JavaScript?

In JavaScript, a module is a way to organize the code structure. Modules allow developers so they can break code into smaller, reusable pieces. It means it can smaller piece of code that we can easily import and export between different parts of an application.

With the use of the module, we can break up the code into separate files that can be easy to maintain. We can import the module from the external files with the use of an import statement. In JavaScript, modules rely on type =" module" in the <script> tag.

What is Export in JavaScript?

In JavaScript, Export is an object that can be returned with the help of a require() call. In other words, with the help of the export keyword, we can export the variables, functions, and classes easily. With the help of the export keyword, we can specify which data or functionality we would like to access outside the module.

Syntax

The syntax of Export in JavaScript is as follows:

Types of Export in JavaScript

There are two types of Export in JavaScript:

Default exports and Named exports

Default exports

In JavaScript, Default export is used to share a single value, function, variable or class as a main thing from a file to other parts of a program or code. With the help of default export if we have a file that we need to use in other parts of the application then we use the default export with the use of export default syntax by marking one item as the default export.

In simple words, when we import the file to another part of the code then we don't need to use the curly braces. That means we can simply give it a name when we want to import and make it easy to use.

For Example:

Named Export

In JavaScript, named export is used to export multiple variables, functions, or classes from a single file as a separate entity. With the help of named export, we can control more parts of the code and what we want to share with other modules.

When we are importing the named export into the other files, then we need to make sure that we use the exact name that was used at the time of exporting so we can easily access and use the functionalities that we need from the source file.

For example

Import in JavaScript

In JavaScript, the import module is a module that we use to contain all the main functions into a library of a program so the developer doesn't need to rewrite the entire function repeatedly.

In JavaScript, when we want to import the modules then we need to use the import keyword. In simple words, import is used to read code exported from another module.

In JavaScript, we can import the modules in two ways, based on whether they are named export or default exports.

In JavaScript, named exports are constructed with the use of curly braces and default exports without it.

How to import modules in JavaScript

Import a default export

In JavaScript, suppose a module uses a default export, then we need to import the default export with the use of this syntax:

Now, we can import the myFunction() from the myFunction.js module to the main.js module as follows:

Import a named export

In JavaScript, Importing a named export is not similar to the default export, we need to specify the exact name of the named exports when we import them into a module. We need to make sure the named export is placed inside the pair of curly braces.

Syntax

For example, we can modify the myFunction.js module that will contain two named exports:

Now, to import the add() and subtract() functions to the main.js module then we need to use the following code:

You can also call these functions:


Next TopicJavaScript 1 1




Latest Courses