Passing Global Variable to Function - Global Variable Not Updating After Function Run

Question

My code increments a number up or down by 1. The problem is "testNum" which is a global variable should reflect the increments up or down but when I check the value of "testNum" in the console it's always 20. I pass "testNum" to my function and return it. Why isn't it reflecting the increments?

Fiddle: http://jsfiddle.net/FnUXw/1/

<input type="button" id="btnDown" value="-">
<span id="amountDiv">amount div</span>
<input type="button" id="btnUp" value="+">

<script>
var testNum = 20;

amountDiv.innerHTML = testNum;

function makeButtonIncrement(button, upDown, displayDiv, variable) {

    function changeValue () {
        if (upDown == "up") {
            variable++;
        }

        if (upDown == "down") {
            variable--;
        }

        displayDiv.innerHTML = variable;
    }

    button.onclick = changeValue;

    return variable;
}

makeButtonIncrement(document.getElementById('btnDown'), "down", document.getElementById('amountDiv'), testNum);

makeButtonIncrement(document.getElementById('btnUp'), "up", document.getElementById('amountDiv'), testNum);
</script>

[JavaScript passes primitives by value, not by reference](http://stackoverflow.com/questions/518000/is-javascript-a-pass-by-reference-or-pass-by-value-language). — DCoder, Feb 23 '13 at 21:15
why are you passing in the variable if its a global variable — Parv Sharma, Feb 23 '13 at 21:16
@ParvSharma I want to use this function with different buttons and variables throughout my code. — user1822824, Feb 23 '13 at 21:18
how does it matter when the variable to be accessed is a global one? — Parv Sharma, Feb 23 '13 at 21:21

jfriend00 · Accepted Answer · 2022-03-20T15:03:36.023

4

Numbers are passed by value, not by reference so you can't do what you're trying to do that way. With your code structured the way it is, you could do it like this where you assign the return value:

testNum = makeButtonIncrement(document.getElementById('btnDown'), "down", document.getElementById('amountDiv'), testNum);

Only arrays and objects are passed by reference so they can be passed as arguments and have the function modify the original variable. Other types are passed by value (e.g. a copy is made for the argument) so you cannot modify the original.

The work-around to modify the original is to pass it as a property of an object. Then, because the object is passed by reference, the function can modify the original property value.

Or, since you're already using a global variable, you could just modify the global variable directly and not even pass it as an argument. It is the passing as an argument that makes a copy of it so you can't modify the original. Global variables are, in general, not recommended, but if it's already global for other reasons, you can just modify it directly in your function without passing it as an argument.

edited Mar 20 '22 at 15:03

answered Feb 23 '13 at 21:17

jfriend00

683,504
96
985
979

@JanDvorak - Correct term for what? – jfriend00 Feb 23 '13 at 21:20
for that is the passed value is either a primitive value or an object reference – John Dvorak Feb 23 '13 at 21:21
@JanDvorak - the normal programming terms I'm familiar with that apply to all languages are "pass by value" and "pass by reference". I suppose you could say that javascript has pass by object (array or object) which turns out to be pass by reference. – jfriend00 Feb 23 '13 at 21:23
@JanDvorak - in your article, it says: 'However, the term "call by sharing" is not in common use'. – jfriend00 Feb 23 '13 at 21:37

score 0 · Answer 2 · answered Feb 23 '13 at 21:18

You are using "variable++" and "variable--" which is incrementing or decrementing that locally scoped variable (local to the function scope). The parameter is not a pointer to the global variable, it is passed by value (not by reference).

The simplest modification would be to change variable++ and variable-- to testNum++ and testNum-- respectively and remove that final function parameter as it is unnecessary.

score 0 · Answer 3 · answered Feb 23 '13 at 21:24

function makeButtonIncrement(button, upDown, displayDiv) {

    function changeValue () {
        if (upDown == "up") {
            testNum++;
        }

        if (upDown == "down") {
            testNum--;
        }

        displayDiv.innerHTML = testNum;
    }

    button.onclick = changeValue;
}

Passing Global Variable to Function - Global Variable Not Updating After Function Run

3 Answers3