How do I change the value of a global variable inside of a function

Javascript

Javascript Problem Overview


I am using JavaScript and I create a global variable. I define it outside of a function and I want to change the global variable value from inside a function and use it from another function, how do I do this?

Javascript Solutions


Solution 1 - Javascript

Just reference the variable inside the function; no magic, just use it's name. If it's been created globally, then you'll be updating the global variable.

You can override this behaviour by declaring it locally using var, but if you don't use var, then a variable name used in a function will be global if that variable has been declared globally.

That's why it's considered best practice to always declare your variables explicitly with var. Because if you forget it, you can start messing with globals by accident. It's an easy mistake to make. But in your case, this turn around and becomes an easy answer to your question.

Solution 2 - Javascript

var a = 10;

myFunction();

function myFunction(){
   a = 20;
}

alert("Value of 'a' outside the function " + a); //outputs 20

Solution 3 - Javascript

Just use the name of that variable.

In JavaScript, variables are only local to a function, if they are the function's parameter(s) or if you declare them as local explicitely by typing the var keyword before the name of the variable.

If the name of the local value has the same name as the global value, use the window object

See this jsfiddle

x = 1;
y = 2;
z = 3;

function a(y) {
  // y is local to the function, because it is a function parameter
  console.log('local y: should be 10:', y); // local y through function parameter
  y = 3; // will only overwrite local y, not 'global' y
  console.log('local y: should be 3:', y); // local y
  // global value could be accessed by referencing through window object
  console.log('global y: should be 2:', window.y) // global y, different from local y ()

  var x; // makes x a local variable
  x = 4; // only overwrites local x
  console.log('local x: should be 4:', x); // local x
  
  z = 5; // overwrites global z, because there is no local z
  console.log('local z: should be 5:', z); // local z, same as global
  console.log('global z: should be 5 5:', window.z, z) // global z, same as z, because z is not local
}
a(10);
console.log('global x: should be 1:', x); // global x
console.log('global y: should be 2:', y); // global y
console.log('global z: should be 5:', z); // global z, overwritten in function a

Edit

With ES2015 there came two more keywords const and let, which also affect the scope of a variable (Language Specification)

Solution 4 - Javascript

var a = 10;

myFunction(a);

function myFunction(a){
   window['a'] = 20; // or window.a
}

alert("Value of 'a' outside the function " + a); //outputs 20

With window['variableName'] or window.variableName you can modify the value of a global variable inside a function.

Solution 5 - Javascript

<script>
var x = 2; //X is global and value is 2.

function myFunction()
{
 x = 7; //x is local variable and value is 7.

}

myFunction();

alert(x); //x is gobal variable and the value is 7
</script>

Solution 6 - Javascript

A simple way is to use var

var apple = null;
const some_func =()=>{
      apple = 25
}
some_func()
console.log(apple)

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionNullPoiиteяView Question on Stackoverflow
Solution 1 - JavascriptSpudleyView Answer on Stackoverflow
Solution 2 - JavascriptChrisView Answer on Stackoverflow
Solution 3 - JavascriptyunzenView Answer on Stackoverflow
Solution 4 - JavascriptSterling DiazView Answer on Stackoverflow
Solution 5 - JavascriptIman SedighiView Answer on Stackoverflow
Solution 6 - JavascriptMD SHAYONView Answer on Stackoverflow