Javascript 101 – Variables, Operators and Logic

Hello all, and welcome back to the ONMedia blog!  Over the next few weeks we are going to be running through some of the fundamental concepts in Javascript, which should nicely lead up to some cool tutorials on a few Javascript frameworks, including Angular.js and React.js.

However, we like to start right at the beginning, with a quick review of how variables are implemented in Javascript, which runs alongside a review of the key operators in the language.  Let’s get started!

In Javascript, variables are always defined with the var keyword, which is followed by the variable name. For example:

var joe;

This code will simply register a variable (of type undefined) on the heap, and store a pointer to it on the stack. Of course, in practice, this is entirely useless. Variables are really only of any use if they hold a value that we can manipulate. Let’s try allocating a value to the joe variable now:

joe = 10;

That’s better! Now we have a variable called joe in the heap, which holds a value of 10. Nice! If we were to allocate a string of words to our variable, it would store that too. Clever! This is something that is common to Javascript, and is known as implicit typecasting, as a propose to the explicit typing used by languages such as Objective C, C and C++. We can always check up on the type of a variable using the following:

typeof joe;

This nicely shows us that the variable joe has a type number which is spot on. If you are confused by the concepts of the heap and the stack, just try to remember that the heap is a huge pile of unallocated memory, where large objects can be stored in a random fashion. An analogy would be a large city, with thousands of houses and business addresses, but no obvious way around. The stack is best considered alongside the analogy of a stack of address cards, and as the program runs, the address cards pop on and off the top of the stack, each time exposing the addresses of the relevant items in the heap.

Anyhow, lets get on and look at the important operators in the Javascript language. Using our variable joe again, we can do the following. The value in square brackets is of course, the result:

joe + 5 [10]
joe - 5 [5]
joe / 2 [5]
joe * 2 [20]
joe % 2 [0]

Sweet! It is quite obvious to most what the addition and subtraction operators do, and also what the multiplication and division operators do, but what the hell is the % operator for? It is known as the modulo operator, and returns the remainder from a division. So if we divide joe by 2, it divides cleanly with no remainder. It is a useful way for checking for odd and even numbers, for example.

In addition (pun intended) to the operators above, Javascript also has a handful of unary operators:

joe++ [11]
++joe [11]
joe-- [9]

The operators above simply add or subtract one from the variable. Do not worry too much about the differences between joe++ and ++joe. This relates to pre- and post- incrementing a variable, and probably lies outside the scope of this post!

Javascript also has some pretty useful logical and comparison operators, such as:

joe == 10 [true]
joe === 10 [true]
joe != 10 [false]
joe > 5 [true]

The equality (==) and identity (===) operators are similar, and differentiated only on their strict adherence to type matching. The != (not equals) and > (greater than) are fairly obvious. Note that these operators return a boolean type. This leads us on to a quick review of logic, and Javascript’s ternary operator…

So let’s consider a scenario. We are building a simple train time tracking app, and we have defined two variables:

var timeDue;
var actualTime

timeDue will store the time the train is due to arrive, and the actualTime variable will store the expect time of arrival. We do not want to throw numbers at our customers, so we have also defined a isNotOnTime variable which will hold a string, equal to “Train is on time” or “Train is not on time” depending upon the outcome. How would we achieve this? Well, we could use an if statement:

if (timeDue === actualTime) {
isNotOnTime = "Train is on time";
} else {
isNotOnTime = "Train is not on time";
};

But a more eloquent way would be to use Javascript’s ternary operator:

var isNotOnTime = (timeDue === actualTime) ? "Train is on time" : "Train is not on time";

That’s probably enough JS for one day, but we will be back again soon talking about control structures and loops.

Leave a Reply

Get a Quote

Call us or complete the form on the right and we'll get you a quote estimate ASAP.

Alternatively you can use one of the methods below:

Call us: 03 8528 1124

Email us: [email protected]

Close Form