Change global variable value with a function from inside window.onload

Question

I'm building a calculator. Why is the addToStr function not able to change the values of the global variables? (I sampled just some switch-statement cases to shorten the code).

window.onload = function () {

$(".buttons").click(function () {
    var id = $(this).attr("id");

    switch (id) {
        case "b-7":
            value = "7";
            console.log(value);
            addToStr(miniDisplayString, value);
            addToStr(numberString, value);
            break;
        case "b-8":
            value = "8";
            addToStr(miniDisplayString, value);
            addToStr(numberString, value);
            break;
        case "b-9":
            value = "9";
            addToStr(miniDisplayString, value);
            addToStr(numberString, value);
            break;
        case "b-divide":
            value = " / ";
            addToStr(miniDisplayString, value);
            break;
    }

    console.log("total = " + total);
    console.log("miniDisplayString = " + miniDisplayString);
    console.log("numberString = " + numberString);
});
}


var total = 0;
var value;
var miniDisplayString = "";
var numberString = "";


function addToStr(tot, val) {
     tot += val;
}

Mystical · Accepted Answer · 2016-12-25T01:30:40.460

0

You cannot pass values by reference in javascript, it thinks you are simply trying to use the variables' value. In order to do so, you would need to use pointers, which are not available in a language like javascript. In order to achieve this by using your current method, you would need to create a global variable for each reference, and set them each time with a different function. (You would need a separate function per variable, and only take 'value' as an argument; and set the variable to the corresponding value passed to the function 'addTo<varName>'). However, this method seems unnecessary and highly inefficient. Just setting them manually in your code, wouldn't hurt at all; Like so:

testStr += val; // This should not be nested inside a function like addToStr.

... instead of using a separate function for each and every reference, which is honestly not necessary at all, not in your case nor in general. You can also return the new value in the function and use that, but again; not necessary at all.

edited Dec 25 '16 at 01:30

answered Dec 25 '16 at 01:09

Mystical

2,505
2
24
43

1

Why not pass the name of the global variable as a string and use `window[globalVarName] += val`? – Swimburger Dec 25 '16 at 12:18
1

I will get rid of the function, thanks. I read up on _passing by value vs reference_ [HERE](http://stackoverflow.com/questions/518000/is-javascript-a-pass-by-reference-or-pass-by-value-language) and _Ray Perea_'s answer helped. – amirtatin Dec 25 '16 at 12:35
1

@sniels Doesn't work. If I understand correctly, the values are passed and modified inside the function, but that modification only lives inside the function. In order to change it globally, one needs to: run the function (the changes occur inside the function), then assign the function's return to the global variable, like `globalVar = addToStr(globalVar, value);`. Highly inefficient, as WEB_UI stated. – amirtatin Dec 25 '16 at 12:51
1

Still very pointless to set them through `window` or the `this` object referring to the global scope, but good point, you can use that outside of the function. For a scripting language like javascript, pass-by-reference isn't a very pleasant option; unless you want to go *object oriented*, and pass *objects* (or even *modular*, and pass [*closures*](https://developer.mozilla.org/en/docs/Web/JavaScript/Closures)). – Mystical Dec 25 '16 at 14:25
1

It would work, but I wouldn't recommend storing the variables globally. Wrap everything in another function to create a closure and follow WEBUI's recommendation. – Swimburger Dec 25 '16 at 15:27

Change global variable value with a function from inside window.onload

1 Answers1