Exports & Imports in JavaScript


We will learn how to utilise imports and exports in javascript in this post, as well as how to use them to break our code into different modules in order to better organise it.

To facilitate modular development in programming, which enables us to organise our code into reusable modules, JavaScript provides exports and imports. To achieve this sharing and reusability of code, we can use different types of exports and imports.

Exports allow us to make functions, variables, objects, or any values available outside of a module. By marking components as exports, we can expose them for use in other parts of our application codebase.

Imports are used to bring exported components from other modules into the current module. They allow us to access and use code functionalities defined in external modules.

Let’s look at some of the examples to understand the concept better −

Example 1 - Using named exports and import

In this example, to import named exports from a module, we will −

  • use the import keyword followed by the names of the components we want to import.

  • import the add and subtract functions, as well as the PI constant, from the module.js module, and using them in the main.js module.

Filename - index.html

<html>
<head>
   <title>Exports & Imports in JavaScript</title>
   <script type="module" src="module.js"></script>
   <script type="module" src="main.js"></script>
</head>
<body>
   <h1>Exports & Imports in JavaScript</h1>
</body>
</html>

Filename - main.js

// main.js module
import { add, subtract, PI } from './module.js';

console.log(add(5, 3)); // Output: 8
console.log(subtract(10, 4)); // Output: 6
console.log(PI); // Output: 3.14159

FIlename - module.js

// module.js module
export function add(a, b) {
   return a + b;
}
  
export function subtract(a, b) {
   return a - b;
}
  
export const PI = 3.14159

Output

The result will like the image below.

Example 2 - Using default exports and import

In this example, to import the default export from a module, we will −

  • use the import keyword followed by a name of our choice to assign the default export to.

  • import the default export from the module.js module and assign it the name sayHello. We will then use the imported function within the main.js module.

Filename - index.html

<html>
<head>
   <title>Exports & Imports in JavaScript</title>
   <script type="module" src="module.js"></script>
   <script type="module" src="main.js"></script>
</head>
<body>
   <h1>Exports & Imports in JavaScript</h1>
</body>
</html>

Filename - main.js

// main.js module
import sayHello from './module.js';

sayHello("John"); // Output: Hello, John!

Filename - module.js

// module.js module
export default function sayHello(name) {
   console.log("Hello, " + name + "!");
}

Output

The result will like the image below.

Conclusion

Exports and imports are important features in JavaScript that allow modular development and code encapsulation, thereby promoting code reusability and maintainability. Named exports to allow the selective exposure of multiple components, while the default export simplifies the usage of a primary component. We learned how to do exports and imports in javascript using different methods and saw some examples explaining the same.

Updated on: 16-Aug-2023

193 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements