ARTICLE

Bitwise Operators in TypeScript

Posted by Sharad Gupta Articles | TypeScript November 27, 2012
Tags: and operator, bitwise operators, rightshift operator, TypeScript, Visual Studio 2012
In this article I am going to explain how to use bitwise operators in TypeScript.
Reader Level:

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 occasionallly 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 it's 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 if both operand bits are equal to "1", otherwise it will return 0 (zero).

Initial value1 (A) Initial value2 (B) A&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 the result of c is 0.

The following examples sows 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 operators program.

BitWiseOperators .ts

class BitWiseOperators {

    MyFunction()

    {

     var a=3,b=4;

     var y = document.createElement("y");

     y.style.color = "red";

     var c = a & b; //BitWise And operator

     y.innerText = "BitWise And operator res=" + c + "\n";

     document.body.appendChild(y);

 

     var y = document.createElement("y");

     var c = a | b; //BitWise OR operator

     y.innerText = "BitWise OR operator res=" + c + "\n";

     document.body.appendChild(y);

    

     var y = document.createElement("y");

      y.style.color = "red";

     var c = a ^ b; //BitWise XOR operator

     y.innerText = "BitWise XOR operator res=" + c + "\n";

     document.body.appendChild(y);

 

     var y = document.createElement("y");

     var c = a << b; //BitWise LeftShift operator

     y.innerText = "BitWise LeftShift operator res=" + c + "\n";

     document.body.appendChild(y);

 

     var y = document.createElement("y");

      y.style.color = "red";

     var c = a >> b; //BitWise RightShift operator

     y.innerText = "BitWise RightShift operator res=" + c + "\n";

     document.body.appendChild(y);

 

     var y = document.createElement("y");

     var c = ~a; //BitWise Negation operator

     y.innerText = "BitWise Negation operator res=" + c;

     document.body.appendChild(y);

    }

}

window.onload = () =>{

    var call = new BitWiseOperators();

    call.MyFunction();

}


default.html
 

<!DOCTYPEhtml>

 

<htmllang="en"xmlns="http://www.w3.org/1999/xhtml">

<head>

    <metacharset="utf-8"/>

    <title>TypeScript HTML App</title>

    <linkrel="stylesheet"href="app.css"type="text/css"/>

    <scriptsrc="app.js"></script>

</head>

<body>

    <h1>Bitwise Operators Example</h1>

    <divid="content"/>

</body>
</html>


app.js
 

var BitWiseOperators = (function () {

    function BitWiseOperators() { }

    BitWiseOperators.prototype.MyFunction = function () {

        var a = 3;

        var b = 4;

 

        var y = document.createElement("y");

        y.style.color = "red";

        var c = a & b;

        y.innerText = "BitWise And operator res=" + c + "\n";

        document.body.appendChild(y);

        var y = document.createElement("y");

        var c = a | b;

        y.innerText = "BitWise OR operator res=" + c + "\n";

        document.body.appendChild(y);

        var y = document.createElement("y");

        y.style.color = "red";

        var c = a ^ b;

        y.innerText = "BitWise XOR operator res=" + c + "\n";

        document.body.appendChild(y);

        var y = document.createElement("y");

        var c = a << b;

        y.innerText = "BitWise LeftShift operator res=" + c + "\n";

        document.body.appendChild(y);

        var y = document.createElement("y");

        y.style.color = "red";

        var c = a >> b;

        y.innerText = "BitWise RightShift operator res=" + c + "\n";

        document.body.appendChild(y);

        var y = document.createElement("y");

        var c = ~a;

        y.innerText = "BitWise Negation operator res=" + c;

        document.body.appendChild(y);

    };

    return BitWiseOperators;

})();

window.onload = function () {

    var call = new BitWiseOperators();

    call.MyFunction();

};


Step 4
 

Output
 

Bitwiset-operators-in-type-script.jpg

Login to add your contents and source code to this article
This Feature is Sponsored By DynamicPDF Merger is a developers dream for interacting with any existing PDF documents. Merge, append, split, form fill, flatten stamp and so much more.
post comment
     
COMMENT USING
PREMIUM SPONSORS
DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and add new content to existing PDF documents from within your applications.
TRENDING UP
MOST LIKED ARTICLE
HOT KEYWORDS
SPONSORED BY
  • PDF reports have never been easier to create. With our included WYSIWYG Designer, you can layout your reports, set up your data source and let DynamicPDF ReportWriter do the rest.
Get Career Advice from Experts
WHITEPAPERS AND BOOKS
Hosted By CBeyond Cloud Services MVPs MOST VIEWEDLEGENDSNOW PRIZESAWARDSREVIEWSSURVEYCERTIFICATIONSDOWNLOADS
PRIVACY POLICY | TERMS & CONDITIONS | SITEMAP | CONTACT US | ABOUT US | REPORT ABUSE
©2013 C# Corner. All contents are copyright of their authors.