Javascript Exercise #2: Variables, Arrays & Basic Functions

This is a Javascript test

Variables

Declaring the variables. While it is not necessary, if you want to use a variable, it is good practice to declare it first (for scoping reasons). By declaring variables, you are telling the computer that a certain name is to be considered a variable, and that it can have a value associated with it.

For example, take the variable declaration for "x". What you are telling the computer, is: "x is a variable; it is assigned the value 3". Notice, as with y, you can declare that a particular name is a variable separately from assigning a value to that variable (in many older programming languages you have to declare a variable first, before assigning it a value). As you can see, before a value has been assigned to a variable, its value is undefined.

The variables x, y, and z have all been assigned numerical values. However, not all variables are numbers. The quotes indicate that the variable s has been assigned a value which is a character, not a number, despite the fact that the character value it has been assigned is a numeral. The variable str has been assigned a sequence of characters, also known as a string.

Javascript is a loosely or weakly typed language, as opposed to C, which is a strongly typed language. In C, a variable must be given a type when it is declared, and from that point on, that variable can only be of that type. Thus, if a variable is declared to be of type "integer", then it is always an integer (number), and never a real (number), a char (character), or a string. In javascript, however, variables are flexible. Thus, a single variable can be reassigned to be an integer at one point, later it can become a char, and even later it can become a string, or go back to being a number of some sort (a real, say). Furthermore, any variable can be used as if it was a variable of another type. However, while this can be extremely convenient in some applications, it can also lead to really weird and unexpected behavior. Consider the following.

Simple enough, right? 3+2=5, 3-2=1. But writing out all of these "document.write" statements is kind of verbose, annoying, and hard to read. So what happens when we try to simplify it?

Wait a second, 32? What happened? Well, because javascript is loosely typed, and because the "+" operator is overloaded, the javascript interpreter treated x and y as if they were characters, not numbers, and simply appended them together. In javascript, the "+" operator can mean either addition or string concatenation. In this case, the interpreter assumed we meant string concatenation, when we did not. We can fix this in many ways, but the simplest is to introduce order of operations:

The parenthesis work just as they do in high-school algebra: they tell the computer to operate on these symbols first, and do the other operations later. While this makes more sense in strongly-typed languages, in javascript, this gets interpreted as "do this first" and thus because the "this" consists of numbers, the "+" is assumed to mean addition, and the numbers are added together. I find this incredibly annoying, because while you do get more used to it over time, you will always encounter situations where extremely unexpected behavior occurs. Even other loosely typed languages (i.e., php) are less problematic than javascript, simply because they don't overload operators in addition to being loosely-typed. Now let's look at some more examples of confusions that can occur.

Again, what we would expect, s is a character, so the "+" is assumed to be string concatenation. Why is this the case? Well, the most generous type is the type that is always chosen in javascript. Since every number can be converted into a string, but not every character or string can be converted into a number, therefore the numbers are converted into strings.

Now let's look at some other operators:

What happened here? Well, the numbers work fine. But, the strings are a different case. Since multiplication and division are not defined for strings and characters, s is now translated into a number because it can be. But in the case of str, "cameron" cannot be translated into a number, and so we get the output: "NaN", which stands for "Not a Number".

Notice, however, that the infinite number that is the result of y/x is only displayed up to 16 decimal places. This is not just a display property. Computers do not have infinite memory, thus the result of any division can only be stored up until a certain decimal point, even if the correct answer is infinite. Notice, also, that the infinite number is truncated, not rounded. What this means, is that multiplication does not always exactly reverse division on computers, and slight errors can be introduced when doing math on computers. Therefore, for important calculations, for example those made by scientists and engineers, one has to be certain that the numbers which are stored are stored to enough decimal points that the imprecision of the measuring or construction tools outweighs any imprecision introduced by the computer.

Finally, notice that there is no error message when you divide by zero. Rather than being undefined, the computation is defined to be infinity. This is unusual for most programming languages.

Arrays

Functions - The Basics

A Javascript function is basically a piece of code that you want to use more than once. In the above examples, it would be nice not to have to put all those document.write("<div>") and document.write("</div>") statements everywhere. So, we'll make a function to print something out.

Now we can call this function.

Functions have a name and a list of parameters (possibly empty). So, our printVar function takes 1 parameter, named x. x is then declared as a variable within the function. Note that the x used in printVar is different from the x we declared earlier. So, when we use x inside the printVar function, we are using the one declared in the function than the one declared above. This is called variable scope. Variables like students, or email, or document are global variables. They are declared without any restriction on their scope. They are therefore visible to all parts of the program. x, declared in the printVar function has a narrow scope -- available only to that function.

Note that after printVar executes, the global variable x remains unmodified. This becomes important because variables used in one function may not be visible to another function.

Notice that there is no output. Why not? the myVariable variable is not declared in the scope of the output function and therefore is not visible. How can we make it visible to the output function?

This is one way. Here is another.

The 'return myVariable' is returning the result of the function. Not all functions have to return a result. A function can only return one result. After the return statement is executed the function exits. So, say we called return in the middle of a function, like this:

Notice that the function outputed only 1 and 2, not 3 and 4. Because the 'return' statement caused the function to exit. Also notice that I didn't return anything, the value is not defined. If I call the function 'silly' and output the result;

It prints out 1 2 undefined. The 1 and 2 are being printed in the silly function (not being returned). The 'undefined' is the return value of executing silly. This can is perhaps clearer if we use a function that doesn't output anything.

So, nothing is returned, even though we computed a value. This is the same as: