Learn Modern Unobtrusive JavaScript - Variables and Properties

Learn Modern Unobtrusive JavaScript

Variables and Properties

From Kumar Rajguru , former PlusDeveloper.in Guide

If you take a look at my original "Learn JavaScript" tutorials, the very first thing I introduce there is variables. Variables are where you store all of the values that your JavaScript program is working with and is one of the core components of the JavaScript language (and any other programming language for that matter). The reason I have left it so late to get to variables in this Modern JavaScript series of tutorials is that all of the event handling and function calling which are somewhat more advanced in some ways than variables are essential parts of the JavaScript that you use if you want to keep your JavaScript completely separate from the HTML as is the case where modern unobtrusive techniques are to be used. As those are the biggest differences between the modern approach to JavaScript and the more traditional "let's just jumble everything together" approach, I decided to deal with those things first. As we have now covered the biggest differences in the more modern approach we can now return to looking at all of the other components of the JavaScript language.

If you already know JavaScript and have been reading these tutorials to learn how to update the way you code your pages then we have already covered all of the major differences that you need to take into account. I hope that you will keep reading though as I intend to cover the remaining aspects of JavaScript with a slightly different emphasis than I used in my original tutorials and so hopefully you will find some new ways of utilising what you already think you know.

Again as with functions and methods, object oriented processing uses different terminology and refers to those values that are associated with an object as the properties of that object rather than as variables. Since all JavaScript variables are actually properties of the window object, the two terms can again be used interchangeably in JavaScript.

So what is a variable? Well variables are called that because the values that they can contain can vary. We can define variables either globally so they can be accessed from anywhere in our JavaScript or we can define them locally within a function or object so that they will only be accessible within that function or object. To define a variable we use the reserved word var followed by the name of the variable we are defining. If we define a variable within a function or object then its scope will be limited to that function or object. If we define a variable outside of all functions and objects then its scope will be global. If we reference a variable without having first defined it using var then JavaScript will assume that you meant to define the variable at the start of your code and that the variable will therefore have global scope.

We can also define properties for specific objects simply by referencing those properties using the object name followed by a dot and then the property name. The scope of properties defined that way will always be global to that object and will exist and can be referenced as long as the object exists. To define properties that are only accessible within the object (what is known as private properties) or even within a specific method, you simply define it using the standard var reserved word followed by the variable name and that variable will then be local to within the object or method.

You can also assign values to a variable or property when you first define it by following the variable name with an = and then the value that the variable is to start with. Variables which do not have an initial value assigned to them will be treated as having a value of nullwhich is a reserved word that indicates that the particular variable does not yet have a value.

Here are some examples of defining variables and properties.

var myVar;
var secondField = 1;
var thirdValue = 'some text';
function myfunc() {var x = 2;}
myobj.someProp = 7;

The first of these examples defines a variable called myVar which starts with a value of undefined (which is different from 'undefined' which is actually a text string of nine characters rather than no value at all). The second and third examples assign an initial value that is a number and a text string respectively. You can assign a value of any type you like to variables in JavaScript, you are not limited to simple types such as numbers and text. The fourth example has the assignment within a function (obviously in a real script there'd be more code in the function than just defining a new variable) and the function defined that way is limited in scope to the function and will cease to exist once the function execution ends and will be recreated the next time it is called. The final example shows how you can define a property of an object.