How to change the value of a global variable inside of a function using JavaScript?

Javascript Web Development Front End Technology

There are two types of variables can be declared in any programming languages in context of their accessing scope. The Local variable and the Global variable.

Global Scoped Variables − The global scoped variables are the variables which are declared globally inside the code file and can be accessed by any code block or any function inside the file. The scope of these variables is global.

Local Scoped Variables − These are the variable, which declared inside a function or a particular block of code and can only be accessed or used within that particular block of code not outside that code block. The scope of these variables is limited to that particular code block, that is why these are local scoped variables.

In this article, we will learn how we can change the value of a Global variable in the code file inside a function using JavaScript.

It is very simple any easy to change the value of the global variable inside a function using JavaScript. In JavaScript, we can change the value of the global variable in two ways as written below −

Directly changing the value.
Changing value using square bracket syntax.

Let us understand the practical implementation of these methods in details with the help of code examples.

Directly changing the value

In this method, we can directly change the value of the global variable by using its name to assign a new value to it.

Syntax

Following syntax will help you to understand how to you can directly access and change the value of the global variable −

var global_variable_name = initial_value;
function() {
   global_variable_name = new_value;
}

Let us understand the practical implementation of this method with help of JavaScript code example.

Algorithm

Step 1 − In the first step, we will add two different input elements to the HTML document with a value of number to the type attribute of each, to get the two numbers input from the users of their choice.
Step 2 − In the next step, we will add a button element in the document to with onclick event which takes a function and calls it later when user clicks the button.
Step 3 − In the third step, we will define a JavaScript function and assign it as a value to the onclick event of the button added in previous step.
Step 4 − In this step, we will grab the values entered inside the input elements by the user and change the value of the global variable with the product of those two values. All of these operations are performed inside the function declared in previous step.

Example

The below example will explain you how you can change the value of a global variable in a function using JavaScript −

<html>
<body>
   <h2> Change the value of a global variable inside of a function using JavaScript </h2>
   <p id = "upper">The initial value that is assigned to the global variable <b>globe is: 8</b></p>
   <p>Enter any two numbers:</p>
   <input type = "number" id = "inp1"> <br> <br>
   <input type = "number" id = "inp2"> <br> <br>
   <button id = "btn" onclick = "changeVal()">click to change the value</button>
   <p id = "result"> </p>
   <script>
      var result = document.getElementById("result");
      var globe = 8;
      function changeVal() {
         var inp1 = document.getElementById("inp1");
         var inp2 = document.getElementById("inp2");
         var num1 = Number(inp1.value);
         var num2 = Number(inp2.value);
         var prevGlobe = globe;
         globe = num1 * num2;
         result.innerHTML += " The value of the global variable <b> globe </b> is changed from <b> " + prevGlobe + " </b> to <b> " + globe + " </b> the product of the two numbers <b> " + num1 + " * " + num2 + " </b> entered by you. <br> ";
      }
   </script>
</body>
</html>

In the above example, we can clearly see that, we are changing the value of the global variable globe from 8 to the product of the two numbers entered by the user every time inside a function named changeVal().

Square bracket syntax to change the value

This is another method or syntax to change the value of the global variable inside a function using JavaScript. In this method, instead of accessing the variable directly, we will use the square bracket syntax to access and change the value of it.

Syntax

Following syntax will show you how to use the square bracket syntax to access and change the value of the global variable −

var global_variable = initial_value;
function() {
   window['global_variable'] = new_value; 
}

Let us implement this method practically and try to change the value of a global variable in the code example.

Algorithm

The algorithm of this example is similar to the algorithm of the previous example. You just need to change the syntax of accessing the variable inside the function from direct syntax to the square bracket syntax. The below example will help you understand the changes you have to perform in details.

Example

Below example will illustrates you the use of the square bracket syntax in accessing and changing the value of global syntax −

<html>
<body>
   <h2>Change the value of a global variable inside of a function using JavaScript</h2>
   <p id = "upper">The initial value that is assigned to the global variable <b>globe is: 8</b></p>
   <p>Enter any two numbers:</p>
   <input type = "number" id = "inp1"> <br> <br>
   <input type = "number" id = "inp2"> <br> <br>
   <button id = "btn" onclick = "changeVal()">click to change the value</button>
   <p id = "result"> </p>
   <script>
      var result = document.getElementById("result");
      var globe = 8;
      function changeVal() {
         var inp1 = document.getElementById("inp1");
         var inp2 = document.getElementById("inp2");
         var num1 = Number(inp1.value);
         var num2 = Number(inp2.value);
         var prevGlobe = window['globe'];
         window['globe'] = num1 * num2;
         result.innerHTML += " The value of the global variable <b> globe </b> is changed from <b> " + prevGlobe + " </b> to <b> " + globe + " </b> the product of the two numbers <b> " + num1 + " * " + num2 + " </b> entered by you. <br> ";
      }
   </script>
</body>
</html>

In this example, we have used the square brackets syntax to access and change te value of the global variable globe from initial value to the product of two entered numbers.

In this article, we have learned about two different methods of changing the value of the global variable from initial value to some new value. We have discussed both of these methods in details with the help of code examples for each method to see the practical implementation of them.