Import Export in JavaScript

What is a module in JavaScript?

In JavaScript, a module serves as a method for structuring code effectively. Modules enable developers to decompose their code into smaller, reusable components. This implies that they can create compact segments of code that can be effortlessly imported and exported across various sections of an application.

By utilizing the module, we have the capability to divide the code into distinct files, which facilitates easier maintenance. We can bring in the module from external files through the use of an import statement. In JavaScript, modules depend on type =" module" within the <script> tag.

What is Export in JavaScript?

In JavaScript, the Export object can be retrieved using a require function call. Essentially, by utilizing the export keyword, we can conveniently export variables, functions, and classes. This keyword allows us to determine which data or functions we wish to make accessible outside of the module.

Syntax

The syntax of Export in JavaScript is as follows:

Export let name1, name2/*, …*/;

Types of Export in JavaScript

There are two types of Export in JavaScript:

Default exports and Named exports

Default exports

In JavaScript, the Default export feature allows for the sharing of a singular value, function, variable, or class as the primary element from a file to various segments of a program. By employing default export, if there exists a file that needs to be utilized in different areas of the application, we can implement the default export by utilizing the syntax export default, designating one item as the default export.

In straightforward terms, when we bring a file into a different section of the code, there is no requirement to utilize curly braces. This indicates that we can just assign it a name for the import, thereby simplifying its usage.

For Example:

// myFunction.js
// This is a function that we want to export as the default export.
function myFunction(message) {
  console.log(message);
}
// Export the function as the default export.
export default myFunction;
// app.js

// Import the default export from myFunction.js.
import myFunction from './myFunction.js';

// Use the imported function.
myFunction('Hello, world!');

Named Export

In JavaScript, named exports allow for the exportation of multiple variables, functions, or classes from a single file as distinct entities. Utilizing named exports enables greater control over various components of the code and determines what we wish to make accessible to other modules.

When importing named exports into other files, it is essential to utilize the precise name that was employed during the export process. This ensures that we can conveniently access and leverage the functionalities required from the source file.

For example

// myFunction.js
export function add(c,d){
  return c+d;
}
export function subtract(c,d){
  return c- d;
}
//main.js
import {add,subtract} from './myFunction.js';
const result1 = add(2,3);
const result2 = subtract(5,7);

Import in JavaScript

In JavaScript, the import module serves as a container for all the primary functions within a program's library, enabling developers to avoid the redundancy of rewriting the same function multiple times.

In JavaScript, the process of importing modules requires the use of the import keyword. To put it simply, the import statement is utilized to access code that has been exported from a different module.

In JavaScript, modules can be imported through two distinct methods, depending on whether they utilize named exports or default exports.

In JavaScript, named exports are defined by enclosing them in curly braces, while default exports do not require any such braces.

How to import modules in JavaScript

Import a default export

In JavaScript, when a module employs a default export, it is necessary to import that default export using the following syntax:

import name from 'module.js';

At this point, we can bring in the myFunction from the myFunction.js module into the main.js module by using the following method:

Import myFunction from '. /myFunction.js';
myFunction();

Import a named export

In JavaScript, the process of importing a named export differs from that of a default export. When importing named exports into a module, it is essential to use the precise names of those exports. Additionally, it is crucial to enclose the named export within curly braces.

Syntax

Import {namedExport1, namedExport2} from 'module.js';

As an illustration, we can alter the myFunction.js module to incorporate two named exports:

export function add(c,d){
  return c+d;
}
export function subtract(c,d){
  return c- d;
}

To bring the add and subtract functions into the main.js module, we will utilize the following code:

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:

import {add,subtract} from './myFunction.js';
const result1 = add(2,3);
const result2 = subtract(5,7);