Variables are basic JavaScript information carriers. I compare them to the bucket on an excavator: a crude container that can hold almost anything, with the limitation that what the variable carries can only be picked up and dumped out as one thing.

By understanding variables, you can understand how to make your first effective pieces of JavaScript code.

Naming Variables

In JavaScript, a variable identifier – it’s “name” - must begin with a letter, underscore or dollar sign: thereafter, the name can be almost anything you wish.

Unlike CSS class and id values, JavaScript variable names cannot contain hyphens. Neither can they have spaces, or be any of the following:

In strict mode – discussed in a future article – there are a half-dozen more reserved words, but don’t worry about them right now. It’s unlikely that you’ll use any reserved words to identify variables if you keep to the rule that variable names must be unique and descriptive.

JavaScript is case-sensitive, meaning that variable names that use the same word with different uppercase or lowercase letters are treated as different variables: schtako is a different variable from Schtako. For this reason it’s very common to use camelCase for variable names: userScore, for example.

Declaring Variables

Variables should always be created by using var. A variable declaration may include the variable’s initial value, although it does not have to:

var ark; // a variable named ark with no value and an undefined type
var ark = "Arkfall" // a variable named ark initialized with a string value

It is very common to declare variables at the start of a script. If declaring more than one variable at a time, you can place commas between them to shortcut the process:

var ark = "Angelfall", haven = "Adder", halfLife = 21;

It’s possible to create a variable without using the var keyword, although this is not recommended, for reasons I’ll discuss in an upcoming article.

Types

In JavaScript, variables may contain several different types of values. JavaScript variables are dynamically typed – that is, they can contain any of the different value types at any time. Specialized variables may also be arrays and objects. JavaScript automatically determines the type of variable from its value; you can determine that by yourself by using typeof:

var enumerator = 12
typeof enumerator
< "number"

You can also use typeOf to check if a variable has a value; a valueless variable will be undefined:

var slimTable;
if (typeof slimTable === 'undefined') { 
	…
}

Variables as pointers

Variables are often used to address objects in the DOM. For example, if your page has a <main> element, it might be referenced in a script as:

var contentContainer = document.querySelector("main");

From this point the variable becomes a shortcut for the object, and can do everything the original can. For example, in a console window, type:

contentContainer.offsetWidth

The answer you get will be the current width of the page’s <main> element, measured in pixels. This doesn’t break our “a variable can only contain one thing” rule, as the variable is simply acting as a pointer to the object.

Conclusion

Once you have a handle on variables, it’s time to learn their opposites: constants.

Photograph by Shutter Runner, used under a Creative Commons Attribution Non-Commercial 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.