Home » Tutorials » JavaScript » Operators

Operators

JavaScript Operators are pretty standard. They are exactly what you would expect from your high school math class. Operators are anything you use when comparing or acting upon with numbers/values.

Arithmetic Operators:

Example
<html>
    <body>
        <script type="text/javascript">
            var y = 7;  //Setting our variable
            var x = y + 2; //Addition, x would equal 9 here
            var x = y - 2;  //Subtraction, x would equal 5
            var x = y * 2;  //Multiplication, x would equal 14
            var x = y / 4;  //Division, x would equal 1.75
            var x = y % 3;  //Modulus (Divison Remainder), x would equal 1
        </script>
    </body>
</html>

Incrementing and Decrementing JavaScript Operators

Incrementing is adding 1, while decrementing is subtracting 1.

Example
<html>
    <body>
        <script type="text/javascript">
            var w = 0;
            var x = 0;
            var y = 0;
            var z = 0;
            document.write("w++ = " + w++); //Writing our results
            document.write("<br/>"); //Writing a line break
            document.write("x-- = " + x--); //Writing our results
            document.write("<br/>"); //Line break
            document.write("++y = " + ++y); //Writing our results
            document.write("<br/>"); //Line break
            document.write("--z = " + --z); //Writing our results
        </script>
    </body>
</html>
Result

w++ = 0
x– = 0
++y = 1
–z = -1

Incrementing and decrementing is a somewhat difficult concept, so take a deep breath and relax. We have a standard document.write method happening. In that method, we have a string that is showing you which variable we are talking about. So, the “w++ = “ is a string and not a variable. Then, we add that string to the w++ variable that is being incremented. (Quick Note: Strings can be combined with integers using the +, however, if you were to try to combine two integers in this manner, it would give you the sum of them.) The important part here is the order of the increment or decrement operator. Notice how incrementing the w, as in w++, gives you the result of 0, but incrementing the y, as in ++y, gives you the result of 1. This is because it is an increment operator has two options. Since the increment operator is after the w, as in w++, it needs incremented after the statement has been performed, while ++y is incremented before the statement is performed, since the ++ is before the y.

Let’s try to clear up that String + integer part really quick:

Example
<html>
    <body>
        <script type="text/javascript">
            var string1 = "You are awesome, ";
            var string2 = "and you know it.";
            var string3 = string1 + string2;
            document.write(string3);
        </script>
    </body>
</html>
Result
You are awesome, and you know it.

So, that is how you combine two strings.

Example
<html>
    <body>
        <script type="text/javascript">
            var x = "7";
            var y = 7;
            var example1 = x + x;
            var example2 = y + y;
            var example3 = x + y;
            var example4 = y + x;
            document.write("Example1 = " + example1);
            document.write("<br/>"); //Line break
            document.write("Example2 = " + example2);
            document.write("<br/>"); //Line break
            document.write("Example3 = " + example3);
            document.write("<br/>"); //Line break
            document.write("Example4 = " + example4);
        </script>
    </body>
</html>
Result
Example1 = 77
Example2 = 14
Example3 = 77
Example4 = 77

First off, the document.write(“Example1 = ” + is just writing out a string “Example1 = ” and combining that with our returning variable. So, example1 returns 77 because the string “7” + “7” is simply the joined of a string into “77”. Next, example2 returns 14 because the integer 7 added to the integer 7 equals 14. Finally, example3 returns 77 because the string 7 is combined with the integer 7, and the only way JavaScript knows how to join and integer and a string is by joining them like two strings. The same is true for example4

Assignment Operators

These are not a necessity for programmers, but they are great shortcuts.

Example
<html>
    <body>
        <script type="text/javascript">
            var x = 4;
            var y = 2;
            x = y;  //x = 2
            x += y;  //x = 6, (this is the same as x = x + y;)
            x -= y;  //x = 2, (this is the same as x = x - y;)
            x *= y;  //x = 8, (this is the same as x = x * y;)
            x /= y;  //x = 2, (this is the same as x = x / y;)
            x %= y;  //x = 0, (this is the same as x = x % y;)
        </script>
    </body>
</html>

References



Link/cite this page

If you use any of the content on this page in your own work, please use the code below to cite this page as the source of the content.

  • Stewart, Suzy. "Operators". After Hours Programming. Accessed on October 27, 2024. https://www.afterhoursprogramming.com/tutorial/javascript/operators-js/.

  • Stewart, Suzy. "Operators". After Hours Programming, https://www.afterhoursprogramming.com/tutorial/javascript/operators-js/. Accessed 27 October, 2024.

  • Stewart, Suzy. Operators. After Hours Programming. Retrieved from https://www.afterhoursprogramming.com/tutorial/javascript/operators-js/.



3 thoughts on “Operators”

  3. Very great content! Easy to understand the Operators. Congratulations for the method.

    I would like to appoint some mistakes in the example of "Assignment Operators". The result of calc’s is different in the middle of exercise. I think that it is something wrong in "variable x".

    Thank’s for this site! I’m happy to study here.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.