Let’s take a minute and swim in the muddy waters of variable declaration and naming in Javascript.
Have you ever opened a box of chocolates full of delicious sweet wonderment only to realize that the paper guide, which tells you what filling is in which chocolate, has gone missing? Let’s up the ante and say you are allergic to coconut – you know – for fun.
Now you are staring at a box of candy which has randomly inserted chocolate covered death balls. They all look the same but in fact are very different types of candy. And if you select the wrong one you’ll be reaching for your EpiPen cursing the dude who stole the key.
I know what you’re thinking – Unfortunately I don’t have any chocolate to munch on either.
The box of chocolates is my overstated take on variables in Javascript. Javascript’s loose nature doesn’t require declaration of variables not to mention the type.
To “Var” or not to “Var”
Although not required: You can declare a variable with “Var”
//You can declare a variable with "var" var myvariable; //You can also set the value of the variable when you declare it. var myvariable = "myvalue"; //if you assign a new variable a value javascript will just declare it for you myvariable = "myvalue";
The true value of declaring variables with “var” is that it keeps that variable private to the function declaring it. By not using “var” the variable is treated as a public/ global variable accessible by the rest of the code.
function setvars(){
firstvar = "one";
var secondvar = "two";
}
setvars();
alert(firstvar); //"one"
alert(secondvar); //Throws an Error - "secondvar is not defined"
Declaring a variable you want to access later? – No var.
Working on a variable required only for the process in which it’s running? – Var.
What “typeof” variable is this?!
Javascript determines the type of variable automatically. This gets confusing when strings are handled as numbers – or objects as strings… or any other undesirable combination of values->types occurs. How does this happen?
// here is a common type issue var firstvar = 1; //type: number var secondvar = "1"; //type: string var thirdvar = firstvar + secondvar; // "11" type:string
In the example above You might have been going for the Number 2 but thirdvar’s value is returned string “11″ as mismatched variables were added together and defaulted to the lowest common denominator – which in this case was a string. (numbers can be read as strings, but strings cannot be read as numbers)
Fear not – Javascript provides the operator “typeof” to return the type of variable.
below are a few examples.
alert(typeof(myvar)); // Undefined
var myvar;
alert(typeof(myvar)); // Undefined
myvar = 1;
alert(typeof(myvar)); // Number
myvar = "one";
alert(typeof(myvar)); // String
myvar = false;
alert(typeof(myvar)); // boolean
myvar = ["one", "two", 3];
alert(typeof(myvar)); // Object
myvar = function(param){return param/2;}
alert(typeof(myvar)); // Function
I have found that one of the most helpful uses of the typof operator is checking to see if variables are set.
For instance if you wanted to see if the jQuery library is defined:
if (typof(jQuery)=='undefined'){
//jQuery not loaded
} else {
//jQuery loaded
}
3 Tips for Dealing with Variables in Javascript
1. Naming convention – adopt a naming convention that clearly communicates type and usage. Perhaps something like “numtotal” – would be a good variable name for a number that represents a total. For reference: Here is Douglas Crockford’s article about code conventions in javascript
2. Find a good tool to develop javascript. I like Firebug for Firefox. The ability to watch expressions, add breakpoints, and logging values to the console from the code (all types – not just strings) make a tool like firebug essential to the javascript programmer.
3. Declare with var when you can. Keeping variables unnecessarily available to all other code can only create more of a programmatic mess. If reusing previously written custom functions without the “var” declarations in a new environment may break the existing code if the variables are named the same.