Variables JS Home  <<  JS Basics  <<  Variables

So what is a variable? Well a variable allows us to store some information that we may want to manipulate or use later. The variable is like a container where we put our information for later retrieval. In JavaScript you create a variable using the keyword var, followed by the name you wish to identify the variable by. The code below creates two variables called aVariable and a_variable.


var aVariable;
var a_variable;

The convention of using an uppercase letter, for the first letter of the second and subsequent words when naming variables is known as camel case. Another method is to use an underscore to seperate words in a variable for readibility. These are good practices to adopt, whilst also making your variables names more readable. Use one method or the other rather than mix both for consistency.

Variable Naming Rules


  • Only letters, numbers, the dollar ($) and underscore (_) symbols are allowed when creating variable names.
  • Only letters, the dollar ($) and underscore (_) symbols are allowed as the first character of the variable name.
  • Variable names are case sensitive.
  • Do not use keywords for variable names.

Using Variables

JavaScript is not a 'strongly typed' language so after variable creation you can store data of any type within it by using the equals symbol (=) via assignment. You can also set a variables initial value at creation as well.


/*
 Creates a variable called aVariable and then assigns the value 25 to it.
 After this we create a variable called bVariable and assign an initial value 
 at the same time.
 */
var aVariable;
aVariable = 25;
var bVariable = 'Candles';

/*
 We could then use these values later in our JavaScript. An example 
 follows which would display the value 25Candles in an alert box.
 */
alert(aVariable + bVariable);

Press the button below to action the above code:

You can also create multiple variables at the same time by delimiting the end of each variable name with the comma (,) symbol. In the following code we create variables with values and also some undefined variables.


// Create three variables with initial value of 0.
var aVariable = 0, bVariable = 0, cVariable = 0;
alert(aVariable + ' ' + bVariable + ' ' + cVariable);


// Create three undefined variables.
var dVariable, eVariable, fVariable;
alert(dVariable + ' ' + eVariable + ' ' + fVariable);

Press the button below to action the above code:

Variable Scope

So what does the terminoloy variable scope mean? Variable scope determines the visibility and lifetime of the variables within it. In JavaScript if you declare a variable outside of any function, it is known as a global variable which means it is visible to all other code in the current document and thus has global scope. A variables declared within a function is only visible and usable locally, within the function it is declared in and as such is known as a local variable.

There is no such thing as block scope in JavaScript as there is in other languages such as Java. In JavaScript a block consists of code between opening and closing braces { }. Any variables declared within the block are considered local to the code that the block resides within. Lets see some examples to explain what we mean by this:


// Create a global variable which is visible throught the document.
var aVar = 1;

// Create a global variable within a block.
if (true) {
  var bVar = 1;
}

// Create a local variable within a function.
(function() {
  var cVar = 1;
  alert('aVar = ' + aVar + ', bVar = ' + bVar + ', cVar = ' + cVar);
})();

Press the button below to action the above code:

As we can see the variable declared outside the function are visible as they are from global scope. If you moved the alert out of the function we would get an error as the cVar variable would not be found.

Reviewing The Code

There are various ways we can create and initialize our variables and we just need to follow a few simple rules to use them effectively.

Lesson 6 Complete

In this lesson we looked at variables and the rules governing their usage.

Related Tutorials

JavaScript Basic Tutorials - Lesson 2 - JavaScript Syntax

Reference

JavaScript Reference - var statement

JavaScript Reference - undefined global variable