Maths & concatenation

Numerical variables can be used to perform mathematical calculations. This can be hugely useful for numerous types of JavaScript applications. Notable amongst these are insurance or conveyancing quote calculators.

Mathematical operators use common mathematical notation, for example:

20 + 5
200 - 100
10 / 2
5 * 10

In use this would look something like the following:

<script language="javascript" type="text/javascript">
	var myAge = 20;   // I wish!
	var myRetirementAge = 68;
    
	var yearTilRetirement = myRetirementAge - myAge;

	alert("I have " + yearsTilRetirement + " years before I can retire");
</script>

... or:

<script language="javascript" type="text/javascript">
	var myShoppingValue = 120.65;   
	var myPetrolCost = 68.89;
    
	var myExpenses = myShoppingValue + myPetrolCost;

	alert("I am £" + myExpenses + " poorer this month.");
</script>

Once variables have been established with a numerical value, this value can be manipulated at any point. For example:

<script language="javascript" type="text/javascript">
// set the inital value of myNumber to 10;
	var myNumber = 10; 
	
// myNumber now = itself plus 5 which is = 15 
	myNumber = myNumber + 5;  
    
// this adds 1 to the value of myNumber, value now = 16  
// this is shorthand for myNumber = myNumber + 1;
	myNumber++; 
    
// myNumber now = 100 minus itself (16), value = 84;   
	myNumber = 100 - myNumber; 
    
// add 12 to the present value of myNumber, value = 96
// this is shorthand for myNumber = myNumber + 12; 
	myNumber += 12; 
    
// take one away from the value of myNumber, value 95;
// this is shorthand for myNumber = myNumber - 1;
	myNumber--;  
    
// divide the present value of myNumber by 5, value now = 19;
// this is shorthand for myNumber = myNumber / 5;
	myNumber /= 5;  
    
// multiply myNumber by 2 and reassign to itself, value = 38
	myNumber = myNumber * 2; 
    
// calculate modulus of 38 / 3 (the remainer) 38 divides
// cleanly by 3 12 times (3*12=36) leaving a remainer of 2
	myNumber %= 3; 
    
// display the value of myNumber 
	document.write("myNumber is: " + myNumber); 



</script>

You get the idea ...

Live example

Concatenation

The maths addition equation should not confused with the very similar concatenation operator. Concatenation is what is happening in the document.write line in the previous example. Concatenation is where the + symbol is used to join together two or more strings.

Variables in concatenation statements need not all be strings. As long as the resulting variable is a string it is concatentation rather than maths.

Addition operations and concatenation should be kept seperate to avoid confusion, so rather than:

alert("My cutlery drawer presently holds " + noKnives + 
	noForks + noSpoons + " items of cutlery");

... you would correctly code:

// do the maths
var cutlery = noKnives + noForks + noSpoons;  

// concatenation
alert("My cutlery drawer presently holds " + cutlery + " items of cutlery");

Exercise!

Now open the maths and concatenation exercise and work through it.

You may also use the JavaScript scratch pad to try out code quickly.