JavaScript Bitwise Operations

❮ Previous Next ❯

JavaScript Bitwise Operators

Operator	Name	Description
&	AND	Sets each bit to 1 if both bits are 1
\|	OR	Sets each bit to 1 if one of two bits is 1
^	XOR	Sets each bit to 1 if only one of two bits is 1
~	NOT	Inverts all the bits
<<	Zero fill left shift	Shifts left by pushing zeros in from the right and let the leftmost bits fall off
>>	Signed right shift	Shifts right by pushing copies of the leftmost bit in from the left, and let the rightmost bits fall off
>>>	Zero fill right shift	Shifts right by pushing zeros in from the left, and let the rightmost bits fall off

Examples

Operation	Result	Same as	Result
5 & 1	1	0101 & 0001	0001
5 \| 1	5	0101 \| 0001	0101
~ 5	10	~0101	1010
5 << 1	10	0101 << 1	1010
5 ^ 1	4	0101 ^ 0001	0100
5 >> 1	2	0101 >> 1	0010
5 >>> 1	2	0101 >>> 1	0010

JavaScript Uses 32 bits Bitwise Operands

JavaScript saves numbers as 64-bit floating-point numbers, but it does bitwise operations using 32-bit binary numbers.

Prior to conducting a bitwise operation, JavaScript changes numbers into 32-bit signed integers.

After doing the bitwise operation, the outcome is changed back to 64-bit JavaScript numbers.

The examples above show how to use 4-bit unsigned binary numbers. Because of this ~ 5 returns 10.

JavaScript doesn't give 10 because it uses 32-bit numbers. It will return -6.

00000000000000000000000000000101 (5)

11111111111111111111111111111010 (~5 = -6)

A negative number is indicated by the leftmost bit being 1.

JavaScript Bitwise AND

When you do a bitwise AND on two bits, you get 1 only if both bits are 1.

One bit example:

Operation	Result
0 & 0	0
0 & 1	0
1 & 0	0
1 & 1	1

4 bits example:

Operation	Result
1111 & 0000	0000
1111 & 0001	0001
1111 & 0010	0010
1111 & 0100	0100

JavaScript Bitwise OR

When you perform a bitwise OR on two bits, the result is 1 if at least one of the bits is 1.

One bit example:

Operation	Result
0 \| 0	0
0 \| 1	1
1 \| 0	1
1 \| 1	1

4 bits example:

Operation	Result
1111 \| 0000	1111
1111 \| 0001	1111
1111 \| 0010	1111
1111 \| 0100	1111

JavaScript Bitwise XOR

When you do a bitwise XOR on two bits, it gives you 1 if the bits are not the same.

One bit example:

Operation	Result
0 ^ 0	0
0 ^ 1	1
1 ^ 0	1
1 ^ 1	0

4 bits example:

Operation	Result
1111 ^ 0000	1111
1111 ^ 0001	1110
1111 ^ 0010	1101
1111 ^ 0100	1011

JavaScript Bitwise AND (&)

Bitwise AND returns 1 only if both bits are 1:

Decimal	Binary
5	00000000000000000000000000000101
1	00000000000000000000000000000001
5 & 1	00000000000000000000000000000001 (1)

JavaScript Bitwise OR (|)

The Bitwise OR operation gives a result of 1 when at least one of the bits being compared is 1.

Decimal	Binary
5	00000000000000000000000000000101
1	00000000000000000000000000000001
5 \| 1	00000000000000000000000000000101 (5)

JavaScript Bitwise XOR (^)

XOR operation in bitwise returns 1 when comparing different bits.

Decimal	Binary
5	00000000000000000000000000000101
1	00000000000000000000000000000001
5 ^ 1	00000000000000000000000000000100 (4)

JavaScript Bitwise NOT (~)

Decimal	Binary
5	00000000000000000000000000000101
~5	11111111111111111111111111111010 (-6)

JavaScript (Zero Fill) Bitwise Left Shift (<<)

This operation is called a zero fill left shift. It involves adding one or more zero bits to the left side, and the bits on the far left are dropped off.

Decimal	Binary
5	00000000000000000000000000000101
5 << 1	00000000000000000000000000001010 (10)

JavaScript (Sign Preserving) Bitwise Right Shift (>>)

This is a type of right shift that maintains the sign. It brings in copies of the leftmost bit from the left, and the rightmost bits drop off.

Decimal	Binary
-5	11111111111111111111111111111011
-5 >> 1	11111111111111111111111111111101 (-3)

JavaScript (Zero Fill) Right Shift (>>>)

This operation is called a zero-fill right shift. It means that one or more zero bits are added from the left side, and the bits on the right side are dropped off.

Decimal	Binary
5	00000000000000000000000000000101
5 >>> 1	00000000000000000000000000000010 (2)

Binary Numbers

Binary numbers with only one bit set are easy to understand:

Binary Representation	Decimal value
00000000000000000000000000000001	1
00000000000000000000000000000010	2
00000000000000000000000000000100	4
00000000000000000000000000001000	8
00000000000000000000000000010000	16
00000000000000000000000000100000	32
00000000000000000000000001000000	64

Increasing the number of bits exposes the binary pattern.

Binary Representation	Decimal value
00000000000000000000000000000101	5 (4 + 1)
00000000000000000000000000001101	13 (8 + 4 + 1)
00000000000000000000000000101101	45 (32 + 8 + 4 + 1)

JavaScript saves binary numbers using a two's complement format.

This implies that the bitwise NOT of a number is equal to the negative of that number plus 1.

Binary Representation	Decimal value
00000000000000000000000000000101	5
11111111111111111111111111111011	-5
00000000000000000000000000000110	6
11111111111111111111111111111010	-6
00000000000000000000000000101000	40
11111111111111111111111111011000	-40

Joke:

In the world, there are just two kinds of people: those who get binary code and those who don't.

Converting Decimal to Binary

Converting Binary to Decimal

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Bitwise AND</h1>
    <h2>The & Operator</h2>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = 5 & 1;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Bitwise OR</h1>
    <h2>The | Operator</h2>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = 5 | 1;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Bitwise XOR</h1>
    <h2>The ^ Operator</h2>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = 5 ^ 1;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Bitwise NOT</h1>
    <h2>The ~ Operator</h2>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = ~5;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Bitwise Left</h1>
    <h2>The << Operator </h2>
        <p id="demo"></p>
        <script>
          document.getElementById("demo").innerHTML = 5 << 1;
        </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Signed Bitwise Right</h1>
    <h2>The >> Operator</h2>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = -5 >> 1;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Unsigned Bitwise Right</h1>
    <h2>The >>> Operator</h2>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = 5 >>> 1;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Convert Decimal to Binary</h1>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = dec2bin(-5);

      function dec2bin(dec) {
        return (dec >>> 0).toString(2);
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Convert Binary to Decimal</h2>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = bin2dec(101);

      function bin2dec(bin) {
        return parseInt(bin, 2).toString(10);
      }
    </script>
  </body>
</html>

❮ Previous Next ❯

Operation	Result
0 \| 0	0
0 \| 1	1
1 \| 0	1
1 \| 1	1

JavaScript Tutorial

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics

JavaScript Bitwise Operations

JavaScript Bitwise Operators

Examples

JavaScript Uses 32 bits Bitwise Operands

JavaScript Bitwise AND

JavaScript Bitwise OR

JavaScript Bitwise XOR

JavaScript Bitwise AND (&)

JavaScript Bitwise OR (|)

JavaScript Bitwise XOR (^)

JavaScript Bitwise NOT (~)

JavaScript (Zero Fill) Bitwise Left Shift (<<)

JavaScript (Sign Preserving) Bitwise Right Shift (>>)

JavaScript (Zero Fill) Right Shift (>>>)

Binary Numbers

Joke:

Converting Decimal to Binary

Converting Binary to Decimal

Web Development