JavaScript: Variables and Maths

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 a variable like a box - we can create a box whenever we like, and then we can put things in it, see what's in it, and even change what's in it.

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. 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 we want to set it to. With this theory out of the way, let's actually learn how to create variables!

The first keyword that we use to create variables in JavaScript, is the var keyword, which stands for variable. For a number of applications you can actually exclude this keyword and it'll work just fine, but the keyword always makes sure that you are creating a new variable rather than setting the value of an already-existing one in the cases where this matters (if you don't have a clue what I'm talking about, you'll see soon enough). After this keyword (optionally in most cases, as discussed), 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. This process of creating a variable is called the variable declaration. For example the following would create an empty variable called 'VariableOne':

1

var VariableOne;

To assign values to this variable we can write its name, followed by an equals sign, followed by the value we want to set it to (and remember, this can be any data-type you like). So if we wanted to create a variable called 'Greeting' and then set it to the string of text, "Hello!", then we might do something like the following:

1
2

var Greeting;
Greeting = "Hello!";

When we first set a variable to a value, this is called the initialization. Also note that we can set the variable to a different value wherever we like by simply using its name, and using the equals operator as we have above. So we could change the value of 'Greeting' again later on in our JavaScript document with something like Greeting = "Hiya!";. We can also get the value of the variable wherever we want by simply typing its name - so if we wanted to combine this with the alert function that we learnt in previous lessons to output the value of 'Greeting', we can just write the variable name in the alert function's parameters. In the following example, we will set the new variable, 'Greeting', to something, output that in an alert, then set the variable to something else, and alert that:

1
2
3
4
5

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, to create a more condensed and neat piece of JavaScript which looks something like the following:

1
2
3
4

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

If you put all of the above in the 'script.js' file of the project folder that we set up previously, you should see that the pop-up boxes output exactly what we expected, "Hello!" and then "Hi!"!

If you want to just quickly test this simply script without setting up the whole project - there is an excellent service available 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 all about mathematical operations. Luckily for us, these are extremely simple in JavaScript. There are 4 main, simple mathematical operators:

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

We can use these with constant number values such as '3' and '5', but also with variables that contain numbers. If we wanted to alert the value of 'myVariable' plus 5, we can simply use the '+' operator to do so, take for example the following:

1
2

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

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:

1
2

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

I think the usage of mathematical operators is generally pretty straightforward, so I'll leave the rest of finding out to you! Try messing about with operators in different places, and if you're feeling up for a little bit of a challenge, try creating a basic script in which 2 variables contain different lengths of triangle sides, and the third side is calculated using the Pythagoras' Theorem (Hint: As well as using the operators we've just covered, you're going to need to utilise the sqrt method of the Math object to square root values!).