Lesson 3: Variables

In our last lesson, we looked at a couple versions of the same program: Hello World. In this lesson, we’ll move on to one of the most elementary components of Javascript: variables.

What is a Variable?

As you probably already know or have read in the Variables Programming Lesson, variables are essentially containers for data. We use variables to store data that we wish to use and change later.

Almost Typeless

Javascript is essentially typeless. When you create a variable, you don’t have to explicitly declare a type for that variable. However, that doesn’t mean that you don’t have to worry about variable types.

For example, if you want to do math, you have to make sure you are using a number variable type (integer or float). If you want to concatenate (combine) two strings, you have to make sure you are working with strings.

Usually Javascript will figure out the appropriate type (or types) of a variable when you give it a value. For example, if you set a variable to equal 1, it will know this can work as both an integer and a float. If you set the variable to something like “book”, Javascript will know this can work as a string.

However, if you do something like get information from an HTML form, that is always going to be a string, even if you want it as a number. To fix this, Javascript has a couple of parse functions which allow you to convert one pseudo-type to another. For the other variable types, Javascript will convert it itself when used certain ways.

Variable Types

In Javascript, our basic variables are: integer, floating-point numbers, strings and boolean values.

Integers are whole numbers that don’t have decimal values. To convert something to an integer, you use the parseInt() function, specifying the value you want to convert as the parameter, or the variable in between the parentheses after the function name. Here is an example:

aString = "51";
anInt = parseInt(aString);
anInt = anInt + 10;
alert(anInt); // Will display a pop-up showing 61

Floats (floating-point numbers) are numbers that can have a decimal. To convert something to a float, you use the parseFloat() function, just like the parseInt() function. Here is an example:

aString = "32.52";
aFloat = parseFloat(aString);
aFloat = aFloat + 15.2;
alert(aFloat); // Will display a pop-up showing 37.72

Notice how in both of those I set the string with quotations, but when I add a number it is without quotions. A number without quotation marks is counted as a number. In Javascript, a number is always a float by default. To get an integer (as in, to do integer arithmetic), you must explicitly call parseInt().

A string is a collection (or string) of characters. To declare a string you, you simply place whatever you want within the string inside of double-quotation marks (“”). Also, to convert a number to a string, you simply have to concatenate (add) it with a string. Here is an example:

aString = "this is a string";
aNumber = 5;

anotherString = "" + 5; // This is now a string.
yetAnotherString = "5"; // This is equivalent to anotherString now.

A boolean is a true/false value. To declare a boolean you simply specify it as either true or false (no quotation marks). Also, in Javascript, 0 and 1 are equivalent to false and true. So, you can parseInt() a string containing 0 or 1 and use it as a boolean value as well.

aString = "0";
aBoolean = parseInt(aString); // Equals 0, which equals false

anotherBoolean = true;
alert(aBoolean); // Displays a pop-up which says 0
alert(anotherBoolean); // Displays a pop-up which says true

The difference between having 0 act like a false and actually setting it to false is that when it is converted to a string (which alert() does), it will show differently. Other than that, there is really no functional difference.

Arrays

There are also arrays in Javascript, though they are what is known as an “object”, which is basically a custom data type. We will discuss these when we reach our lesson on objects and pseudo-classes, as well as other objects such as Date, which contains a time.

In this lesson we discussed the specifics of using the basic data types: integer, float, string, and boolean. In our next lesson we’ll take a look at some of the specifics involved at performing basic arithmetic in Javascript.

If you haven’t yet, now would be a good time to read Programming Lesson 8: Arithmetic and Operators Programming Lesson in preparation for the next Javascript lesson.

Also, if you haven’t yet, you can read Programming Lesson 7: Variables to get a better understanding about variables in general.