JavaScript Variables

I like to think of variables as containers on a container ship. You can put all different types of content into the containers, move them to another port, empty them, and then replace the container with new content. However, the container ship analogy suffers when you realize that the content in the containers must have magical properties. If you have a container full of numbers and you add a string, the whole container magically becomes a string. Because JavaScript is untyped (or weakly typed), both the contents and the characteristics of the variable can change. The main point, though, for readers new to the concept of a variable is that variables are containers with changeable contents.

Declaring and Naming

JavaScript, like most scripting languages, has two basic ways of declaring a variable. Variables are declared using the var word. You simply type in var followed by a variable name and value. The following are typical examples:

var item;
var price= 33.44;
var wholeThing= 86.45 + (20 *7);
var name="Willie B. Goode";
var address "123 Elm Street";
var subTotal=sumItems
var mixString= 11.86 + "Toy Cats";
var test = (alpha > beta)

By taking each variable one at a time, you can see how the different data types discussed are placed into a variable:

The first example demonstrates that you can declare a variable but not give it a value. Such variables have an undefined value.
The second variable contains simple primitive data-a numeric literal with a value of 33.44.
The third variable is a compound variable made up of a numeric primitive and a compound expression.
The fourth variable is defined as a simple string literal.
The fifth variable is also a simple string literal, but it uses a mix of digits and letters.
Sixth, the variable is defined with another variable.
The seventh variable is a mix of a numeric primitive and a string primitive, creating a string variable.
Finally, the last variable is a Boolean value derived from compound data.

Declaring a variable alerts the computer to the fact that a new variable is available to use. After a variable is declared, it need not be declared again. For example, in loop structures, the counter variable can be defined in the initialize section, but not in the test or change (increment/decrement) sections. For example, the following code segment shows that the variable named counter is declared in the first segment but then is not declared again:

for (var counter=0; counter < 40; counter++) {....

Some programmers like to initialize all of their variables at the beginning of a script with undefined values. Then later they can use them without having to remember to add var. Also, you can have a single line with several variable definitions, with each variable separated by a comma or a semicolon, as the following script illustrates.

clutter.html

<html> 
<head> 
<script language="JavaScript"> 
var a=20; b=30, c="wacka wacka do"; gap=" "; 
document.write(a+ gap + b + gap +c); 
</script> 
<body bgcolor=#C0FFEE> 
</body> 
</html>

I generally avoid declaring more than a single variable on a line. Multiple declarations in a line, while workable, can clutter what has been defined and what a variable has been defined as. The script clutter.html amply illustrates such confusion. (By the way, the character following the c in the bgcolor value is a zero, [0], not a capital O.)

You may omit the var keyword in your variable declarations, and you undoubtedly will see scripts in which the programmers have done so. For example, the following are perfectly good examples of such declarations:

acme = "The Best"; 
cost = 23.22;

While JavaScript accepts these declarations for global variables, you can run into problems elsewhere by omitting var. (See the note in the following section.) Thus, for a good programming habit that will avoid problems, always use the var keyword when declaring a variable.

Global and Local Variables

Variables in JavaScript have scope. The scope refers to the regions of the script where the variables can be used. A global variable, as the name implies, has global scope and is defined in the entire script. Local variables are local to the functions in which they are defined. As a general rule, avoid naming any two variables, whether local or global, with the same name or identifier.

NOTE

While using the keyword var is optional in declaring global variables, problems can arise if you do not incorporate var in defining your local variables. When using var in a local variable declaration, the program recognizes it as a local variable, not a change in the value of a global variable. With no var keyword used, your script cannot tell the difference, and you risk inadvertently changing the value of a global variable. The moral to this story is to always use the var keyword for variable declaration.

Within a function, a local variable has precedence over a global variable of the same name. So, if your global variable named ID has the value Fred, and a function also with a variable named ID has a value of Ethel, the name Ethel will appear when the function displays the variable's value. However, if you display the value of the ID variable from outside the function, the value will be Fred.

The following script uses four variables to demonstrate these differences. Two global variables are defined, and then two local variables are defined within a function. One of the global and local variables share a common identifier, localGlobal. When fired from the function, the local variable's value is displayed; when displayed from the global script, the global variable's value is displayed.

GlobalLocal.html

<html> 
<head> 
<script language="JavaScript"> 
var onlyGlobal="This variable is only global!"; 
var localGlobal ="I\'m global now!"; 
      function showMe( ) {
           var localGlobal="I\'m now local"; 
           var onlyLocal="Only works on the local level." 
           alert(localGlobal + " -- " + onlyLocal); 
           } 
showMe( ); 
document.write(onlyGlobal + "<p>"+ localGlobal); 
alert(onlyGlobal); 
</script> 
<body bgcolor=#CadDad> 
</body> 
</html>

1. The ''with'' Statement
Like the ternary conditional operator, the with statement is a shortcut. Instead of having to list all of the properties of an object by repeating the basic objec...

2. Conditional Structures
The "thinking" structure in JavaScript is found in the different types of conditional statements in the language. Used in concert with different types of comparative oper...

3. Types of operators in JavaScript
Assignment Operators The key assignment operator is the equals sign (=). The left operand is a variable, an array element, or an objec...

4. JavaScript Lives in a Web Page
All the code that you write for JavaScript goes into an HTML page. If you don't know HTML yet, you should run out and get a good book on HTML. Lynda and William Weinman's...

5. JavaScript Literals
The raw data that make up the root of data types are called "literals." These are, in effect, literally what they represent themselves to be. Numbers, strings, and Boolea...

6. JavaScript Operators
Operators can be placed into three categories-binary, unary, and ternary. Binary operators, most commonly associated with the concept of operator, take two (binary) expres...

7. JavaScript Arrays
Because objects are collections of properties with each property having its own name and value, arrays are actually JavaScript objects. Each property in an array is an el...

8. Loops in JavaScript
Loops in JavaScript are similar to loops in C++ and Java and most other languages using loop structures. In this section, you will find explanations of the different type...