JavaScript Modules: Import and Export Basics

As JavaScript applications grow larger and more complex, managing code in a single file becomes unmaintainable. This is where JavaScript modules come in—allowing you to split your code into reusable, separate files or "modules."

Modules help organize code, avoid polluting the global scope, and share functionality between different parts of your app. Modern JavaScript supports modules natively through the import and export keywords.

What Are JavaScript Modules?

A module is a self-contained piece of code that encapsulates functions, variables, or classes that can be exported and then imported by other modules. This helps break down the application into logical parts.

Exporting from a Module

You can export anything from a module: functions, objects, variables, classes, etc. There are two primary export types:

1. Named Exports

Named exports allow you to export multiple values by name. You can export them inline or all at once.

Example - Inline named exports:

js
// mathUtils.js
export const pi = 3.14;
export function add(x, y) {
  return x + y;
}

Example - Export at once:

js
const pi = 3.14;
function add(x, y) {
  return x + y;
}
export { pi, add };

2. Default Exports

A module can have only one default export. This lets you export a single value or function that can be imported without curly braces.

Example:

js
// logger.js
export default function log(message) {
  console.log(message);
}

Importing from a Module

Once you export something, you can import it elsewhere.

Import Named Exports

Use curly braces {} to import named exports by their exact exported names.

js
import { pi, add } from './mathUtils.js';
console.log(pi);       // 3.14
console.log(add(2, 3)); // 5

Import Default Export

You import default export without curlies, and you can name it anything.

js
import log from './logger.js';
log('Hello from logger!');

Import All as an Object

You can also import all named exports under a namespace object:

js
import * as math from './mathUtils.js';
console.log(math.pi);        // 3.14
console.log(math.add(4, 5)); // 9

Modules in Browsers

To use modules in the browser, include your script tag with the type="module" attribute:

xml
<script type="module" src="main.js"></script>

This tells the browser to treat the file as a module, enabling support for import/export statements.

Summary

Concept	Syntax Example	Description
Named Export	export const name = "Sam";	Export multiple named variables or functions
Default Export	export default function () {}	Export a single default value or function
Named Import	import { name } from './file.js';	Import named exports with curly braces
Default Import	import something from './file.js';	Import the default export
Namespace Import	import * as Namespace from './file.js';	Import all exports under one object

Why Use Modules?

• Keep your code organized and modular
• Reuse code across files and projects
• Avoid polluting the global scope
• Make testing and maintenance easier

JavaScript modules form the backbone of scalable frontend and backend codebases today. Once you get comfortable with import/export, structuring your projects becomes much cleaner and more efficient.

Stay tuned for more insights as you continue your journey into the world of web development!

Check out theYouTubePlaylist for great JavaScript content for basic to advanced topics.

Please Do Subscribe Our YouTube Channel for clearing programming concept and much more ...CodenCloud