Blog

You are currently viewing JavaScript Modules: Import and Export Basics
JavaScript Modules

JavaScript Modules: Import and Export Basics

JavaScript has come a long way from being a simple scripting language used for basic web interactions. As applications grew larger and more complex, developers began facing a major issue — code organization. Managing hundreds or even thousands of lines of code in a single file is a nightmare. This is where JavaScript Modules come in, allowing developers to write cleaner, modular, and maintainable code.

In this article, we’ll take a deep dive into JavaScript modules, with a focus on the import and export syntax — the very backbone of modern modular JavaScript development. Whether you’re a beginner or brushing up your fundamentals, this guide will help you gain a solid grasp of module basics.

JavaScript Short-Circuiting: Logical Operators in Action

What Are JavaScript Modules?

At their core, modules are reusable chunks of code that can be exported from one file and imported into another. This system provides developers the ability to isolate functionality into smaller, logical files and reuse code across multiple parts of an application.

Think of modules like Lego blocks — each one has a specific role, and when combined, they build something bigger and more powerful. Before modules, developers used patterns like IIFEs (Immediately Invoked Function Expressions) or tools like RequireJS to simulate modularity. With ES6 (ECMAScript 2015), modules became a native part of JavaScript.

Why Use Modules?

Here are a few reasons why modules are considered a game changer in JavaScript:

  • Separation of concerns: You can separate logic based on functionality (e.g., authentication, API calls, UI components).
  • Code reuse: Functions and variables can be used across multiple files without rewriting code.
  • Maintainability: Smaller files are easier to debug, update, and test.
  • Avoiding namespace pollution: Each module has its own scope, so you don’t have to worry about variable name conflicts.

Understanding the Module Syntax: Export and Import

To use modules in JavaScript, you primarily need to understand two keywords: export and import. Let’s look into how they work.

Exporting in JavaScript

To make a piece of code available for use in another file, you need to export it. JavaScript provides two main types of export:

  1. Named Exports
  2. Default Exports

1. Named Exports

Named exports allow you to export multiple values from a single file. Here’s how it works:

// utils.js

export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

In the above example, we are exporting two functions, add and subtract, using named exports.

You can also write named exports like this:

const multiply = (a, b) => a * b;
const divide = (a, b) => a / b;

export { multiply, divide };

2. Default Exports

Default exports are used when a file exports only a single function, class, or value. Here’s an example:

// greet.js

export default function greet(name) {
  return `Hello, ${name}!`;
}

You can also export variables or classes:

export default class Person {
  constructor(name) {
    this.name = name;
  }
}

You can only have one default export per file.

Importing in JavaScript

Once you have exported something, the next step is importing it where you need it.

Importing Named Exports

// app.js

import { add, subtract } from './utils.js';

console.log(add(5, 3));      // 8
console.log(subtract(5, 3)); // 2

You must use the exact names of the exports when importing them. If you want to import everything from a module as a namespace:

import * as mathUtils from './utils.js';

console.log(mathUtils.add(4, 2));    // 6
console.log(mathUtils.subtract(4, 2)); // 2

Importing Default Exports

// app.js

import greet from './greet.js';

console.log(greet('Alice')); // Hello, Alice!

Notice that with default exports, you can choose any name for the import.

Mixing Named and Default Exports

Yes, you can mix both in a single module:

// math.js

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

export const square = x => x * x;
export const cube = x => x * x * x;

And import them like this:

import divide, { square, cube } from './math.js';

File Extensions and Path Resolution

When importing modules, it’s good practice to include the file extension (.js, .mjs) unless you’re using a build tool like Webpack or a framework like React, which might allow omitting them.

Relative imports (./, ../) point to file locations, while bare module imports (like 'react') refer to packages from node_modules.

Using Modules in Browsers

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

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

This tells the browser to treat your file as a module. Some important things to note:

  • Modules run in strict mode automatically.
  • The value of this at the top level is undefined, not window.
  • Scripts are deferred by default — they don’t block the HTML parser.

Common Pitfalls and Gotchas

  1. Only top-level imports/exports are allowed
    You can’t dynamically import or export values using conditionals. This will throw a syntax error: if (true) { export const hello = 'Hi'; // ❌ Not allowed }
  2. Modules are singletons
    When a module is imported, it runs once. The result is cached, so importing it multiple times doesn’t re-run the code.
  3. CORS Restrictions in Browsers
    When loading modules locally in a browser, you may face CORS issues. It’s best to serve your files using a local development server (e.g., using live-server or Vite).

Dynamic Imports

In addition to static import, ES2020 introduced dynamic imports, which allow you to load modules on demand using the import() function.

button.addEventListener('click', async () => {
  const module = await import('./math.js');
  console.log(module.square(4)); // 16
});

Dynamic imports are especially useful for lazy loading in large applications, improving performance by loading only what’s needed.

Real-World Use Case: Modularizing a Todo App

Let’s say you’re building a simple todo app. Here’s how you might organize your code:

project/
│
├── main.js
├── todo/
│   ├── addTodo.js
│   ├── removeTodo.js
│   └── listTodos.js

In addTodo.js:

export default function addTodo(todo) {
  console.log(`Adding: ${todo}`);
}

In main.js:

import addTodo from './todo/addTodo.js';

addTodo('Learn JavaScript Modules');

As your app grows, keeping features in separate files makes it easier to manage and maintain.

Using Modules with Build Tools

When working on larger projects, developers use bundlers like Webpack, Rollup, or Vite. These tools understand ES modules and combine all your files into a single optimized file for production.

Modules are also integral to frontend frameworks like React, Vue, and Svelte, where component-based architecture heavily relies on import/export mechanics.

Conclusion

JavaScript modules offer a structured, clean way to build applications. By using export and import, you can divide your codebase into reusable components that are easier to manage, debug, and test.

To recap:

  • Use named exports when exporting multiple values.
  • Use a default export when exporting a single main functionality.
  • Use import statements to bring in code from other modules.
  • Stick to strict top-level usage.
  • Prefer dynamic imports for lazy-loading or conditional code loading.

Mastering modules is not just about syntax — it’s a mindset shift toward writing scalable, maintainable, and readable code. Whether you’re working on a personal project or collaborating on a large team, understanding JavaScript modules is a must-have skill in your developer toolbox.

Let me know if you want a PDF or HTML version of this, or if you’d like help expanding it into a tutorial with code examples and practice exercises!

Tags: