How to include a JavaScript file in another JavaScript file ?

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”
  filter_none

  edit
  close

  play_arrow

  link
  brightness_4
  code

  // This alert will export in the main file alert("Hello Geeks")

  chevron_right

  filter_none

• Main file: This file will import the above “main.js” file
  filter_none

  edit
  close

  play_arrow

  link
  brightness_4
  code

  <!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>

  chevron_right

  filter_none

• 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”
  filter_none

  edit
  close

  play_arrow

  link
  brightness_4
  code

  // This alert will export in the main file alert("Hello Geeks")

  chevron_right

  filter_none

• External JavaScript file “second.js”
  filter_none

  edit
  close

  play_arrow

  link
  brightness_4
  code

  // This alert will export in the main file alert("Welcome to Geeksforgeeks")

  chevron_right

  filter_none

• External JavaScript file “master.js”
  filter_none

  edit
  close

  play_arrow

  link
  brightness_4
  code

  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');

  chevron_right

  filter_none

• Main file: This file will import the above “master.js” file
  filter_none

  edit
  close

  play_arrow

  link
  brightness_4
  code

  <!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>

  chevron_right

  filter_none

• Output:
  main.js file import:
  
  second.js file import:
  

ashishsaini3

Check out this Author's contributed articles.