Class 5 – Javascript Variables

March 6th, 2009 § 0

In Javascript, as in most high-level programming languages, we have access to some of the computer’s memory.  At any point in our code, we can store things in memory that we want to use later on.

It may not be clear at the moment why we would want to use memory, but it will come into play in everything we do for the rest of this course.  The same principles we will go over here will apply to PHP coding, as well any programming languages you learn in the future.  So although these examples may seem abstract at first, it is imperative that you follow the concepts and understand how they are being used.

Variables are symbols that represent data

The simplest way of storing data is with what is termed a variable.  If you remember basic algebra, you may recall that you encountered formulas where some of the values were replaced with variables.  In algebra, a variable is a symbol that represents a number.  For example, a simple formula for a straight line looks something like this:

y = x + 1

If you imagine that x is replaced with the number 3, then your formula would become:

y = 3 + 1

…which means that:

y = 4

In this example, the letter “x” is a variable.  It is a placeholder for some data stored in memory.  In this example, you “remember” that x has the value 3, so everywhere you see the letter “x”, you know that it should be replaced by the number 3.  But you could just as easily use the same formula for other values of x.  For example, if x=5, then following the formula, y=5+1, which means y=6.

Variables in programming languages come in a variety of data types

In most programming languages, unlike algebra, not all variables hold numbers.  Some can hold text or more complicated types of data.  For example, imagine we had a formula that assembles a sentence:

y = "Hello " + name

If you imagine that “name” is a variable that holds someone’s name, such as “Amos”, then you can see that:

y = "Hello " + "Amos"

…which, if you use the plus sign to concatenate the two bits of text, means that:

y = "Hello Amos"

So here we have a formula that deals with variables that store text, not numbers.  In programming parlance, variables, like this, that hold text are called “strings“.

Defining variables in Javascript

In Javascript, you can define variables as follows:

var x = 3;
var y = x + 1;

In this case, we have declared (assigned a name to) a variable “x” and defined it as having the value 3, which tells the computer to store the number 3 in the piece of memory associated with the symbol “x”.  We have also declared the variable “y” and assigned it the value of x+1, which in this case tells the computer to first evaluate the expression x+1, realize that it is equal to 4 (since x=3), and then store the number 4 in the piece of memory associated with the symbol “y”.

Note that all variables must be declared, and that variable declarations must be preceded with the keyword “var”.  Also note that Javascript commands must end in a semi-colon.

The second time we referred to “x”, in the second line of code, it is not preceded by the keyword “var” – this is because “x” has already been declared once in the first line of code, and we do not have to re-declare it when we use it subsequent times.

Variables vs. Literals

In the second line of code in the example above, we have the following:

var y = x + 1;

There are two variables in this line: “x” and “y”.  There is also the number 1.  Whenever we use a raw value, rather than a variable, it is known as a “literal“.  So 1, in this case, is a literal.

The same concept applies to variables that hold other types of data, such as strings:

var name = "Amos";
y = "Hello " + name;

In the second line of code in this example, “Hello” is a literal, whereas “name” is a variable.  In Javascript, literals that are numbers do not need quotes around them.  But all literals that are strings must be surrounded by quotes.  It doesn’t matter whether you use single or double quotes, so long as you start with the same kind of quote that you end with.

Variable Names in Javascript

In Javascript, variable names must not have any spaces or special characters in them, but they can use the underscore “_” character.  A common convention is to use CamelCase for variables that have more than one word.  For example, if I wanted to create a variable that held someone’s first name in it, I might name it using CamelCase in the variable declaration:

var firstName;

Notice that the first word is not capitalized, but the first letter of the second word is. Some people capitalize the first letter of all words, but in Javascript, it is common to see the first word all lowercase.  The reason this convention is called CamelCase is because the capitalized letters look almost like humps on a camel’s back:

var thisIsALongVariableNameThatLooksSimilarToCamelHumps;

Variable types in Javascript

Unlike many other programming languages, variables in Javascript are “loosely typed”.  This means you do not have to explicitly state what type of data the variable will hold when you declare it.

For example, a variable that previously held an integer can be later used to hold a string:

var i = 100; //declare the variable and assign it the literal 100
i = i + 1; //increase the value stored in the variable by 1 (i.e. "i" is now 101)
i = "this is not a number anymore!"; //reassign the variable a string value

In many other languages, this would produce an error.  In Javascript, it’s fine, which may be confusing to people who have previous experience programming more strictly-typed languages like C, C++, or Java.

No related posts.

Tagged:

§ Leave a Reply

What's this?

You are currently reading Class 5 – Javascript Variables at Web Development Intensive.

meta