[SOLVED] Global and local variable problem

noober · November 14, 2009

Hi, fellow freakers. I am reading Sams Teach Yourself Javascript in 24 hours and have come into a question which I can't seem to logically figure out on my own. I think it would be a fairly easy explanation so I'll post my thank you right here for the great response I'm sure I'll receive.

Here is the example code from the book:

<html>
<head>
<title>Local and Global Variables</title>
<script LANGUAGE="JavaScript" type="text/javascript">
var name1 = "Fred";
var name2 = "Ethel";
function Greet(who) {
alert("Greetings," + who);
var name2 = "Barney";
}
</script>
</head>
<body>
<h1>Function Example: the Sequel</h1>
<p>Prepare to be greeted twice.</p>
<script LANGUAGE="JavaScript" type="text/javascript">
Greet(name1);
Greet(name2);
</script>
</body>
</html>

My understanding is that the local variable "var name2 = "Ethel";" takes precedence over "var name2 = "Barney";", but if I delete var name2 = Ethel;, the alert doesn't pop-up for Barney, which I expected to happen. If I change "Greet(name2)" to "Greet(name3)" and var name2 = Barney; to var name3 = Barney;, still nothing pops up for Barney. What am I missing here? Why can't I get Barney to come up as an alert as a local variable?

.josh · November 15, 2009

var name1 = "Fred";

var name2 = "Ethel";

those are global variables, because they are assigned outside of a function.

var name2 = "Barney";

Is the local variable, as it is assigned inside the function. If you did this in your function instead:

name2 = "Barney";

it would be assigning "Barney" to the global variable you already established. But you have 'var' in front of it in your variable, which creates a local variable with the same name as your global variable. If you remove that 'var' in front of it in your function, the next time it is called, it will show "Barney". The keyword being the next time, because you are assigning it after the alert.

noober · November 15, 2009

I completely understand what you're saying, but I'll re-word one of the questions I have because I'm still wondering why.

If I remove the global variables, and just have Barney as the local variable, then call name2, such as in the code below, why doesn't Barney come up as an alert when the page is loaded, since afterall, it is a local variable in the function? How would I make that happen. I'm just curious, because I can't imagine it wouldn't be possible.

<html>
<head>
<title>Local and Global Variables</title>
<script LANGUAGE="JavaScript" type="text/javascript">
function Greet(who) {
alert("Greetings," + who);
var name2 = "Barney";
}
</script>
</head>
<body>
<h1>Function Example: the Sequel</h1>
<p>Prepare to be greeted twice.</p>
<script LANGUAGE="JavaScript" type="text/javascript">
Greet(name2);
</script>
</body>
</html>

.josh · November 15, 2009

in that code, name2 is local to the function, so it only exists within that function, and only when the function is actually executing. So when you try to pass it as an argument to the function, javascript is looking for a global name2 variable. Since there is none, you are passing null to the function, so 'who' is null. Also, inside your function, you are assigning something to name2 but not actually doing anything with it.

A global variable is a variable that is set outside of the function, and can be accessed inside the function. A local variable is set inside the function and can only be accessed within that function.

example1:

// this is a variable being set globally
var x = 'hello';

// this is a global variable being used on global level
alert(x); // will alert 'hello'

example2:

// this is a variable being set globally
var x = 'hello';

function blah() {
  // this is a global variable being used locally
  alert(x); // will alert 'hello'
}
blah();

example3:


function blah() {
  // this is a local variable being set locally 
  var x = 'hello';
  alert(x); // will alert 'hello'
}
blah();

alert(x); //this will give you an error because x is not defined on the global level

In your example code (the last one you posted) you are trying to pass 'name2' to Greet() but 'name2' doesn't exist on the global level, so it passes a null value to 'who'. Then you assign 'barney' to name2 but that's a local variable so after the function ends, name2 gets destroyed, so when you call Greet() a 2nd time, it's not going to be there just the same.

Inside a function the local variable takes precedence, but it's not quite as it seems it should be.

Example4

var x = 10;

function blah() {
  var x = 20;
  alert(x); // alerts 20
}
blah();
alert(x); // alerts 10

In this example, 20 gets alerted inside the function, and 10 gets alerted outside of the function. Well here's the caveat:

example5:

var x = 10;

function blah() {
  alert(x); // you would think this would alert 10, but it alerts 'undefined'
  var x = 20;
  alert(x); // alerts 20
}
blah();
alert(x); // alerts 10

So why does that first alert(x) show 'undefined'? It seems as though it should alert 10, right? But it doesn't. I don't know 100% why but I think it has to do with how js is parsed internally. Like, it pre-parses the function and sees that somewhere down the line you're going to be overwriting the global x with a local x and therefore kills the global reference, but since the var x = 20 isn't actually parsed at that point, it's showing up as undefined. That's my best guess, anyways. Maybe someone better versed in javascript can confirm/clarify.

noober · November 15, 2009

Hmm. Ok, fair enough. I'm not sure it'll ever come up again or really matter anyway. I guess it would make sense that since you try to call it outside the function, it comes up null for one reason or another. It's still a bit odd imo. Thanks for your explanations.

.josh · November 15, 2009

Hmm. Ok, fair enough. I'm not sure it'll ever come up again or really matter anyway. I guess it would make sense that since you try to call it outside the function, it comes up null for one reason or another. Thanks for your explanations.

Yes. That is the point of it being a local variable.

function something() {
  var x = 'blah';
}

alert(x); // this will give you an error

in this example, x is local to function something(). It only exists inside that function, and when the function ends, the variable is destroyed. Now what you can do is return the value of x. Example:

function something() {
  var x = 'blah';
  return x; // this will return 'blah' to whatever called the function
}

var y = something(); // since 'blah' is being returned, you can assign it to a variable
alert(y); // this will echo 'blah'
alert(something()); // alternatively, this will also echo 'blah'

noober · November 17, 2009

Ah, yes! The solution wasn't as simple as I might have thought, being that you have to go that one slight extra step, but the return is definitely what I was looking for. Thanks, hopefully I'll see that again later in the book.

Sign In

[SOLVED] Global and local variable problem

Recommended Posts

noober

Link to comment

Share on other sites

.josh

Link to comment

Share on other sites

noober

Link to comment

Share on other sites

.josh

Link to comment

Share on other sites

noober

Link to comment

Share on other sites

.josh

Link to comment

Share on other sites

noober

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information