Bitwise Operators in TypeScript

In this article I am going to explain how to use bitwise operators in TypeScript.

Bitwise Operators in TypeScript

 
Generally, as a programmer you do not need to think about operations at the bit level, you are free to think in bytes, but it is occasionally necessary to use bitwise operations. Basically "bitwise operators" are used to manipulate the value of individual bits (ones and zeros) of an operand. The "Bitwise operators" in TypeScript are: "~" , "&, "|", "^" ,"<<" and ">>".
 
The Bitwise operators are summarized here.
 

~ (Bitwise Negation) operator

 
The Bitwise negation operator (~) will invert it's single operand, in other words, the negation operator performs a bitwise complement on its single integer operand.
 
Initial value1 (A) Initial value2 (B) Resulting value1 (~A) Initial value2 (~B)
0 0 1 1
0 1 1 0
1 0 0 1
1 1 0 0
 
Example
 
var a=3
var c=~a;

Then the result in c is -4.
 

& (Bitwise And) operator

 
The Bitwise AND (&) operator will return 1 for a bit of both operand bits are equal to "1", otherwise it will return 0 (zero).
 
Initial value1 (A) Initial value2 (B)  
0 0 0
0 1 0
1 0 0
1 1 1
 
Example
 
var a=3,b=4;
var c=a&b;

Then the result in c is 0 because the above example is evaluated that way.
 
The value of a is 3 (the bits are 0011) and the value of b is 4, in other words, 0100, now 0011 & 0100 is 0.
 
bitwise-and-operator-in-typescript.jpg
 
The result is 0000; in other words, decimal Zero (0).
 

| (Bitwise OR) operator

 
The Bitwise OR (|) operator will return a 1-bit if only one bit is equal to "1", otherwise it will return 0 (zero).
 
Initial value1 (A) Initial value2 (B) A|B
0 0 0
0 1 1
1 0 1
1 1 1
 
Example
 
var a=3,b=4;
var c=a|b;

Then the result c is 7 because the above example is evaluated that way.
 
The value of a is 3 (in bits that is 0011) and the value of b is 4 (0100), now 0011 | 0100 is 7:
 
bitwise-or-operator-in-typescript.jpg
 
The result is 0111, in other words, decimal Seven (7).
 

^ (Bitwise XOR) operator

 
The Bitwise XOR (^) operator will return a 1-bit if one bit is equal to "1" and the other bit is 0 (in other words the operands are different), otherwise it will return 0 (zero).
 
Initial value1 (A) Initial value2 (B) A^B
0 0 0
0 1 1
1 0 1
1 1 0
 
Example
 
var a=2,b=3;
var c=a^b;
 
The result c is 1 because the above example is evaluated that way.
 
The value of a is 2 (0010) and the value of b is 3, in other words, 0011' now 0010 | 0011 is 1:
 
bitwise-xor-operator-in-typescript.jpg
 
The result is 0001, in other words, decimal One (1).
 

<< (Bitwise LeftShift) operator

 
The Bitwise LeftShift (<<) operator shifts bits from the low bits to the high bits by the specified number of bit positions.
 
Example
 
var a=3,b=4;
var c=a<<b;
 
The result c is 48.
 

>> (Bitwise RightShift) operator

 
The Bitwise LeftShift (<<) operator shifts the bits from the high bits to the low bits by the specified number of bit positions.
 
Example
 
var a=3,b=4;
var c=a>>b;
 
The result of c is 0.
 
The following examples show you how to use bitwise operators in TypeScript. Use the following to create a program using bitwise operators.
 
Step 1
 
Open Visual Studio 2012 and click on "File" menu -> "New" -> "Project". A window is opened. Provide the name of your application like "BitWiseOperators", then click on the Ok button.
 
Step 2
 
After Step 1 your project has been created. The Solution Explorer, which is at the right side of Visual Studio, contains the js file, ts file, CSS file, and HTML files.
 
Step 3
 
The code of the Bitwise operator's program.
 
BitWiseOperators .ts
  1. class BitWiseOperators {  
  2.  MyFunction()  
  3.  {  
  4.   var a = 3,  
  5.    b = 4;  
  6.   var y = document.createElement("y");  
  7.   y.style.color = "red";  
  8.   var c = a & b; //BitWise And operator  
  9.   y.innerText = "BitWise And operator res=" + c + "\n";  
  10.   document.body.appendChild(y);  
  11.   var y = document.createElement("y");  
  12.   var c = a | b; //BitWise OR operator  
  13.   y.innerText = "BitWise OR operator res=" + c + "\n";  
  14.   document.body.appendChild(y);  
  15.   var y = document.createElement("y");  
  16.   y.style.color = "red";  
  17.   var c = a ^ b; //BitWise XOR operator  
  18.   y.innerText = "BitWise XOR operator res=" + c + "\n";  
  19.   document.body.appendChild(y);  
  20.   var y = document.createElement("y");  
  21.   var c = a << b; //BitWise LeftShift operator  
  22.   y.innerText = "BitWise LeftShift operator res=" + c + "\n";  
  23.   document.body.appendChild(y);  
  24.   var y = document.createElement("y");  
  25.   y.style.color = "red";  
  26.   var c = a >> b; //BitWise RightShift operator  
  27.   y.innerText = "BitWise RightShift operator res=" + c + "\n";  
  28.   document.body.appendChild(y);  
  29.   var y = document.createElement("y");  
  30.   var c = ~a; //BitWise Negation operator  
  31.   y.innerText = "BitWise Negation operator res=" + c;  
  32.   document.body.appendChild(y);  
  33.  }  
  34. }  
  35. window.onload = () => {  
  36.  var call = new BitWiseOperators();  
  37.  call.MyFunction();  
  38. }  
default.html
  1. <!DOCTYPEhtml>  
  2. <htmllang="en"  
  3.     xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.         <metacharset="utf-8"/>  
  6.         <title>TypeScript HTML App</title>  
  7.         <linkrel="stylesheet"href="app.css"type="text/css"/>  
  8.         <scriptsrc="app.js">  
  9.         </script>  
  10.     </head>  
  11.     <body>  
  12.         <h1>Bitwise Operators Example</h1>  
  13.         <divid="content"/>  
  14.     </body>  
  15. </html>  
app.js
  1. var BitWiseOperators = (function() {  
  2.  function BitWiseOperators() {}  
  3.  BitWiseOperators.prototype.MyFunction = function() {  
  4.   var a = 3;  
  5.   var b = 4;  
  6.   var y = document.createElement("y");  
  7.   y.style.color = "red";  
  8.   var c = a & b;  
  9.   y.innerText = "BitWise And operator res=" + c + "\n";  
  10.   document.body.appendChild(y);  
  11.   var y = document.createElement("y");  
  12.   var c = a | b;  
  13.   y.innerText = "BitWise OR operator res=" + c + "\n";  
  14.   document.body.appendChild(y);  
  15.   var y = document.createElement("y");  
  16.   y.style.color = "red";  
  17.   var c = a ^ b;  
  18.   y.innerText = "BitWise XOR operator res=" + c + "\n";  
  19.   document.body.appendChild(y);  
  20.   var y = document.createElement("y");  
  21.   var c = a << b;  
  22.   y.innerText = "BitWise LeftShift operator res=" + c + "\n";  
  23.   document.body.appendChild(y);  
  24.   var y = document.createElement("y");  
  25.   y.style.color = "red";  
  26.   var c = a >> b;  
  27.   y.innerText = "BitWise RightShift operator res=" + c + "\n";  
  28.   document.body.appendChild(y);  
  29.   var y = document.createElement("y");  
  30.   var c = ~a;  
  31.   y.innerText = "BitWise Negation operator res=" + c;  
  32.   document.body.appendChild(y);  
  33.  };  
  34.  return BitWiseOperators;  
  35. })();  
  36. window.onload = function() {  
  37.  var call = new BitWiseOperators();  
  38.  call.MyFunction();  
  39. };  
Step 4
 
Output
 
Bitwiset-operators-in-type-script.jpg