Working with JavaScript variables

Topic status automatically displays here - do not remove.

Bookmark this topic  Print this topic

By Colin Ramsden, August 2008.

JavaScript variables

JavaScript (JS) variables are used to temporarily store data, values, and information, for short periods of time.

JS variables are used within the script, by the script. The lifetime of a variable is directly dependant upon its scope. A variable created within an object, like a function for example, has the scope of the object, and lifetime of the object. When the object no longer has any running code, it ceases to exist, and any variables it contained also cease to exist.

Similarly, a JS variable created within a script outside of an object, has global scope, and a lifetime to match the life of the script. If the script is attached to an HTML page, for example, the lifetime of its global variables will match the lifetime of the HTML page, once loaded and running in a browser.

JS variables in their simplest form are a single JS object primitive. JS variables are explicitly declared using the "var" keyword, followed by the variable name, and optionally can be assigned a value to store within the variable:

var myVar;
var myVarBool = true;
var myVarNum = 12345;
var myVarTxt = "text string";

Multiple JS variables can also be explicitly declared (and optionally be assigned values) in the same JS statement, when separated by commas:

var myVar, myVarBool = true, myVarNum = 12345, myVarTxt = "text string";

JS is a loosely "typed" language—which does not mean that it was created on a shonky keyboard!

JS variables do not require a data type like other scripting languages do, such as Visual Basic Script (VBS). Instead, JS is an object-oriented language, and makes use of JS object types. JS variables declared without an explicit object type are implicitly coerced to the object type of the value assigned to the variable. For example, a variable value:

• containing the value of true or false will be treated as a boolean object type;
• enclosed in quotes and containing text will be treated as a text string and assigned to a string object type;
• containing a numeric value will be treated as a number and assigned to a numeric object type.

var varBool = true; //boolean object type
var varTxt = "text string"; //string object type
var varNum = 12345; //number object type

You can see the object types of these variables by exposing them with the JavaScript typeof() function in the following alert:

var msg = "varBool object type: " + typeof(varBool);
msg += "\n" + "varTxt object type: " + typeof(varTxt);
msg += "\n" + "varNum object type: " + typeof(varNum);
alert(msg);

JS variables declared without an object type can hold any object type, and are coerced when the value is assigned. For example, if you have a number that looks like a string, it will be treated as a string and not a number:

var varNum = 12345; //implicitly declared as a number object type 
var varString = "12345"; //implicitly declared as a string object type 
var objString = new String("54321"); //explicitly declared as a string object type

You can view the data types to confirm that a string can hold a number-like value:

var msg = "varNum object type: " + typeof(varNum);
msg += "\n" + "varString object type: " + typeof(varString);
msg += "\n" + "objString object type: " + typeof(objString);
alert(msg);

If you attempt to perform math on a string object which contains a numeric-like value, it will be coerced to a numeric object type for the operation:

var myVarNumString = new String("54321"); //explicitly declared as a string object type
var myVarResult = myVarNumString - 54320; //results in coerced numeric value of one
alert("Result: " + myVarResult)

If you attempt to perform math on a string object which does not contain a numeric-like value, the operation will fail with the result "NaN" (Not a Number):

var myVarTxt = "text string"; //string object type
var myVarResult = myVarTxt - 54320; //results in NaN (Not a Number)
alert("Result: " + myVarResult)

You can see what the data types are in the following example, where they have been exposed using the JavaScript "typeof()" function in the alert:

var myVarTxt = "text string"; //string object type
var myVarResult = myVarTxt - 54320; //results in NaN (Not a Number)
var msg = "myVarTxt object type: " + typeof(myVarTxt);
msg += "\n" + "myVarResult object type: " + typeof(myVarResult);
msg += "\n" + "Result: " + myVarResult;
alert(msg);

 

 

 

 

Who am I? > find out more