Bitwise operators are those that act on a binary level. They are often very fast to execute and typically act on two operands.

You can use bitwise operators to manipulate binary numbers, optimize code, compress data, and implement techniques for graphics or game programming. Like most other programming languages, JavaScript has excellent support for bitwise operations.

What Are Operators?

Most programming languages ​​use the concept of an “operator”—a symbol that tells the interpreter to perform a specific mathematical, relational, or logical operation.

There are many different types of JavaScript operators you should be aware of, from those that look like standard math operators, such as “+”, to operators that compare two values. Bitwise operators are a special set that deals with binary numbers.

Bitwise AND (&) Operator

The JavaScript bitwise AND (&) operator compares the corresponding bits of two binary operands—numbers that contain just 0 and 1. For each pair of input bits, the corresponding output bit is “1” if both input bits are “1” or “0” otherwise.

Here’s the syntax of the bitwise AND operator:

 a & b
 

in this example, a and b are the operands on which you are performing the bitwise operation.

Here’s how the bitwise AND operator works:

1. The AND operation applies to each pair of corresponding bits in a and b from right to left.
2. If both bits are 1, the result is 1. If either bit is 0, the result is 0.
3. The result is a new number where each bit represents the outcome of the AND operation on the corresponding bits of a and b.

For example:

 let a = 50; 
let b = 100; 
let result = a & b; 
console.log(result); 
 

In the example above, a is 50 in decimal, equivalent to the binary number 00110010, and b is 100 in decimal, equivalent to the binary number 01100100. The AND operator compares each pair of corresponding bits from right to left and produces the resulting binary number 00100000, which is 32 in decimal.

Bitwise OR (|) Operator

The bitwise OR (|) operator compares the corresponding bits of two operands and returns “1” if either or both bits are “1” and “0” if both bits are “0”.

Here’s the syntax of the bitwise OR operator:

 a | b
 

where a and b are the operands of the operation.

The bitwise OR (|) operator works the same way as the bitwise AND operator. The only difference is the OR operator returns “1” if “either” of the bits are “1” and “0” if “both” bits are “0”.

For example:

 let a = 50; 
let b = 100; 
let result = a | b; 
console.log(result); 
 

In the example above, the bitwise OR operator compares each pair of bits from right to left (ie, 0 | 0 = 0, 0 | 1 = 1, 1 | 1 = 1, and so on). The resulting binary number is 01110110, which is 118 in decimal.

Bitwise XOR (^) Operator

The bitwise XOR (^) operator compares the corresponding bits of two operands and returns “1” if either but not both of the operands is “1” and “0” if both of the operands is “1” or “0”.

Here’s the syntax of the bitwise XOR operator:

 a ^ b
 

where a and b are the operands of the operation.

The bitwise XOR operator works the same way as the bitwise OR and AND operators. The only difference is that it returns “1” if “either but not both” of the operands is “1” and “0” if “both” of the operands are “1” or “0”.

For example:

 let a = 50; 
let b = 100; 
let result = a ^ b; 
console.log(result); 
 

In the example above, the XOR operator compares each pair of bits from right to left (ie, 0^0 = 0, 0^1 = 1, 1^1 = 0, and so on). The resulting binary number is 01010110, which is 86 in decimal.

Bitwise NOT (~) Operator

The bitwise NOT (~) operator is a unary operator that operates on a single integer by inverting all its bits. In other words, it changes every “0” bit to “1” and every “1” bit to “0”.

Here’s the syntax of the bitwise NOT operator:

 ~c
 

where c is the operand.

The bitwise NOT operator works by inverting all the bits of an operand, including the sign bits.

For example:

 let c = 10; 
let d = -10; 
console.log(~c); 
console.log(~d); 
 

In the example above, the NOT operator inverts all the bits (ie, 0 → 1, 1 → 0etc.), including the sign bits.

LeftShift (<<) Operators

The left shift operator shifts the bits of a given number to the left. The operator takes two operands: the number to shift and the number of bits to shift it by.

Here’s the syntax for the left shift operator:

 a << b
 

where a is the operand for the left shift operator, and b is the number of bits the operator will shift the operand by.

The left shift operator works by shifting each bit of an operand to the left by the specified number of positions and discarding the excess bits shifted off to the left.

For example:

 let a = 50; 
let b = 2;
let result = a << b; 
console.log(result); 
 

In the example above, the left shift operator shifted the decimal 50 of binary 00110010 by two places. The resulting binary value is 11001000, which is 200 as a decimal.

Sign-Propagating Right Shift (>>) Operator

The sign-propagating right shift (>>) shifts the bits of a number to the right while preserving the sign of the original number. The operator takes two operands: the number to shift and the number of bits to shift it by.

Here’s the syntax for the sign-propagating right shift operator:

 a >> b
 

where a is the operand for the right shift operator, and b is the number of bits the operator will shift the operand by.

The sign-propagating right shift operator works similarly to the left shift operator; the only difference in the mode of operation is that the right shift maintains the sign.

For example:

 let a = -50; 
let b = 2;
let result = a >> b; 
console.log(result); 
 

In the example above, the right shift operator shifted the decimal -50 (11001110) two spaces to the right resulting in the decimal -13 (11110011).

Unsigned Right Shift (>>>) Operator

The unsigned right shift (>>>) operator shifts the bits of a number to the right by a specified number of positions and fills the empty spaces on the left with zeros. The operator discards excess bits that it shifts off to the right.

Here’s the syntax for the unsigned right shift operator:

 a >>> b
 

where a is the operand for the right shift operator, and b is the number of bits the operator will shift the operand by.

The unsigned right shift operator works similarly to the right shift. However, unlike the right shift operator (>>), it does not preserve the sign of a number when shifting. Instead, it treats the number as an unsigned integer and fills the leftmost bit with a zero.

For example:

 let a = -5; 
let b = 2;
let result = a >>> b; 
console.log(result); 
 

In this example, the unsigned right shift operator shifted “-5” two spaces to the right, effectively removing the sign and resulting in the decimal “1073741822”.

The Applications of Bitwise Operators

By manipulating individual bits in binary numbers, bitwise operators can create complex functionality that is otherwise difficult or impossible to achieve with traditional arithmetic operations.

Understanding how to use bitwise operators can help you build more efficient and performant web applications.