CODEWITHSUNDEEP
javascripterror-handlingglobal-variableslocal-variables
CheeseFlavored
CheeseFlavored

Reputation: 2112

Javascript - Make a local variable act like a global

I'm learning about local and global variables. In this program, my function does 2 things. If you enter a number greater than 0 into the function, it sets the Y variable. If you pass a 0, it displays the Y variable.

function sety(x) {
  if (x>0)  y=x;  else alert(y);
}
<button onclick="sety(222)">SET Y to 222</button>
<button onclick="sety(333)">SET Y to 333</button>
<button onclick="sety(0)">display the Y variable</button>

In this example, Y is a global variable. What if I wanted to create a program that contained no global variables? If I put var y in the function, that makes it local, right?, but it doesn't work.

I also have a second question. If I were to click the Display button before setting the variable, I would get an error. I tried adding if(x=="undefined") but that still gave me an error. How can I prevent an error in that situation.

Upvotes: 1

Views: 182

Answers (4)

Ele
Ele

Reputation: 33726

You can access that variable as follow: window.y because you're setting implicitly to the window object when you're doing this y = x.

This is to overcome the undefined variable problem

function sety(x) {
  if (x > 0) y = x;
  else alert(window.y);
}
<button onclick="sety(222)">SET Y to 222</button>
<button onclick="sety(333)">SET Y to 333</button>
<button onclick="sety(0)">display the Y variable</button>

Upvotes: 0

Aniket G
Aniket G

Reputation: 3512

The reason it says that y is undefined if you try to display the variable without settings it is because the line y = x acts like var y = x which defines the variable y. If that line had not executed before you tried to display it (which it wouldn't if you attempted to display it first), then var y would never have happened, which gives you an error. To fix that, you must define y before the else.

The snippet below will be a "local variable". In essence, it just redefines y every time the function is executed. 

function sety(x) {
  var y;
  if (x > 0) y = x;
  else alert(y);
}
<button onclick="sety(222)">SET Y to 222</button>
<button onclick="sety(333)">SET Y to 333</button>
<button onclick="sety(0)">display the Y variable</button>

The snippet below will only define y if it is already not defined. 

function sety(x) {
  if (x > 0) y = x;
  else {
    if (typeof y == 'undefined') {
      var y;
    }
    alert(y);
  }
}
<button onclick="sety(222)">SET Y to 222</button>
<button onclick="sety(333)">SET Y to 333</button>
<button onclick="sety(0)">display the Y variable</button>

Now I wouldn't suggest using the code you used. The snippet below is the code you should use. 

function sety(x) {
  y = x;
}

function gety() {
  if (typeof y == 'undefined') {
    y = 'undefined';
  }
  alert(y);
}
<button onclick="sety(222)">SET Y to 222</button>
<button onclick="sety(333)">SET Y to 333</button>
<button onclick="gety()">display the Y variable</button>

Upvotes: 0

Nina Scholz
Nina Scholz

Reputation: 386654

You could add a property to the function and update it.

function sety(x) {
    if (x > 0) {
        sety.y = x;
    } else {
        alert(sety.y);
    }
}
<button onclick="sety(222)">SET Y to 222</button>
<button onclick="sety(333)">SET Y to 333</button>
<button onclick="sety(0)">display the Y variable</button>

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

Create a closure.

(function() {
    var y; // y is now local to this closure
    window.sety = function(x) {
        // however you still want sety() to be a global function,
        // so you have to do this explicitly
        if( x > 0) y = x;
        else alert(y);
    };
})();

I will note that having a function do two things is generally a bad idea - especially with a name like "set y". Consider separating that out into two functions, sety(x) and gety(), with the latter returning the value instead of just alerting it.

Upvotes: 3

Related Questions