How to Include JavaScript File in Another JavaScript File

Typically, we include JavaScript files on a web page such as .html, .php, etc. and it is imported into the web page when it is loaded by the browser. But sometimes you may need to include JavaScript File into Another JavaScript file. There are several ways to do this. In this article, we will learn how to include JavaScript File in Another JavaScript File.

How to Include JavaScript File in Another JavaScript File

Let us say you have the following .js or .mjs file containing JavaScript function hello, that you want to import into another JavaScript file.

// hello.js -- or the extension could be `.mjs`
export function hello(text) {
  const div = document.createElement('div');
  div.textContent = `Hello ${text}`;
  document.body.appendChild(div);
}

The main difference between a regular JavaScript function and this one is that we add the keyword export at the beginning of function definition so that it can be imported by another JavaScript file.

Here is the code to import the above JavaScript file into another JavaScript file and call its function hello.

<script type="module">
  import { hello } from './hello.js'; // Or the extension could be `.mjs`
  hello('world');
</script>

In the above code, we use import keyword to import the JavaScript file. We specify the path to JavaScript file and also mention the function name we want to import within curly braces. Once it is imported, you can call it as if it is defined in this file itself, as we do usually.

The above example is a static import, that is, the file is imported when the web page is loaded.

Dynamic Loading

You can also dynamically import one JavaScript file into another by adding a script tag with type as module. Here is an example.

<script type="module">
  import('hello.js').then(module => {
      module.hello('world');
    });
</script>

In the above code, we call import() function within script tag whose type is set to module. Within this function, we specify the file path to JavaScript file to be imported, and we also add a callback that returns a Promise, with variable module to refer to the imported JavaScript file. Within this module, you can easily call function hello() as module.hello(). In this case, the script tag is executed after the page is loaded, and JavaScript file is loaded dynamically.

Alternatively, you can also add the following function to your web page or JavaScript file, to dynamically create the script tag itself. Set the script.src value to the URL of required JavaScript file.

function dynamicallyLoadScript(url) {
    var script = document.createElement("script");  // create a script DOM node
    script.src = url;  // set its src to the provided URL
   
    document.head.appendChild(script);  // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)
}

In this case, the JavaScript file will not be imported within another JavaScript file but into your Web page where you add the script tag.

Using JQuery

You can also use Jquery to import JavaScript file into another. Here is an example to do so. We call the getScript() function that imports JavaScript file where it is called. You can even run getScript in an event handler such as button click, if you want to make it dynamic.

$.getScript("hello.js", function() {
   alert("Script loaded but not necessarily executed.");
   hello('world');
});

Within the callback of getScript() you can call the functions defined in the imported JavaScript file. Please note, you need to import Jquery library on your web page, where you include the above code, to make it work. For example, you can add the following code to your web page to import Jquery library on your page.

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

In this article, we have seen several ways to import one JavaScript file into another. Of course, there are many more ways to do this and even many third-party libraries for this purpose. We have chosen a few simple and easy to understand examples so that everyone can quickly use it.

How to Include JavaScript File in Another JavaScript File