Variables

Variables are used to store data; they are placeholders for concrete values. When writing programs, it's convenient to use variables instead of the actual data, as it's much easier to write pi instead of 3.141592653589793, especially when it happens several times inside your program. The data stored in a variable can be changed after it was initially assigned, hence the name "variable". You can also use variables to store data that is unknown to you while you write the code, such as the result of a later operation.

Using a variable requires two steps. You need to:

To declare a variable, you use the var statement, like this:

var a;
var thisIsAVariable; 
var _and_this_too; 
var mix12three;

For the names of the variables, you can use any combination of letters, numbers, the underscore character, and the dollar sign. However, you can't start with a number, which means that this is invalid:

var 2three4five;

To initialize a variable means to give it a value for the first (initial) time. You have two ways to do so:

An example of the latter is:

var a = 1;

Now the variable named a contains the value 1.

You can declare (and optionally initialize) several variables with a single var statement; just separate the declarations with a comma:

var v1, v2, v3 = 'hello', v4 = 4, v5;

For readability, this is often written using one variable per line:

var v1, 
    v2, 
    v3 = 'hello', 
    v4 = 4, 
    v5;

Variables are case sensitive

Variable names are case sensitive. You can easily verify this statement using your JavaScript console. Try typing this, pressing Enter after each line:

var case_matters = 'lower';
var CASE_MATTERS = 'upper'; 
case_matters;
CASE_MATTER;

To save keystrokes, when you enter the third line, you can type case and press the Tab key (or right-arrow key). The console autocompletes the variable name to case_matters. Similarly, for the last line, type CASE and press Tab. The end result is shown in the following figure:

Throughout the rest of this book, only the code for the examples is given instead of a screenshot, like so:

> var case_matters = 'lower';
> var CASE_MATTERS = 'upper';
> case_matters;
"lower"
> CASE_MATTERS;
"upper"

The greater-than signs (>) show the code that you type; the rest is the result as printed in the console. Again, remember that when you see such code examples, you're strongly encouraged to type in the code yourself. Then, you can experiment by tweaking it a little here and there to get a better feeling of how exactly it works.

Note

You can see in the screenshot that sometimes what you type in the console results in the word undefined. You can simply ignore this, but if you're curious, here's what happens: when evaluating (executing) what you type, the console prints the returned value. Some expressions (such as var a = 1;) don't return anything explicitly, in which case they implicitly return the special value undefined (more on it in a bit). When an expression returns some value (for example case_matters in the previous example or something such as 1 + 1), the resulting value is printed out. Not all consoles print the undefined value, for example the Firebug console.