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. |
/ 8 
