TypeScript

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

Up Next
    Ebook Download
    View all
    Test
    Read by 16 people
    Download Now!
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs