JavaScript Modules: Import and Export

Introduction

Javascript modules are code blocks that can export or import lines of codes. It helps developer by which they do not have to write same code again and again. It lets us to break up code into separate files or folders. It is the fundamental feature of the javascript.

A JavaScript module is usually a file, but it can also be an HTML script. A module file is a .js file using import / export. A module script is an HTML script using import / export.

In javascript, we use type=module to the <script> tag in the HTML. Modules operate in strict mode by default.

Why modules are needed

When we build any application, we have to write a lots of lines of code which can have classes, functions or many other things. Then we do not want write same code again and again in any other files or folder. So, to solve this issue, we use DRY principle which stands for DON'T REPEAT YOURSELF.

Now, this result into many benefit, and there are many reasons for the need of modules are mentioned below.

1. highly readable and maintainable code

2. easy to debug

3. no naming conflict

4. reusable lines of code

5. better depeandancy management

Exporting functions or values

In javascript, we can export the function or values by two ways :-

1. by using export - It can have multiple exports.

2. by using default export - It can have only one default export.

A. In module type :-

B. In commonjs type :-

Export

There are two primary types of exports: named exports and a single default export.

Named Exports

You can have multiple named exports in a single module.

1. In-line individually -

// file: mathUtils.js 
export const PI = 3.14159; 
export function add(a, b) { 
  return a + b; 
}

1. All at once at the bottom -

// file: mathUtils.js 
const PI = 3.14159; 
function add(a, b) { 
  return a + b; 
} 
export { PI, add };

1. Renaming exports using the as keyword -

// file: mathUtils.js 
export { add as sum, PI as constantPI };

Default Export

A module can have only one default export, typically used for the module's main functionality.

// file: logger.js 
export default function log(message) { 
  console.log(Log: ${message}); 
}

// or for an object 
// file: config.js 
// export default { apiUrl: '...', timeout: 5000 };

Import

You use the import keyword to bring exported code into the current module.

Named Imports

Named exports must be imported using curly braces {} and the exact name (or alias). The file extension (.js) must be included in the path.

1. Import specific items -

import { PI, add } from "./mathUtils.js"; 
console.log(PI); 
console.log(add(2, 3));

1. Import all named exports as a single namespace object -

import * as MathUtils from "./mathUtils.js"; 
console.log(MathUtils.PI); 
console.log(MathUtils.add(2, 3));

1. Renaming imports using the as keyword -

import { add as addition } from "./mathUtils.js"; 
console.log(addition(2, 3));

Default Import

Default exports can be imported without curly braces and can be given any local name.

import logger from "./logger.js"; 
logger("Hello World!"); 
// Can use any name for the import

Combined Import

You can import both default and named exports from the same module.

import logger, { add, PI } from "./mathUtils.js";

Default vs named exports

The difference :-

Features	Default Export	Named Exports
Quantity	Multiple per file.	Exactly one per file.
Import Syntax	Must use { } .	No { } allowed.
Naming	Must match the exported name.	Can be named to anything.
Tooling	Better for "Tree Shaking" and IDE autocomplete.	Can sometimes be harder to trace/refactor.

Benefits of modular code

1. Easier Debugging

2. Reuability

3. Cleaner Collaboration

4. Scalability