Web Page Programming (Using HTML and JavaScript)

Lesson 12 JavaScript - Variables

What is a Variable
A variable is a temporary storage of values or expressions. Expressions are formulae that use mathematical symbols and
numbers or a way to assign values to a variable. For example, x = 1 + 3 is an expression and the value of x will hold the sum
of one plus three which is equivalent to four.

In declaring a variable, there are certain rules to follow:

❖ Variables names are case-sensitive meaning an uppercased variable like “X” does not have the same meaning as “x”
❖ Variables names must begin with a letter or underscore (‘_’)
❖ The rest of the name must be composed of letters, numbers or underscore
❖ Avoid naming variables with reserved words. Reserved words are words reserved by JavaScript for its own use

Take note that if you did not declare a variable and you gave the variable a value, the variable will be automatically declared.

Variables can hold numbers, expressions or string literals. String literals are text enclosed in pairs of quotation marks. Numeric
digits that are inside the quotation marks will be considered as a string and will lose then its numeric value. If the characters
are not enclosed in quotation marks, JavaScript might interpret the characters as an object or function.

Example of variable declaration:

var x = 5;
var y = x + 5;
var fan = “Standard”;
var isDone = false;

1|Page
 Web Page Programming (Using HTML and JavaScript)

JavaScript Datatypes
One of the most fundamental characteristics of a programming language is the set of data types it supports. These are the
type of values that can be represented and manipulated in a programming language.
JavaScript allows you to work with three primitive data types:
❖ Numbers, e.g., 123, 120.50 etc.
❖ Strings of text, e.g. "This text string" etc.
❖ Boolean, e.g. true or false.

JavaScript also defines two trivial data types, null and undefined, each of which defines only a single value. In addition to
these primitive data types, JavaScript supports a composite data type known as object. We will cover objects in detail in a
separate chapter.

Note: Java does not make a distinction between integer values and floating-point values. All numbers in JavaScript are
represented as floating-point values. JavaScript represents numbers using the 64-bit floating-point format defined by the
IEEE 754 standard.

JavaScript Variables
Like many other programming languages, JavaScript has variables. Variables can be thought of as named containers. You
can place data into these containers and then refer to the data simply by naming the container.
Before you use a variable in a JavaScript program, you must declare it. Variables are declared with the var keyword as follows.
<script type="text/javascript">
<!--
var money;
var name;
//-->
</script>

You can also declare multiple variables with the same var keyword as follows:
<script type="text/javascript">
<!--
var money, name;
//-->
</script>

2|Page
 Web Page Programming (Using HTML and JavaScript)

Storing a value in a variable is called variable initialization. You can do variable initialization at the time of variable creation
or at a later point in time when you need that variable.
For instance, you might create a variable named money and assign the value 2000.50 to it later. For another variable, you
can assign a value at the time of initialization as follows.
<script type="text/javascript">
<!--
var name = "Ali";
var money;
money = 2000.50;
//-->
</script>
Note: Use the var keyword only for declaration or initialization, once for the life of any variable name in a document. You
should not re-declare same variable twice.
JavaScript is untyped language. This means that a JavaScript variable can hold a value of any data type. Unlike many other
languages, you don't have to tell JavaScript during variable declaration what type of value the variable will hold. The value
type of a variable can change during the execution of a program and JavaScript takes care of it automatically.

JavaScript Variable Scope

The scope of a variable is the region of your program in which it is defined. JavaScript variables have only two scopes.
❖ Global Variables: A global variable has global scope which means it can be defined anywhere in your JavaScript code.
❖ Local Variables: A local variable will be visible only within a function where it is defined. Function parameters are
always local to that function.

Within the body of a function, a local variable takes precedence over a global variable with the same name. If you declare a
local variable or function parameter with the same name as a global variable, you effectively hide the global variable. Take a
look into the following example.
<script type="text/javascript">
<!--
var myVar = "global"; // Declare a global variable
function checkscope( ) {
var myVar = "local"; // Declare a local variable
document.write(myVar);
}
//-->
</script>

3|Page
 Web Page Programming (Using HTML and JavaScript)

JavaScript Variable Names

While naming your variables in JavaScript, keep the following rules in mind.
❖ You should not use any of the JavaScript reserved keywords as a variable name. These keywords are mentioned in
the next section. For example, break or boolean variable names are not valid.
❖ JavaScript variable names should not start with a numeral (0-9). They must begin with a letter or an underscore
character. For example, 123test is an invalid variable name but _123test is a valid one.
❖ JavaScript variable names are case-sensitive. For example, Name and name are two different variables.

JavaScript Reserved Words

A list of all the reserved words in JavaScript are given in the following table. They cannot be used as JavaScript variables,
functions, methods, loop labels, or any object names.

4|Page