JavaScript, accessing a global variable through a function

Question

Before I specify what I am struggling with, let me show you my JavaScript codes.

var gVar = 0;

$("#plus").click(function(e) {
    e.preventDefault();
    gVar = gVar + 1;
    alert(gVar);
});

$("#minus").click(function(e) {
    e.preventDefault();
    gVar = gVar + 1;
    alert(gVar);
});

In the code above, I first set a global variable 'gVar' that holds a integer value of zero. Whenever I click a button whose ID is "plus", the value of the global variable 'gVar' is going to increment by 1, which will be printed out in a browser's dialogue box.

The same thing will happen for the button whose ID is "minus" except that the value of 'gVar' is going to decrement by 1.

In my attempt to tidy up the code above, I created a function separately, which will be called whenever I click the two buttons. Here are the code.

var gVar = 0;

var weird = function (button, Var, num1) {
    $(button).click(function(e){
        e.preventDefault();
        Var = Var + num1;
        alert(Var);
    });
};

weird("#plus", gVar, 1);
weird("#minus", gVar, -1);

When I run this code, the value of 'gVar' never changes and always stays '0'.

I think I vaguely know what the issue here is, but not entirely sure what is causing this problem. Any input will greatly be appreciated to clarify this issue for me.

Also, I am curious as to if there is any way to create a function to achieve the same effect instead of writing a similar set of code twice for the two different click events.

It's an int; the parameter won't be the global value. You could create a global object with a counter in it. — Dave Newton
– Dave Newton, Commented Jan 19, 2016 at 18:08
I think that simple type parameters (int in your case) are not passed by reference to the function, that's why you need to pass an object type parameter to the function, as @DaveNewton wrote — Alon Eitan
– Alon Eitan, Commented Jan 19, 2016 at 18:13

Michał Perłakowski · Accepted Answer · 2016-01-19 19:10:17Z

4

In JavaScript, only objects are passed as a reference, all other types, including numbers, are copied when you assign them to another variable.

You can instead pass your variable name as a string and then refer to it as window[Var]:

var gVar = 0;

var weird = function (button, Var, num1) {
    $(button).click(function(e){
        e.preventDefault();
        window[Var] = window[Var] + num1;
        alert(window[Var]);
    });
};

weird("#plus", "gVar", 1);
weird("#minus", "gVar", -1);

As @shiplu.mokadd.im suggested, you can also change gVar to object:

var gVar = {value: 0};

var weird = function (button, Var, num1) {
    $(button).click(function(e){
        e.preventDefault();
        Var.value = Var.value + num1;
        alert(Var.value);
    });
};

weird("#plus", gVar, 1);
weird("#minus", gVar, -1);

edited Jan 19, 2016 at 19:10

answered Jan 19, 2016 at 18:24

Michał Perłakowski

93.4k30 gold badges165 silver badges189 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Antiokus · Accepted Answer · 2016-01-19 18:20:17Z

1

No matter what the function is, you cannot reassign an argument and expect the scope to reflect that change. Depending on the argument however, you can modify it (i.e. if gVar were an object or an array). I suggest you read about pass by reference/value to gain a better understanding of what this means here

the essence of a global variable is that it is global to the whole program, and as such - doesn't need to be passed as argument to any function.

so without modifying too much of your original code

var gVar = 0;

var weird = function (button, num1) {
    $(button).click(function(e){
        e.preventDefault();
        gVar += num1;
        alert(Var);
    });
};

weird("#plus", 1);
weird("#minus", -1);

answered Jan 19, 2016 at 18:20

Antiokus

5443 silver badges8 bronze badges

1 Comment

Antiokus Over a year ago

by object, I mean the general definition in JS world - i.e. an instance of a class or an anonymous object {}. Agreed that an array is an instance of the Array class, so technically it is definitely an object. So yes, all objects are pass by reference. But we generally like to differentiate "object" and "array" - it's context dependent.

Mohammed Raja · Accepted Answer · 2016-01-19 19:19:49Z

0

var gVar = {
  value: 0
};

var weird = function(button, Var, num1) {
  $(button).click(function(e) {
    e.preventDefault();
    Var.value = Var.value + num1;
    alert(Var.value);
  });
};

weird("#plus", gVar, 1);
weird("#minus", gVar, -1);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="+" id="plus">
<br>
<input type="button" value="-" id="minus">

answered Jan 19, 2016 at 19:19

Mohammed Raja

2072 silver badges9 bronze badges

1 Comment

Michał Perłakowski Over a year ago

This is basically a copy of my answer.

Collectives™ on Stack Overflow

JavaScript, accessing a global variable through a function

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related