JavaScript global variables

Example page

Let’s start with a simple HTML page with a script built into it:

Ignoring the JavaScript code for the moment, you should find that when you load that page in your browser, you are able to change the text of the link (which doesn’t actually go anywhere) by repeatedly clicking on it. You will also notice, if you check with the W3C validator, that this is a valid XHTML document.

What you should already know

The script in this example page makes use of the proper functions for manipulating the XHTML document, which may not be familiar to people, so I will explain roughly what is going on here. Firstly, the function has a reference to the HTML element which was clicked, because the onclick method sends “this” as its only argument, which is a special feature JavaScript has for doing just this sort of thing. The alternative would be for the method to send in a string such as firstLink as its argument, and putting id="firstLink" in the HTML for the link, but then the function would have to turn this string into a reference to the correct part of the document.

Anyway, with a reference to the link that was clicked, the code proceeds to get a reference to the text inside it, namely “Original text”. It doesn’t extract the string itself, but simply stores a reference to the part of the document which consists of that string. This reference is assigned to a variable called “textElement”. Then, the removeChild() function is used, which removes a given element of the document from the parent element that contains it, both given as references. To put text back in, a new “text node” representing the text has to be created using createTextNode() (which takes the text to create the node from as its argument), and the result of this function is assigned to a variable newTextElement, also a reference. At this point, though, the reference does not correspond to part of the document, but to a loose element floating in space, as it were. Fortunately this situation doesn’t last too long, and on the next line the reference is appended into the document using appendChild() which functions as the reverse of removeChild().

The scope bit

The important question, then, is how does the variable count work? Well, the first thing to notice is that it is defined at the beginning of the document, before the function. This makes it global and accessible to the function, without the function having to specifically pull it into its scope. This means that the function can make changes to it by assigning values to it (but not using var this time) or incrementing it, as is the case here. Similarly, when the function ends, the variable is still global, and has kept the value set to it by the function, even though the function hasn’t returned anything. So every time the function is called, the global variable keeps increasing (and being used in the updated text of the link) and doesn’t get reset until you refresh the page.

Is there anything left to say? If someone was writing code that takes keyboard input from the user, they’d know that JavaScript treats common inputs as strings, right? What about the tricks for turning strings into numbers?