Exports & Imports in JavaScript

JavaScript exports and imports enable modular development by allowing us to organize code into reusable modules. This feature helps break down large applications into smaller, maintainable pieces that can be shared across different parts of your codebase.

Exports make functions, variables, objects, or any values available outside of a module, while imports bring exported components from other modules into the current module. JavaScript supports two main types of exports: named exports and default exports.

Named Exports and Imports

Named exports allow you to export multiple components from a single module. Each export must be explicitly named when importing.

Filename - module.js

// module.js - Named exports
export function add(a, b) {
   return a + b;
}

export function subtract(a, b) {
   return a - b;
}

export const PI = 3.14159;

Filename - main.js

// main.js - Import named exports
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

Default Exports and Imports

Default exports allow you to export a single primary component from a module. When importing, you can assign any name to the default export.

Filename - greetings.js

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

Filename - app.js

// app.js - Import default export
import greet from './greetings.js';

greet("Alice");  // Output: Hello, Alice!

Mixed Exports

You can combine both named and default exports in a single module:

// utils.js
export default function multiply(a, b) {
   return a * b;
}

export function divide(a, b) {
   return a / b;
}

export const VERSION = "1.0.0";

// Import both default and named exports
import multiply, { divide, VERSION } from './utils.js';

console.log(multiply(4, 5));  // Output: 20
console.log(divide(15, 3));   // Output: 5
console.log(VERSION);         // Output: 1.0.0

Import Aliases

You can rename imports using aliases to avoid naming conflicts:

import { add as sum, subtract as minus } from './module.js';

console.log(sum(3, 4));    // Output: 7
console.log(minus(10, 6)); // Output: 4

Comparison of Export Types

Browser Compatibility

ES6 modules require type="module" in script tags and are supported in modern browsers. For older browsers, use bundlers like Webpack or Rollup.

<script type="module" src="app.js"></script>

Conclusion

JavaScript exports and imports are essential for modular development, promoting code reusability and maintainability. Named exports allow selective exposure of multiple components, while default exports simplify primary component usage.