Way back in Part I, Day 2,
I said that the first time you use a variable,
you should declare it with the word "var." I promised that I'd explain
why when I talked about functions. Well, I forgot! So, now is the
time.
Just to jiggle your memory, here's an example of var in use:
var happiness = "a banana split";
alert("The monkeys think happiness is " + happiness);
This little blurb declares a variable called happiness, then
throws up an alert box that uses that variable.
If you've been looking at other people's JavaScript, you might
have noticed that not everyone declares their variables with var, which can cause problems.
First, some versions of MSIE will bomb, or at least act strangely, if a variable isn't declared with
var. This is especially true for MSIE on Macs. Second, if you want to write
JavaScripts of any significant size, you're
going to have to write your own functions. And once you start writing your own
functions, you really need to understand what
var is all about.
The best functions are self-contained. You know what goes into the function and what comes out of it, and, once you've written the function, you don't have to worry about how it works.
As long as all your functions are self-contained, you never have to worry that
writing a new function will accidentally screw up a function you've already written. The key to writing self-contained functions is to make sure that your function
doesn't alter variables that aren't passed directly into them as parameters.
Here's an example of what can happen if you're not careful. Let's say you
want to write a program that converts Fahrenheit temperatures into Celsius. Click the
Fahrenheit/Celsius converter to see
what I mean. If you convert 50 degrees Fahrenheit, you get a message saying,
"50 degrees Fahrenheit is 10 degrees Celsius."
You could write a script without vars that would look something like this:
function fahrenToCelsius(faren)
{
temp = (faren - 32) * 5/9;
return temp;
}
function convertTemp()
{
temp = prompt("what temperature fahrenheit? ","50");
celsius = fahrenToCelsius(temp);
alert(temp + " degrees Fahrenheit is " +
celsius + " degrees Celsius.");
}
The workings of these functions should
be pretty clear to you. One function named convertTemp() calls another
function named fahrenToCelsius() and returns the results. Take a moment to make
sure you understand what's going on. Breath. Breath. If it's just not coming to you,
The confusing thing about this example is that the variable called temp
is used in both functions. In the convertTemp() function, it's
used to store the temperature in Fahrenheit (which is supplied by the user).
In the fahrenToCelsius() function, it's used
to calculate temperature in Celsius. Not only does this confuse
us, it also confuses JavaScript. Here's what happens when you
try running the code
without vars.
Notice that if you try to convert 50 degrees Fahrenheit, you get a message that says, "10 degrees Fahrenheit is 10 degrees Celsius." Why does the program suddenly think you entered 10 degrees instead of 50?
Let's trace the functions to see what happened.
When we call convertTemp() and type "50" into the prompt, we get
temp = 50;
In the next step, "temp" is passed to the function called farenToCelsius().
Inside farenToCelsius(), the parameter called faren is then set to 50 and "temp" gets set to (50 - 32) * 5/9, which is 10. Before returning the value, you have:
faren = 50
temp = 10
Now farenToCelsius() returns 10 to the variable celsius:
temp = 10
celsius = 10
And we're left with the false statement, "10 degrees Fahrenheit is 10 degrees Celsius."
It's possible to solve this issue if you carefully avoid naming
your variables the same thing. If you didn't have a variable called temp
in both functions, you wouldn't have a problem.
Unfortunately, this isn't the best solution. As you start adding more and more functions to your script, it becomes harder to ensure that you're not re-using variable names. Also, you will repeatedly use lots of variable names, like loop, index, count, and the_name. Coming up with different versions of these commonly used variable names would be a real pain.
A better solution is to tell JavaScript that the variable called temp inside
the fahrenToCelsius() function is different from the temp variable in the convertTemp()
function. If every function has its own special temp variable, then you don't have
to worry about certain functions messing with the variables of other functions.
If you haven't guessed yet, this is exactly what var does. Let's take a look.
next page»
