JavaScript global variable across files

In JavaScript, it is possible to define global variables that can be accessed across multiple files. To do this, you can define your global variables in a separate JavaScript file and then reference that file in an HTML file, the global variable can be accessed from any script in the HTML file.

JavaScript global variable across files example

A simple example code creates a new file called helpers.js and define it like this:

// Declare global variable
var myFunctionWasCalled = false;

// Define function that uses global variable
function doFoo() {
  if (!myFunctionWasCalled) {
    alert("doFoo called for the very first time!");
    myFunctionWasCalled = true;
  }
  else {
    alert("doFoo called again");
  }
}

code.html file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test Page</title>
    <!-- Include JavaScript file -->
    <script src="helpers.js"></script>
  </head>
  <body>
    <p>myFunctionWasCalled is <span id="myFunctionWasCalled"></span></p>
    
    <!-- Call function -->
    <script>
      doFoo();
    </script>
    
    <p>Some stuff in between</p>
    
    
    <!-- Update span with value of global variable -->
    <script>
      var myFunctionWasCalledSpan = document.getElementById("myFunctionWasCalled");
      myFunctionWasCalledSpan.textContent = myFunctionWasCalled;
    </script>
  </body>
</html>

Output:

The code.html file includes the helpers.js file and then calls the doFoo() function twice. It also includes a span element with an id of myFunctionWasCalled, which is used to display the value of the myFunctionWasCalled global variable on the page.

Another example

file1.js file:

// Declare global variable
var counter = 0;

// Define function that increments the counter
function incrementCounter() {
  counter++;
}

file2.js file:

// Declare global variable
var message = "Hello, world!";

// Define function that displays a message using the global variable
function displayMessage() {
  alert(message);
}

index.html file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test Page</title>
    <!-- Include JavaScript files -->
    <script src="file1.js"></script>
    <script src="file2.js"></script>
  </head>
  <body>
    <p>Counter: <span id="counter"></span></p>
    <p>Message: <span id="message"></span></p>
    
    <!-- Call functions from file1.js and file2.js -->
    <script>
      incrementCounter();
      displayMessage();
    </script>
    
    <!-- Update spans with values of global variables -->
    <script>
      var counterSpan = document.getElementById("counter");
      counterSpan.textContent = counter;
      
      var messageSpan = document.getElementById("message");
      messageSpan.textContent = message;
    </script>
  </body>
</html>

In this example, there are two JavaScript files (file1.js and file2.js) that declare their own global variables (counter and message, respectively) and define their own functions that use those variables.

The index.html file includes both JavaScript files and then calls the incrementCounter() function from file1.js and the displayMessage() function from file2.js. It also includes two span elements with ids of counter and message, respectively, which are used to display the values of the global variables on the page.

Comment if you have any doubts or suggestions on this JS global variable topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version

JavaScript global variable across files