JavaScript Tutorial

This JavaScript tutorial is crafted for beginners to introduce them to the basics and advanced concepts of JavaScript. By the end of this guide, you'll reach a proficiency level that sets the stage for further growth. Aimed at empowering you to progress towards becoming a world-class software developer, this tutorial paves the way for a successful career in web development and beyond.

Bitwise Operators
JavaScript Bitwise Operators
The bitwise operators in JavaScript perform operations on the integer values at the binary level. They are used to manipulate each bit of the integer values. Bitwise operators are similar to logical operators but they work on individual bits.
JavaScript bitwise operators works on 32-bits operands. In JavaScript, numbers are stored as 64-bit floating point number. JavaScript converts the numbers to 32-bit signed integer before performing the operation. After bitwise operation, it converts the result to 64-bits number.
﻿
There are seven bitwise operators in JavaScript. Following is the list of bitwise operators with description.
Operator
Name
Description
&
Bitwise AND
Returns 1 if both bits are 1, otherwise 0.
|
Bitwise OR
Returns 1 if either bit is 1, otherwise 0.
^
Bitwise XOR
Returns 1 if both bits are different, otherwise 0.
!
Bitwise NOT
Returns 1 if bit is 0, otherwise 0.
<<
Left Shift
Shifts the bits left by pushing zeros in from right and discarding leftmost bits.
>>
Right Shift
Shifts the bits right by pushing copies of leftmost bit in from left and discarding rightmost bits.
>>>
Right Shift with Zero
Shifts the bits right by pushing zeros in from left and discarding rightmost bits.
JavaScript Bitwise AND (&) Operator
The bitwise AND (&) operator performs AND operation on each pair of bits of its integer operands. After the operation, it returns a new integer value with the updated bits.
When bitwise AND operator is applied on a pair of bits, it returns 1 if both bits are 1, otherwise returns 0.
Following is the truth table for bitwise AND operation
A
B
A & B
0
0
0
0
1
0
1
0
0
1
1
1
Let's understand bitwise AND operation taking an example of 4-bit operands.
A
B
A & B
1111
0001
0001
1111
0010
0010
1111
0100
0100
1111
1000
1000
Example
Let's perform bitwise AND (&) operation on 5 and 7. These numbers are represented as 32-bits integer.
Decimal Number
Binary Equivalent (32-bits)
5
00000000000000000000000000000101
7
00000000000000000000000000000111
5 & 7
00000000000000000000000000000101 (= 5)
The resultant value of the OR operation of each bit of the 101 and 111 binary numbers is the same as below.
1 & 1 = 1
1 & 0 = 0
1 & 1 = 1
So, the resultant binary number is 111, which is equal to 7 in the decimal representation.
<html>
<body>
<div id="output"></div>
<script>
  const a = 5;
  const b = 7;
  document.getElementById("output").innerHTML = "a & b = " + (a & b);
</script>
</body>
</html>
It will produce the following result
a & b = 5
JavaScript Bitwise OR (|) Operator
The bitwise OR (|) operator performs OR operation on each pair of bits of its integer operands. After the operation, it returns an integer value with the updated bits.
When bitwise OR operator is applied on a pair of bits, it returns 1 if either of bits is 1, otherwise returns 0.
Following is the truth table for bitwise OR operation.
A
B
A | B
0
0
0
0
1
1
1
0
1
1
1
1
Let's understand bitwise OR operation taking an example of 4-bit operands.
A
B
A | B
1111
0001
1111
1111
0010
1111
1111
0100
1111
1111
1000
1111
Example
Let's perform bitwise OR (|) operation on 5 and 7. These numbers are represented as 32-bits integer.
Decimal Number
Binary Equivalent (32-bits)
5
00000000000000000000000000000101
7
00000000000000000000000000000111
5 | 7
00000000000000000000000000000111 (= 7)
The resultant value of the OR operation of each bit of the 101 and 111 binary numbers is the same as below.
1 | 1 = 1
1 | 0 = 1
1 | 1 = 1
So, the resultant binary number is 111, which is equal to 7 in the decimal representation.
<html>
<body>
<div id="output"></div>
<script>
  const a = 5;
  const b = 7;
  document.getElementById("output").innerHTML = "a | b = " + (a | b);
</script>
</body>
</html>
It will produce the following result
a | b = 7
JavaScript Bitwise XOR (^) Operator
The bitwise XOR (^) operator performs exclusive OR operation on each pair of bits of its integer operands. After the operation, it returns an integer value with the updated bits.
When bitwise XOR operator is applied on a pair of bits, it returns 1 if both bits are different, otherwise returns 0.
Following is the truth table for Bitwise XOR operation 
A
B
A ^ B
0
0
0
0
1
1
1
0
1
1
1
0
Example
Let's perform bitwise XOR (^) operation on 5 and 7.
Decimal Number
Binary Equivalent (32-bits)
5
00000000000000000000000000000101
7
00000000000000000000000000000111
5 ^ 7
00000000000000000000000000000010 (= 2)
After performing the bitwise XOR operation of 101 and 111, the resultant binary number is given below.
1 ^ 1 = 0
1 ^ 0 = 1
1 ^ 1 = 0
So, the resultant binary number is 010, which is equal to 2.
<html>
<body>
<div id="output"></div>
<script>
  const a = 5;
  const b = 7;
  document.getElementById("output").innerHTML = "a ^ b = " + (a ^ b);
</script>
</body>
</html>
It will produce the following output
a ^ b = 2
JavaScript Bitwise NOT (~) Operator
The bitwise NOT (~) operator performs the NOT operation on each bit of the binary number. It is a unary operator that inverts each bit of the binary number and returns the 2’s complement to the binary number.
Following is the truth table for the Bitwise XOR operation.
Input (A)
Output (~A)
0
1
1
0
Example
Let's perform bitwise NOT (~) operation.
Decimal Number
Binary Equivalent (32-bits)
5
00000000000000000000000000000101
7
00000000000000000000000000000111
~5
11111111111111111111111111111010 (= -6)
~7
11111111111111111111111111111000 (= -8)
Try to execute the below code
<html>
<body>
<div id="output"></div>
<script>
  const a = 5;
  const b = 7;
  document.getElementById("output").innerHTML = 
  "~a = " + (~a) + "<br>" +
  "~b = " + (~b)
</script>
</body>
</html>
It will produce the following output
~a = -6
~b = -8
Bitwise Left Shift (<<) Operator
The JavaScript bitwise left shift (<<) operator moves all the bits in its first operand to the left by the number of places specified in the second operand. New bits are filled with zeros from the right and left most bits are discarded.
Shifting a value left by one position is equivalent to multiplying it by 2, shifting two positions is equivalent to multiplying by 4, and so on.
Example
When you left shift 5 (101) by 1, a value becomes 10 (1010). When you perform the left shift operation by 2 places, the resultant value is 20 (10100).
Decimal Number
Binary Equivalent (32-bits)
5
00000000000000000000000000000101
5 << 1
00000000000000000000000000001010 (= 10)
5 << 2
00000000000000000000000000010100 (= 20)
The following JavaScript program demonstrates the bitwise left shift operation −
<html>
<body>
<div id="output"></div>
<script>
  const a = 5;
  document.getElementById("output").innerHTML = 
  "a << 1 = " + (a << 1) + "<br>" +
  "a << 2 = " + (a << 2);
</script>
</body>
</html>
It will produce the following output
a << 1 = 10
a << 2 = 20
﻿
Bitwise Right Shift (>>) Operator
The bitwise right shift (>>) operator moves all the bits in its first operand to the right by the number of places specified in the second operand. It inserts copies of leftmost bit in from left and discard rightmost bits. In this way it preserves the sign of the number.
In short, it removes the N last bits from the number. Here, N is a second operand. Right-shifting the binary number is equivalent to dividing the decimal number by 2.
Example
In the below example, when we perform the right shift operation on 101 for the first time, the value of a becomes equal to 010. After performing the right-shift operation for the second time, the resultant value is 001, equal to 1 in the decimal representation.
Decimal Number
Binary Equivalent (32-bits)
5
00000000000000000000000000000101
5 >> 1
00000000000000000000000000000010 (= 2)
~5
11111111111111111111111111111010 (= -6)
~5 >>1
11111111111111111111111111111101 (= -3)
Try to execute the following program
<html>
<body>
<div id="output"></div>
<script>
  const a = 5;
  document.getElementById("output").innerHTML = 
  "a >> 1 = " + (a >> 1) + "<br>" +
  "~a >> 1 = " + (~a >> 1);
</script>
</body>
</html>
It will produce the following output
a >> 1 = 2
~a >> 1 = -3
Bitwise Right Shift with Zero (>>>) Operator
The Right Shift with Zero (>>>) operator is very similar to the right shift operator. It always fills the left bits with zero without worrying about the sign of the bit.
Example
Here, the binary representation of 10 is 1010. When we perform the right shift with zero operation, it moves all bits 2 times in the right direction and inserts two 0 at the start. So, the resultant value will be 0010, equal to 1.
Decimal Number
Binary Equivalent (32-bits)
5
00000000000000000000000000000101
5 >>> 1
00000000000000000000000000000010 (= 2)
The following JavaScript program demonstrate the use of >>> operator.
<html>
<body>
<div id="output"></div>
<script>
  const a = 5;
  document.getElementById("output").innerHTML = "a >>> 1 = " + (a >>> 1);
</script>
</body>
</html>
It will produce the following result
a >>> 1 = 2
You may try to use the different inputs with each operator and observe the output for more practices.
﻿
﻿
﻿
﻿
﻿

Operator	Name	Description
`&`	Bitwise AND	Returns 1 if both bits are 1, otherwise 0.
`\|`	Bitwise OR	Returns 1 if either bit is 1, otherwise 0.
`^`	Bitwise XOR	Returns 1 if both bits are different, otherwise 0.
`!`	Bitwise NOT	Returns 1 if bit is 0, otherwise 0.
`<<`	Left Shift	Shifts the bits left by pushing zeros in from right and discarding leftmost bits.
`>>`	Right Shift	Shifts the bits right by pushing copies of leftmost bit in from left and discarding rightmost bits.
`>>>`	Right Shift with Zero	Shifts the bits right by pushing zeros in from left and discarding rightmost bits.

Decimal Number	Binary Equivalent (32-bits)
5	00000000000000000000000000000101
7	00000000000000000000000000000111
5 & 7	00000000000000000000000000000101 (= 5)

Decimal Number	Binary Equivalent (32-bits)
5	00000000000000000000000000000101
7	00000000000000000000000000000111
5 \| 7	00000000000000000000000000000111 (= 7)

Decimal Number	Binary Equivalent (32-bits)
5	00000000000000000000000000000101
7	00000000000000000000000000000111
5 ^ 7	00000000000000000000000000000010 (= 2)

Decimal Number	Binary Equivalent (32-bits)
5	00000000000000000000000000000101
7	00000000000000000000000000000111
~5	11111111111111111111111111111010 (= -6)
~7	11111111111111111111111111111000 (= -8)

Decimal Number	Binary Equivalent (32-bits)
5	00000000000000000000000000000101
5 << 1	00000000000000000000000000001010 (= 10)
5 << 2	00000000000000000000000000010100 (= 20)

Decimal Number	Binary Equivalent (32-bits)
5	00000000000000000000000000000101
5 >> 1	00000000000000000000000000000010 (= 2)
~5	11111111111111111111111111111010 (= -6)
~5 >>1	11111111111111111111111111111101 (= -3)

Decimal Number	Binary Equivalent (32-bits)
5	00000000000000000000000000000101
5 >>> 1	00000000000000000000000000000010 (= 2)

Javascript Basics

JavaScript Operators

JavaScript Control Flow

JavaScript Functions

JavaScript Objects

Object Oriented JavaScript

JavaScript Versions

JavaScript Cookies

JavaScript Browser BOM

JavaScript Web APIs

JavaScript Events

JavaScript Tutorial

Bitwise Operators

JavaScript Bitwise Operators

JavaScript Bitwise AND (&) Operator

Example

JavaScript Bitwise OR (|) Operator

Example

JavaScript Bitwise XOR (^) Operator

Example

JavaScript Bitwise NOT (~) Operator

Example

Bitwise Left Shift (<<) Operator

Example

Bitwise Right Shift (>>) Operator

Example

Bitwise Right Shift with Zero (>>>) Operator

Example