How to Include One JS File Inside Another: 5 Working Methods

"Assemble Your Code Piece by Piece": Why You Can't Just Insert One JS File into Another

Anyone who has written JavaScript for more than a couple of weeks will eventually hit a wall: "How do I use functions from another file? I can't just copy them back and forth?!" Good old Stack Overflow knows this firsthand — the question "How do I include a JavaScript file in another JavaScript file?" gets thousands of views every month. And it makes sense: in real projects, code grows quickly, and keeping everything in one file is a path to chaos.

In this article, we'll cover 5 proven ways to include one JS file inside another. From ancient methods to modern standards. Let's go!

Method 1: Classic <script> in HTML

The simplest and most ancient way is to just add multiple <script> tags to your HTML file. But there's a catch: files are loaded sequentially. If your main.js depends on utils.js, then utils.js must come first.

<!DOCTYPE html><html><head>    <script src="utils.js"></script>    <script src="main.js"></script></head><body>    ...</body></html>

Problem: This is not including a JS file inside another JS file, but simply a loading order. If you have 20 scripts, you risk getting confused with dependencies. Additionally, all variables and functions become global — hello, name conflicts!

Method 2: ES6 Modules (Modern Standard)

Starting with ES6 (ECMAScript 2015), JavaScript has a built-in module system. This is the most correct way to include one JS file in another in modern projects.

Export from a file (math.js)

// math.jsexport function add(a, b) {    return a + b;}

export const PI = 3.14159;

export default function multiply(a, b) {    return a * b;}

Import in another file (app.js)

// app.jsimport multiply, { add, PI } from './math.js';

console.log(add(2, 3));      // 5console.log(PI);             // 3.14159console.log(multiply(4, 5)); // 20

Important: For this to work in the browser, you need to add the type="module" attribute to the HTML:

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

This method solves all problems: code isolation, clear dependencies, no global variables. Perfect for modern web applications.

Method 3: Node.js require (CommonJS)

If you are writing for Node.js, the standard is CommonJS with the require() function. This method of including a JS file in another JS file is still used in server-side development (although ES6 modules have already arrived there too).

Export (utils.js)

// utils.jsfunction greet(name) {    return `Hello, ${name}!`;}

const secret = 'myPassword123';

module.exports = {    greet,    secret};

Import (server.js)

// server.jsconst utils = require('./utils.js');

console.log(utils.greet('Alex')); // Hello, Alex!console.log(utils.secret);          // myPassword123

Simple, reliable, works everywhere Node.js is available. For browsers — no, only through bundlers (Webpack, Vite).

Method 4: Dynamic Script Loading (Creating a Script Tag)

Sometimes you need to include a JS file from another JS file directly at runtime. For example, when you load analytics or a plugin only when needed. To do this, you can dynamically create a <script> tag.

// loadScript.jsfunction loadScript(src, callback) {    const script = document.createElement('script');    script.src = src;    script.onload =