How to include a JavaScript file in another JavaScript file ? - GeeksforGeeks

31 Jul, 2019
In native JavaScript before ES6 Modules 2015 has been introduced had no import, include, or require, functionalities. Before that, we can load a JavaScript file into another JavaScript file using a script tag inside the DOM that script will be downloaded and executed immediately.
Now after the invention of ES6 modules there are so many different approaches to solve this problem have been developed and discussed below.
ES6 Modules: ECMAScript (ES6) modules have been supported in Node.js since v8.5. In this module, we define exported functions in one file and import them in another example.There are two popular way to call a JavaScript file from another function those are listed below:
Ajax Techniques
Concatenate files
Ajax Techniques Example:
External JavaScript file named as “main.js”// This alert will export in the main filealert("Hello Geeks")
// This alert will export in the main filealert("Hello Geeks")
Main file: This file will import the above “main.js” file<!DOCTYPE html><html>  <head>    <title>        Calling JavaScript file from        another JavaScript file    </title>          <script type="text/javascript">        var script = document.createElement('script');                  script.src = "https://media.geeksforgeeks.org/wp-content/uploads/20190704153043/main.js";                  document.head.appendChild(script)    </script></head>  <body></body>  </html>
<!DOCTYPE html><html>  <head>    <title>        Calling JavaScript file from        another JavaScript file    </title>          <script type="text/javascript">        var script = document.createElement('script');                  script.src = "https://media.geeksforgeeks.org/wp-content/uploads/20190704153043/main.js";                  document.head.appendChild(script)    </script></head>  <body></body>  </html>
Output:
Concatenate files Example: Here importing multiple JavaScript files into a single JavaScript file and calling that master JavaScript file from a function.
External JavaScript file named as “main.js”// This alert will export in the main filealert("Hello Geeks")
// This alert will export in the main filealert("Hello Geeks")
External JavaScript file “second.js”// This alert will export in the main filealert("Welcome to Geeksforgeeks")
// This alert will export in the main filealert("Welcome to Geeksforgeeks")
External JavaScript file “master.js”function include(file) {    var script  = document.createElement('script');  script.src  = file;  script.type = 'text/javascript';  script.defer = true;    document.getElementsByTagName('head').item(0).appendChild(script);  }  /* Include Many js files */include('https://media.geeksforgeeks.org/wp-content/uploads/20190704153043/main.js');include('https://media.geeksforgeeks.org/wp-content/uploads/20190704162640/second.js');
function include(file) {    var script  = document.createElement('script');  script.src  = file;  script.type = 'text/javascript';  script.defer = true;    document.getElementsByTagName('head').item(0).appendChild(script);  }  /* Include Many js files */include('https://media.geeksforgeeks.org/wp-content/uploads/20190704153043/main.js');include('https://media.geeksforgeeks.org/wp-content/uploads/20190704162640/second.js');
Main file: This file will import the above “master.js” file<!DOCTYPE html><html>  <head>    <title>        Calling JavaScript file from        another JavaScript file    </title>          <script type="text/javascript"src="https://media.geeksforgeeks.org/wp-content/uploads/20190704162730/master.js">    </script></head>  <body></body></html>           
<!DOCTYPE html><html>  <head>    <title>        Calling JavaScript file from        another JavaScript file    </title>          <script type="text/javascript"src="https://media.geeksforgeeks.org/wp-content/uploads/20190704162730/master.js">    </script></head>  <body></body></html>           
Output:main.js file import:second.js file import:
javascript-functions
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to calculate the number of days between two dates in javascript?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?