Skip to Content

Advertisement

You (Level 0)
0% Complete
Last Badge Earned
None

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

I've attached my favorite JavaScript and jQuery book. I would encourage you to read it as well.

Your code will execute in this window.



Let's explore some more tutorials or topics!

Next Tutorial Previous Tutorial

Advertisement

If you enjoyed this resource, support me by sharing this page with others.

Comment on

Show Comments
  • User

    Phlanx Campbell Feb. 16, 2015, 9:38 p.m.

    var string1 = "you are awsome."

  • User

    Stephen D March 6, 2014, 3:05 p.m.

    What is supposed to happen when you insert the &lt;h&gt; tag when testing the code? I don't see anything happen.

  • User

    Rafael Paiva July 16, 2013, 6:44 a.m.

    Very great content! Easy to understand the Operators. Congratulations for the method. I would like to appoint some mistakes in the example of &quot;Assignment Operators&quot;. The result of calc's is different in the middle of exercise. I think that it is something wrong in &quot;variable x&quot;. Thank's for this site! I'm happy to study here.



Advertisement