JavaScript Variables

Working with data is all that programming really is. To make programming practical and efficient, data is categorized into data types. In JavaScript, data types include strings, which are simply quoted characters, numbers, Boolean (true or false), Objects and even a type which has no value at all, Null. Since JavaScript is a loosely typed language, you don't neccessarily need to know what type of data every value is (although it certainly helps!).

Every piece of data in these categories is known as a value. When a value is referred to outright in a statement, it is called a literal value. For the same reason people are identified by names as opposed to "human" or "person", literal values can be named in order to make repeated reference to them practical, efficent and readable. These names are called variables.

"Hello World" // this is a literal value
var greeting = "Hello World" // "greeting" is a variable

Declaring vs. Initializing Variables and Null

To create a variable, the var keyword precedes the variable name, and is used only once for declaration. All future references to the variable are made without the var keyword.

Variables can be assigned values later on, or immediately by following the name with an equals sign, then the value they represent. Assigning a value to a variable immediately is known as initializing the variable. If a variable is not initialized, it has a value of null and has only been declared.

var myVarName   // declare variable, has null value
myVarName = 162   // assign a value, null value is replaced

//OR

var myVarName = 162   // declare AND assign value (initialize)
myVarName = "two hundred" // the value can be changed later on, even to a different type of value

var time,dog,baby //multiple variables may be declared simultaneously
var time = 1, dog = "hairy", baby = true //multiple variables may be initialized simultaneously

Variable Names

Variable names cannot contain spaces, or begin with a number, and all punctuation symbols except for the underscore (_) are restricted. Your variable names should be descriptive of the value they represent if for no other reason than script readability. Be careful to not use reserved keywords for your variable names. A common convention to help avoid using reserved words is using two (or more) word combinations. The two words can either be separated by an underscore (my_variable) or by capitalizing the second word (myVariable). While I prefer the latter, the convention you choose is up to you.

Variable Scope

Variable scope has to do with where a variable can legally be used, and is determined by where it was originally declared or initialized. A variable declared or initialized outside a function body has a global scope, making it accessible to all other statements within the same document. A variable declared or initialized within a function body has a local scope, making it accessible only to statements within the same function body.

Variable Scope - Special Case

If a variable is initialized inside a function body but the var keyword is left off, the variable has a global scope and is only accessible after the function containing it is invoked. It is safer to always use the var keyword, beginner or pro.

Simplifying the Containment Hierarchy Path with Variables

The sample function below selects the text of a form's text input using the methods, focus() and select(). A variable is assigned to the form element object so that only a reference to the name is needed, not the entire path.

function selectValue() {
  var textValue = document.myForm.myElm
  textValue.focus()
  textValue.select()
}

>>Functions
>>JavaScript Variables
>>JavaScript Arguments
>>JavaScript Operators, Expressions and Evaluation
>>Special JavaScript Operators
>>Decision Making: If Statement, Else Clause