Home arrow JavaScript arrow Page 5 - The Power of Javascript: Operators continued
JAVASCRIPT

The Power of Javascript: Operators continued


In the last article we talked about some of the unary and binary operators available in Javascript, namely the arithmetic operators, the comparison operators and the increment/decrement operators. In this article we continue our discussion of the Javascript operators; we will discuss how computers represent data, and bitwise operators.

Author Info:
By: Michael Youssef
Rating: 5 stars5 stars5 stars5 stars5 stars / 10
July 26, 2005
TABLE OF CONTENTS:
  1. · The Power of Javascript: Operators continued
  2. · Bitwise Operators
  3. · The Bitwise Operators Example
  4. · Assignment Operators
  5. · Assignment Operators Example

print this article
SEARCH DEVARTICLES

The Power of Javascript: Operators continued - Assignment Operators Example
(Page 5 of 5 )

The following code uses all the combined assignment operators in one script.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Hello World</title>
    <script language="JavaScript" type="text/javascript">
      // x represented in binary as 00000101
      var x = 3;

      var result = 6;
      result += x;
      document.write(result + "<br>");
      // we need to assign result the value 6 after using the assignment operator
      // and just before using it again.
      var result = 6;
      result -= x;
      document.write(result + "<br>");
      var result = 6;
      result *= x;
      document.write(result + "<br>");
      var result = 6;
      result /= x;
      document.write(result + "<br>");
      var result = 6;
      result %= x;
      document.write(result + "<br>");

      // 6 = 00000110
      // 3 = 00000011

      var result = 6;
      result &= x;
      document.write(result + "<br>");
      var result = 6;
      result |= x;
      document.write(result + "<br>");
      var result = 6;
      result ^= x;
      document.write(result + "<br>");
      var result = 6;
      result <<= x;
      document.write(result + "<br>");
      var result = 6;
      result >>= x;
      document.write(result + "<br>");
    </script>
  </head>
  <body>
  </body>
</html>

When you save the code into a file, then load it into your browser, you will get the following results:

After the variable declaration statements we add the value of x to the result. Note that I say "add" not "assign," because when you assign a value to a variable it replaces the old value which will be destroyed. So, using the statement result += x; the value of x will be added to the value of result; now result contains the value 9.

The next assignment statement produces the value 3 because result -= x; means that result is subtracted from x, then the produced value is assigned to result. As you can see we have assigned the value 6 to result before this assignment statement, and before all the assignment statements in this example, because using operators such as +=, -=, *= or &= modify (assign) the value of result. We need to set result to 6 before using it, so we know that x = 3 and result = 6, and test whether we are following what's going on or not. The statement result *= x; multiplies result by x, then assigns the value to result. The statement result /= x divides result on x, then assigns the value to result.

The statement result &= x; may confuse you, so let's analyze what it means. It means result = result & x; which instructs the interpreter to do the bitwise AND operation on result. Then x assigns the value to result, which equals 6. This is represented in binary as 00000110. x is represented in binary as 00000011, so result & x produces:

 00000110
&
 00000011
---------
 00000010

00000010 equals two in decimal, which is assigned to the variable result. The statement result |= x; assigns the value of result | x to result, so we will set the resultant value's bits to 1 if any of the positioned matched bit is 1. Let's do it:

 00000110
|
 00000011
---------
 00000111

00000111 equals 7 in decimal, which is assigned to the variable result and written to the page.

The statement result ^= x; assigns the value of result ^ x to result. The XOR bitwise operator sets the resultant's value bits to 1 if only one of the positioned matched bit is 1. If both of them are 1 it sets the resultant bit to 0. Let's do it:

 00000110
^
 00000011
---------
 00000101

00000101 equals 5 in decimal, which is assigned to the variable result and written to the page.

The statement result <<= x; left shifts the value of result by the value of x, then assigns the value to result. It's like result = 6 << 3; 6 in binary is represented as 00000110, and when we shift this value 3 bits to the left the value becomes 00110000, which equals 48. This is the value that is assigned to result and written to the Web page. I think that now you understand how these operators work.

On the other hand, the statement result >>= x; assigns result the value of result >> x, which means that we need to right shift the value of the variable result by the value of x on the binary representation. Six equals 00000110, so when we shift it three times to the right the binary value will be 00000000, which means 0 in decimal. I hope that now you understand the idea of bitwise operators, although you will not use it in the range of client-side Javascript programming. It's good for building a programming bckground.


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
JAVASCRIPT ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




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