Javascript: Variables and Mathematical Operations

In this tutorial, we will learn about variables and mathematical operations.

Variables

Before we talk about how to create variables in Javascript, let’s first make sure that we all know what variables are. I usually think of variables like a box – we can create a box whenever we like, and then we can put things in the box, see what’s in the box, and even change things in the box.
Although in other programming languages we often have to specify what data our ‘box’ (variable) can hold – Javascript does all this hard work for us, and we can choose what kind of data our variable can hold, simply by how we specify the value we set it to.
So if we want a combination of different characters/letters (like a string of words or something), we specify the value that we set the variable to in either single or double quotes – whereas if we want to set the value to an integer (a whole number), then we can simply set the variable to the number.
So let’s actually learn how to create variables!

The first keyword that we use to create variables in Javascript, is var (which stands for variable). After this, we specify the variable’s name so we can reference it in our code, and if we just want to create an ‘empty box’ then we can just put our semicolon here to end the variable creation. The actual creation of the variable (the code we’ve just gone through) is called the variable declaration.

var VariableOne;

In the above example, we are simply creating an empty variable called 'VariableOne'.
To assign values to this variable, we can write it’s name, followed by an equals sign, followed by the value you want to set it to (and remember, it can be any data-type you like). So if we wanted to create a variable called ‘Greeting’ and then set it to "Hello!", then we’d do something like the following:

var Greeting;
Greeting = "Hello!";

When we first set a variable to a value, it’s called the initialization.
Also note that we can set the variable to a different value wherever we like by simply using it’s name, and using the equals operator as we have above.
We can also get the value of the variable wherever we want by simply typing it’s name – so if we wanted to combine this with the alert function that we learnt in previous lessons, we can just write his name in the alert function's parameters.
In the following example, we will set the variable to something, output that in an ‘alert’, then set it to something else, and ‘alert’ that:

var Greeting;
Greeting = "Hello!";
alert(Greeting);
Greeting = "Hi!";
alert(Greeting);

Note that we could actually combine the first two lines of our Javascript so that we declare the variable and initialize it at the same time:

var Greeting = "Hello!";
alert(Greeting);
Greeting = "Hi!";
alert(Greeting);

If you put this in the script.js file of the project folder that we setup previously, you should see that the ‘alert’ boxes output what we expected!

If you want to just quickly test this simply script, instead of going into all the effort of putting it in our project – there is an excellent service available (note that it should only really be used for testing) called JSFiddle which is super awesome. I’ve embedded the code from this tutorial in a JSFiddle iframe below (you can run it by clicking the run button in the iframe) for quick testing.

Mathematical Operations

So the next part of this tutorial, is mathematical operations.
Luckily for us, these are extremely simple in Javascript.
There are 4 main, simply mathematical operators:

• + - Addition
• - - Subtraction
• * - Multiplication
• / - Division

We can use these with regular numbers (such as ‘3’ and ‘5’) but also with variables containing numbers. If we wanted to alert the value of ‘myVariable’ plus 5, we can simply use the ‘+’ operator to do so:

var myVariable = 5;
alert(myVariable + 5);

We can obviously use any mathematical operator we want here.

It’s also often useful to use the mathematical operators in variable assignment. So if we wanted ‘VariableTwo’ to be ‘myVariable’ times 5, we could do something like the following:

var myVariable = 5;
var VariableTwo = myVariable * 5;

I think the usage of mathematical operators is generally pretty easy, so I’ll leave the rest of finding out to you (try putting them in different places, for the most part you’ll find it works!).



Back to Javascript