Javascript Operators


Arithmetic and Assignment Operators


We will start this chapter wil the simple example below that shows the five arithmetic operators.

Addition +
Subtraction -
Multiplication *
Division /
Modulus %


  1. <html>
  2. <body>
  3. <script type="text/javascript">
  4. <!--
  5. /*
  6. ******************************************************************
  7. Example Addition, Subtraction, multiplication operators
  8. ******************************************************************
  9. */
  10. var x = 20 ;
  11. var y = 10 ;
  12.  
  13. //Addition
  14. p = x + y;
  15. document.write(" x + y is ", p);
  16. document.write("<br />");
  17. //Subtraction
  18. q = x - y;
  19. document.write(" x - y is ", q);
  20. document.write("<br />");
  21. //Multiplication
  22. r = x * y;
  23. document.write(" x * y is ", r);
  24. document.write("<br />");
  25. //Division
  26. s = x / y;
  27. document.write(" x / y is ", s);
  28. document.write("<br />");
  29. //Modulus
  30. x = 10 ;
  31. y = 6 ;
  32. z = x % y;
  33. document.write(" x % y is ", z);
  34. document.write("<br />");
  35. //-->
  36. </script>
  37. </body>
  38. </html>


If you "run" the above javascript code you should see the following output

x + y is 30
x - y is 10
x * y is 200
x / y is 2
x % y is 4

You can try to experiment it online at the following link ( opens in a new window).

Javascript Arithmetic Operator Example

This was expected. The Modulus operator % gives the remainder. So 5 % 2 is 1, 10 % 8 is 2 and 10 % 2 is 0.

If there multiple mathematical operators, it is better to use parentheses to bring clarity to expression.

Increment and decrement operators



Increment and decrement operators and increase values by 1. Historically, they bear similarity to C language. The example below should clarify it

  1. <html>
  2. <body>
  3. <script type="text/javascript">
  4. <!--
  5. /*
  6. ********************************************************
  7. Example Increment and Decrement operators
  8. ********************************************************
  9. */
  10. var x = 20 ;
  11. var y = 10 ;
  12.  
  13. //Increment
  14. x++;
  15. document.write(" x++ is ", x);
  16. document.write("<br />");
  17. //Decrement
  18. y--;
  19. document.write("y-- is ", y);
  20. //-->
  21. </script>
  22. </body>
  23. </html>


This gives out the following result

x++ is 21
y-- is 9

Try this example at the following link ( opens in a new window).

Javascript Increment and decrement Operator Example

You may also like to note that the increment operation

z = x++;

is slighty different from

z = ++x;

In both cases the value of x in incremented by 1. But in the case z = ++x; the value of z in assigneed AFTER the increment operation. In case of the z = x++ the value of z is assigned BEFORE the increment operation.

Assignment operators


We have already seen one assignment operator "=" . The table below lists out these assignment operators.

Operator Example Is equivalent to
= x=y x=y
+= x+=y x=x+y
-= x-=y x=x-y
*= x*=y x=x*y
/= x/=y x=x/y
%= x%=y x=x%y


Given below is an example that uses these arithmetic operators.

  1. <html>
  2. <body>
  3. <script type="text/javascript">
  4. <!--
  5. /*
  6. ********************************************************
  7. Example Assignment operators
  8. ********************************************************
  9. */
  10. var x = 20 ;
  11. var y = 10 ;
  12.  
  13. // x+=y is equivalent to x = x-y
  14. x+=y;
  15. document.write(" x+=y is ",x );
  16. document.write("<br />");
  17. x = 20;
  18. y = 10;
  19. x-=y;
  20. // x-=y is equivalent to x = x-y
  21. document.write("x-=y is ", x);
  22. document.write("<br />");
  23. x = 20;
  24. y = 10;
  25. x*=y;
  26. // x*=y is equivalent to x = x*y
  27. document.write("x*=y is ", x);
  28. document.write("<br />");
  29. x = 20;
  30. y = 10;
  31. x/=y;
  32. // x/=y is equivalent to x = x/y
  33.  
  34. document.write("x/=y is ", x);
  35. document.write("<br />");
  36. x = 20;
  37. y = 10;
  38. x%=y;
  39. // x%=y is equivalent to x = x%y
  40. document.write("x%=y is ", X);
  41. document.write("<br />");
  42.  
  43. //-->
  44. </script>
  45. </body>
  46. </html>
  47.  


This gives out the following result

x+=y is 30
x-=y is 10
x*=y is 200
x/=y is 2
x%=y is 0


The assignment operator x+=y looks confusing at first. You may prefer use x=x+y if you feel comfirtable. But the programming community is notorious for brevity. So you will always find examples and scripts that uses x+=y more often than not. An easy way to remember is the x=+y is not valid. You can remember it like this
x = +y will assign +y to x which is not we wanted. So the other one x+=y obviously looks coorect.

Try this example at the following link ( opens in a new window).

Javascript Assignment Operator Example

Exercises



If strongly believe that, if you do not take some exercises, it is easy to forget the concepts. Try to practice the following examples.

1. Consider the following two code snippets

var x = 20 ;
var y = 10 ;
z = ++x + ++y;


and


var x = 20 ;
var y = 10 ;
z = ++x + ++y;


What are the values of z in the two cases ? Verify your assumptions by making the changes in the code here

2. Try to write a mathematical expression that will calculate the sum of the square of two numbers

z = x2 + y2

Verify it by running the code.

3. Look a the following two code snippets

var x = 20 ;
var y = 10 ;
x+=++y;


and
var x = 20 ;
var y = 10 ;
x+=y++;


Predict the value of x in the two cases. Verify your assumptions by making the changes in the code here