Bitwise operators are used to manipulate numbers or other integral types by operating on their binary representations. Shift operators are used to shift the bits of a number to the left or right. In this tutorial, we'll go through the different types of bitwise and shift operators and how to use them in JavaScript.

Bitwise Operators

Bitwise operators can be used on any of the integral types like numbers, characters, and shorts. They are most often used when making updates and queries on binary trees.

Bitwise OR Operator (|) - The bitwise OR operator returns bit by bit the OR of input values. It compares the binary representation of the input values bit by bit and returns a new value that has a 1 in any bit position where either input value has a 1.

Example:

let a = 5; // Binary representation: 101
let b = 3; // Binary representation: 011
let result = a | b; // Binary representation: 111 (decimal value 7)

Bitwise AND Operator (&) - The bitwise AND operator returns bit by bit the AND of input values. It compares the binary representation of the input values bit by bit and returns a new value that has a 1 in any bit position where both input values have a 1.

Example:

let a = 5; // Binary representation: 101
let b = 3; // Binary representation: 011
let result = a & b; // Binary representation: 001 (decimal value 1)

Bitwise XOR Operator (^) - The bitwise XOR operator returns bit by bit the XOR of input values. It compares the binary representation of the input values bit by bit and returns a new value that has a 1 in any bit position where the two input values have different bits.

Example:

let a = 5; // Binary representation: 101
let b = 3; // Binary representation: 011
let result = a ^ b; // Binary representation: 110 (decimal value 6)

Bitwise NOT Operator (~) - The bitwise NOT operator returns the opposite bit representation of the input. It works on one input value and checks each bit to return the opposite value. The operator has a high precedence and it is often used to create a bitmask.

Example:

let a = 5; // Binary representation: 101
let result = ~a; // Binary representation: 010 (decimal value -6)

Shift Operators

Left Shift Operator (<<): This operator shifts the bits of a number to the left by a given value, filling in 0's on the right side. This is equivalent to multiplying the number by 2 raised to the power of the given value.

let x = 8; // 1000 in binary
let y = x << 2; // shift left by 2 positions
console.log(y); // outputs 32 (100000 in binary)

Right Shift Operator (>>): This operator shifts the bits of a number to the right by a given value, filling in the sign bit (0 for positive, 1 for negative) on the left side. This is equivalent to dividing the number by 2 raised to the power of the given value.

Example:

let x = -8; // 11111111111111111111111111111000 in binary (32-bit two's complement)
let y = x >> 2; // shift right by 2 positions
console.log(y); // outputs -2 (11111111111111111111111111111110 in binary)

Unsigned Right Shift Operator (>>>): This operator is similar to the right shift operator, but it fills in 0's on the left side instead of the sign bit. This is useful for converting a negative number to a positive one, since the resulting number will always be positive.

Example:

let x = -8; // 11111111111111111111111111111000 in binary (32-bit two's complement)
let y = x >>> 2; // unsigned shift right by 2 positions
console.log(y); // outputs 1073741822 (00111111111111111111111111111110 in binary)