Javascript Tutorial -- Using Operators in Javascript

Now that you've learned how to declare, define and reference (use) variables in Javascript and how to use document.write to send output to the web browser, you've made a lot of progress towards doing some useful things in Javascript. However, variables don't really become useful until you can modify them based on the values of other variables. For example, how would you calculate the area of a circle unless you could multiple values together? Fortunately, Javascript has an answer for this problem.

Like a lot of languages developed after 1990, Javascript borrows heavily from C. If you've ever used C or Perl, you won't have any trouble learning to manipulate data in Javascript. The language constructs that allow you add, subtract, multiply, divide, etc. are called "operators", and they are lifted almost directly from C:

        <script type="text/javascript>
          <!--
            var sum = 5 + 7
            var difference = 12 - 5
            var product = 3 * 6
            var quotient = 27 / 9
            var remainder = 13 % 4

            document.write(' 5 + 7 = ' + sum + '
')
            document.write('12 - 5 = ' + difference + '
')
            document.write(' 3 * 6 = ' + product + '
')
            document.write('27 / 9 = ' + difference + '
')
            document.write('13 mod 4 = ' + remainder + '
')
          //-->
        </script>
      

In addition to the standard mathematical operators, Javascript includes many of the "shortcut" iteration operators found in C and Perl, such as increment (++), decrement (--), increment-by (+=) and decrement-by (-=). For example:

        <script type="text/javascript>
          <!--
            var a = 5
            
            //This will return a value of 6
            document.write(a++ + '<br>')

            //This will also return a value of 6
            document.write(--a '<br>')

            //This will return a value of 7
            a += 2
            document.write(a + '<br>')

            //This will return a value of 3
            a -= 4
            document.write(a + '<br>')
          //-->
        </script>
      

In the example above -- and in several examples in the previous lessons -- you can see that the plus operator is being used for something other than addition in the "document.write" method. This is called "overloading" an operator. In a mathematical context, the plus sign is used for addition, but in a textual context, it is used as the concatenation operator -- that is, it is used to join two pieces of text together like this:

        <script type="text/javascript"
          <!--
            var Part1 = "This is "
            var Part2 = "an example."

            document.write(Part1 + Part2)
          //-->
        </script>
      

Additionally (no pun intended), the "+=" operator is overloaded to apply to a textual context, just like the plus sign is. In this case, the "+=" operator appends the text on the right-hand side of the "+=" operator to the end of the data stored in the variable on the left-hand side of the "+=" operator. For example, this snippet of code...:

        ...
        var MyVar = "this is a "

        MyVar += "sentence."
        ...
      

...would result in the variable "MyVar" containing the string "this is a sentence."

Here's how operators can be used in a real script.