javascript - setting global variables inside a fun

Question

I am trying to create a function which will dynamically set the value of whatever global variable is passed as a parameter. It's not working, and I'm trying to figure out why. Can someone please explain why this doesn't work:

var things = 5;

function setup(variable) {
    variable = 7;
}

setup(things);

console.log(things); //should return 7. returns 5 instead. the function had no effect on the global variable

and this also doesn't work:

var things = 5;

function setup(variable) {
    window.variable = 7;
}

setup(things);

console.log(things); //should return 7, but returns 5. still not accessing the global variable.

but this does:

var things = 5;

function setup(variable) {
    window[variable] = 7;
}

setup("things");

console.log(things); //returns 7

I suspect that what is happening is that the parameter variable is being set as a local variable inside of the function, so any changes are only happening to the local version. But this seems strange because the parameter that's been passed is a global variable. Can someone explain to me what is happening and how to better write this code? Does this require a method (which can then use this to access the original object)?

Thanks!!

Answer 1

When variables are passed as arguments to functions, a copy of their value is made and assigned to the name of the argument in the function.

For example:

function foo(a) {
    a = 7; // sets the temporary variable(argument) a to 7
}

var bar = 24; 
foo(bar); // copies bar's value and passes in the copy to foo

For a function to modify a variable itself, you would have to access it another way. In other languages there are things called pointers that point to a place in memory. This allows you to modify variables directly, as you have where they are located - you can simulate this with JavaScript:

var spam = 3;
var memory = ["bar", 29, "x", foo, false];

function foo(a) {
    memory[a] = 7;
}

foo(3);

The above example sets an array called memory and fills it with random gibberish. Then, a function named foo is created that allows for the modification of elements in this memory array.

Answer 2

Inside of functions are "variable environments". When the function setup is declared, and the parameter variable set, it creates a local variable in setup's variable environment for variable (the parameter).

So that is why this assignment

function setup(variable) {
 variable = 7;
}

Will never change the value sent to variable.

Variables in JavaScript are values. As the variable is passed around, the only thing passed is the value of the variable. However, the value of the variable is assigned to the parameter (again poorly named in this example) variable. When the value of the parameter is assigned to 7, that only changes the local variable, and not the value of the passed variable.

//the value of things is 5
var things = 5;

//the passed value 5 is assigned to variable
function setup(variable) {
  //the value of variable is changed to 7 (and nothing is done with 5)
  variable = 7;
}

//the value of things is sent to setup
setup(things);

Hopefully this will be a little more enlightening. Consider a situation where setup was actually modifying the value of variable. A good example is when the value has state, such as an array or an object.

//the value of things this time is an object
var things = {};

//the passed value of object is assigned to variable
function setup(variable){
 //the value of variable (the object) has a property added named msg with a value of "hello world"
 variable.msg = "hello world";
}

//the value of things (an object) is sent to setup
setup(things);
alert(things.msg);//hello world

Answer 3

Javascript is pass-by-value. (Objects, arrays, and other non-primitives are passed by value-of-reference.) That means that the value of the variable (or reference) is passed to the function, but the function parameter does not become an alias for the actual argument. Thus, you cannot change a variable outside a function without referencing it (as you do in your last example).

See this answer in another thread for more information.