How do I include a JavaScript file in another JavaScript file?

Combining and Importing JavaScript Files Made Easy

Modern JavaScript supports modules natively, allowing you to import code from one file into another seamlessly. In older environments or certain contexts, other approaches—like concatenation, bundlers, or require()—might be more suitable. Let’s explore the most common methods.

Using ES6 Modules (Recommended for Modern Environments)

If your JavaScript files are served as modules and supported by the environment (most modern browsers and Node.js versions support ES modules), you can simply use import and export keywords.

In moduleA.js:

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

In moduleB.js:

import { greet } from "./moduleA.js";

console.log(greet("Alice")); // Outputs: Hello, Alice!

Key Points:

Make sure your script tags include type="module" if running in the browser:
```
<script type="module" src="moduleB.js"></script>
```
ES modules require a web server. They don’t work if you just open the HTML file from the file system (unless using certain browsers or server configurations).

Using `require()` in Node.js

If you’re working in a Node.js environment that uses CommonJS modules (pre-ES module era), you can rely on require():

In moduleA.js:

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

module.exports = { greet };

In moduleB.js:

const { greet } = require("./moduleA");
console.log(greet("Alice")); // Outputs: Hello, Alice!

Key Points:

require() and module.exports are CommonJS patterns primarily used in Node.js before ES modules became the standard.

Using Bundlers (Webpack, Rollup, Parcel)

For complex front-end projects, a bundler is often used. You still use import and export, but the bundler will handle combining multiple files into a single bundle for the browser.

Example with Webpack:

You write your code using import/export.
Run webpack to bundle everything into a single .js file.
Include the bundled file in your HTML.

Using Script Tags for Simple Cases (Not a Direct Include)

While you can’t directly “include” one JavaScript file into another just by reference in pure HTML, you can load multiple scripts:

<script src="moduleA.js"></script>
<script src="moduleB.js"></script>

Here, both moduleA.js and moduleB.js will run in the global scope. However, this is not a best practice for modern development—using modules or build tools provides better maintainability and avoids global namespace pollution.

Strengthening Your JavaScript Fundamentals

Understanding how to structure your code and manage dependencies across files is crucial. Whether you’re just starting out or brushing up on the basics:

Grokking JavaScript Fundamentals: This course helps you build a strong foundation in JavaScript, ensuring that you’re comfortable with language features, modules, and modern best practices.

In Summary

To include one JavaScript file into another:

Use ES modules (import/export) in modern environments.
Use require() and module.exports in Node.js (CommonJS).
Use a bundler to combine multiple files into a single output for front-end projects.
Avoid relying solely on global variables by loading scripts individually without modules.

By following these approaches, you’ll write cleaner, more maintainable code that’s easier to scale and debug.