Home arrow JavaScript arrow Page 4 - The Power of JavaScript: Operators

The Power of JavaScript: Operators

We have discussed the very basics of Javascript. Until now, we have not written much code. There's still much more to knowing and learning to master the basics of Javascript. In this article, we talk about how we can perform arithmetic operations, comparison operations and increment/decrement operations using Javascript operators.

Author Info:
By: Michael Youssef
Rating: 5 stars5 stars5 stars5 stars5 stars / 33
July 19, 2005
  1. · The Power of JavaScript: Operators
  2. · Arithmetic Operators
  3. · Comparison Operators
  4. · Increment and Decrement Operators

print this article

The Power of JavaScript: Operators - Increment and Decrement Operators
(Page 4 of 4 )

The increment (++) operator is a unary operator which is used to increment its operand by 1. You can place the increment operator to the left of its operand like this: ++x. In that position, it is called the pre-increment operator. You can also place it to the right of its operand like this: x++. In that case it is called the post-increment operator. How do these operators work? Let's take a look at the following example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<title>Hello World</title>
<script language="JavaScript" type="text/javascript">
var x = 1;
document.write("x = " + x + "<br>");
document.write("x = " + x++ + "<br>");
document.write("x = " + x + "<br>");
document.write("----------" + "<br>");
var y = 10;
document.write("y = " + y + "<br>");
document.write("y = " + ++y + "<br>");
document.write("y = " + y + "<br>");

Save the above code, then load it into your browser, and you will get the following values written to the Web page.

We begin the script with a declaration to the variable x, then we assign the value 1 to it. Next we simply write its value to the Web page using document.write() functionality. Note that we concatenate the string value "x = " with the x with the string value "<br>". Again the Interpreter replaces x by its value. This is what variables are all about; instead of using a value itself we place it in a place (the variable) and begin to use this variable and perform our operations that may change the value.

In the next statement note that we have used the post-increment operator with x (x++), and as you can see the value of x didn't change because the statement has written 1 to the Web page. In the next statement the value of x has became 2. What just happened? The post-increment operator simply added one to its operand, but at the execution of the next statement, not in the statement that we used the operator in. So when we used x++ the value of x was still 1 in the statement -- but it will increase by 1 at the next statement.

After the statement document.write("----------" + "<br>");, we declare the variable y and assign it the value 10. Again we use the document.write() to write the value of y to the Web page, then at the next statement we use the pre-increment operator with y (++y). As you can see, now the value of y has been increased by 1 in the statement that uses the pre-increment operator (unlike the post-increment operator). The pre-increment operator increases its operand in the same statement (not the next statement as with the post-increment operator). The next statement prints the value of y to the Web page, which is still 11.

The decrement operator (--) decreases its operand by one, and it has the post-decrement (x--) and the pre-decrement (--x) versions, which have the same effects as the post-increment and pre-increment versions. 

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials