How to Define Global Variable in a JavaScript Function

A JavaScript variable is a container for storing data values. To declare a global variable, you can use the var at global scope like this:

Watch a course JavaScript -The Complete Guide (Beginner + Advanced)

Javascript global variable
let yourGlobalVariable = "global value"; //global variable function displayGlobalVal() { console.log(yourGlobalVariable); //global variable , result is "global value" } displayGlobalVal();

Alternatively, assign the property to a window because, in JavaScript, you can define global variables inside a function using the window object. The window object is a global object in JavaScript that represents the current window or tab in the web browser.:

Javascript global variable
function display() { window.yourGlobalVariable = "global value"; console.log(yourGlobalVariable); } display();

In ECMAScript 2015 specification, let, class, and const statements at global scope create globals that are not properties of the global object.

However, avoid using the global scope and wrap your code in a scoping function and use local variables to that scoping function, and make your other functions closures within it like this:

Javascript global variable
(function () { // Begin scoping function let yourGlobalVariable = "global value"; // Global to your code, invisible outside the scoping function function display() { console.log(yourGlobalVariable); } display(); })(); // End scoping function

Global and Local Variables

Local function variables are declared inside a function in JavaScript. Local variables can be accessed only within the specified function. That is why, you can't reach them from any other function in the document.

It is recommended to use local variables in JavaScript functions because it allows using variables with the same name, as they are local variables that stay within separate functions. While using local variables, you can access them in the current function; in other words, the program will only access a variable in the scope of that variable.

All the variables created outside of functions are called global variables. These objects can be accessed throughout the website. They require different names for your global variables; otherwise, the browser will fail to display your desired action. Global variables have a global JavaScript scope. All functions can access it throughout the whole web page.

How to share a value between two or more script sections?

To share a value between two or more script sections on your web page, you can define a global variable and assign a value to it in one script section, and then access the same variable and its value in another script section.

Here's an example:

<!-- First script section -->
<script>
  window.mySharedValue = "Hello, world!";
</script>

<!-- Second script section -->
<script>
  console.log(window.mySharedValue); // Outputs "Hello, world!"
</script>

In this example, we're defining a global variable called mySharedValue in the first script section and assigning a value to it. We can then access the same variable and its value in the second script section by using the window object.

Note that defining global variables can make your code harder to manage and maintain, and can cause naming conflicts and unexpected behavior. It's generally better to avoid using global variables and instead use local variables and pass values between functions using arguments and return values.