Learn how to build and design websites with our tutorials.

Javascript Variables Tutorial

View Tutorial Contents


Javascript Variables

In Javascript, variables are containers for storing data values.

In the example below, "x" and "y" are variables.

<script language="javascript">
var x = 1;
var y = 2;
</script>

In the example above:

In Javascript, variables can also contain other variables.

<script language="javascript">
var x = 1;
var y = 2;
var z = x + y;
</script>

In the example above:

Javascript variables can also be used in expressions, as shown in the example above (z = x + y).


Javascript Identifiers

All Javascript variables must have unique names. These unique names are called identifiers.

The general rules for naming variables (unique identifiers) are listed below:

View a list of the Javascript reserved words.

When naming your Javascript variables, you should avoid using words that are already the names of Javascript objects or functions, for example, parseInt.


Javascript Assignment Operator

In Javascript, the equal sign (=) is called an assignment operator. It assigns a value.

In the example below, x is equal to 1.

<script language="javascript">
var x = 1;
</script>

In Javascript, the "equal to" operator is written as ==.


Javascript Data Types

Javascript variables can contain (or hold) different types of values. These different types of values are called data types.

This tutorial will only briefly go over the Javascript data types.

The list below lists the different types data types that Javascript variables can contain.


What Are Data Types?

In computer programming, Javascript for example, a data type is a way to classify data, for example, string, number, etc. This data classification allows the program to be able to do something with and also to store the value. Values are stored in variables.

The example below has variables with data types that are numbers. The result of adding both variable is a number. The result is possible because the data types of the variables x and y are numbers.

<script language="javascript">
function add() {
    var x = 5;
    var y = 10;
    var z = x + y;
    alert(z);
}
</script>

The example above outputs:

15

In the example below, the data type of the variable x is a string. This results in a different output than the example above because you cannot add a string data type and a number data type and get a number.

<script language="javascript">
function add() {
    var x = "5";
    var y = 10;
    var z = x + y;
    alert(z);
}
</script>

The example above outputs:

510

There are ways to manipulate data types, for example, you can convert some string data types into number data types. That will be covered in other tutorials.


Javascript and Dynamic Typing

Dynamic typing in Javascript means that a variable can contain a value that is one data type and then the same variable can be used to contain a different value that is a different data type.

In the example below, the value of the variable is changed multiple times and each time the value is a different data type.

<script language="javascript">
var x;               // x is an undefined data type
var x = 5;           // x is now a number data type
var x = "John";      // x is now a string data type
</script>


Declaring (Creating) Javascript Variables

You can declare (create) variables in Javascript with the var keyword.

The example below shows you how to declare a variable.

<script language="javascript">
var person;
</script>

The example above only declared a variable, it did not assign a value to it, so the variable is empty. To assign a value to a variable, use the equal (=) sign.

The example below assigns a value to a variable that has already been declared.

<script language="javascript">
person = "John";
</script>

You can assign a value to a variable when you declare it.

In the example below, a variable is declared and a value is assigned to it at the same time.

<script language="javascript">
var person = "John";
</script>

The example below shows you one way to output the variable using alert function, which we will cover in another tutorial.

<script language="javascript">
var person = "John";
function display() {
    var x = "John";
    alert(x);
}
</script>

It is a good practice to declare all of your variables at the beginning of your scripts.


Declaring Multiple Variables at Once

You can declare (create) each variable individually or you can declare multiple variables in one statement.

To declare multiple variables at once, start with the var keyword and then separate the variables with commas.

The example below declares multiple variables at once.

<script language="javascript">
var person = "John",
car = "Ford",
price = 20,000; 
</script>


Re-Declaring Javascript Variables

If you only re-declare a variable in Javascript, it will not lose its value.

The example below only re-declares a Javascript variable.

<script language="javascript">
var person = "John";
var person;
</script>


Javascript String Data Types

Javascript variables can hold text values, for example, "name". In any programming language, text values are called strings.

Javascript string values must be written inside either single or double quotes, for example, 'name' or "name".

The example below shows two variables that contain string values.

<script language="javascript">
var firstName = "John";
var lastName  = "Stevens";
</script>


Javascript Number Data Types

Javascript variables can also hold numbers, for example, 10. Numbers are written without quotes. If you put quotes around a number, that number value will be treated as a string.

The example below shows two variables that contain number values.

<script language="javascript">
var x = 10;
var y = 5;
</script>


Javascript Boolean Data Types

Boolean data types have two possible values: true or false.

Boolean data types are not surrounded by quotes. false is not the same as "false" and true is not the same as "true".

Boolean variable values are most commonly used within "if", "if else" statements and "while" loops. For example:


<script language="javascript">var a = true;
if(a == true)
{
document.write("this is some text");
}</script>

The result for this example would be:


this is some text


Javascript Null Data Types

The null data type in Javascript: null.

In Javascript, a null data type is meant to be empty, this is not the same as zero (0). A variable that contains the null value contains no valid string, number, boolean, array or object. Assigning a variable a null value can erase the contents of that variable without deleting the variable.

In Javascript, the data type of null is an object, although it really should see it as null.

The example below empties the object by setting it to null.


<script language="javascript">
var person = null;
</script>


Javascript Undefined Data Types

A Javascript variable that has not been assigned a value or does not exist has the value of undefined.

The example below assigns the variable a value of undefined.


<script language="javascript">
var person = undefined;
</script>


Javascript Array Data Types

In Javascript, arrays are basically lists. These arrays (lists) are written with square brackets ([]). Items within an array are separated by commas.

The example below declares (creates) an array called people. The array contains three items (people's names):


<script language="javascript">
var people = ["John", "Mary", "Mike"];
</script>

Array indexes are zero-based, this means that the first item within an array is [0], the second is [1], the third is [2], and so on.


Javascript Object Data Types

In Javascript, objects are written with curly braces. Object properties are written in name:value pairs and are separated by commas.

The example below is a variable that contains an object. The example has 4 properties: firstName, lastName, age and sex.


<script language="javascript">
var person = {firstName:"John", lastName:"Doe", age:21, sex:"male"};
</script>