Bitwise Operators in JavaScript

bitwise operators in javascript

Bitwise operators work with binary data at the bit level in JavaScript. They process numbers in binary form and return a new number after applying a specific bit rule.

What are Bitwise Operators in JavaScript

Bitwise operators are symbols that act on the binary form of numbers. JavaScript changes each number into a 32-bit integer and runs the operation on each bit.

When JavaScript runs a bitwise operation, it first changes the number to binary. It compares bits from two numbers or flips bits from one number. It then changes the result back to decimal.

Here is a quick example:

let a = 5;  // binary: 0101
let b = 3;  // binary: 0011
let result = a & b; // binary: 0001 => decimal: 1
console.log(result);

In this example, the & operator compares each bit. If both bits are 1, the result bit is 1. Only the last bit matches, so the result is 1.

Here are the reasons to use the bitwise operator in JavaScript:

  • Work with low-level data control in graphics or encryption.
  • Improve speed in some math operations.
  • Pack or unpack multiple values inside one number.

Type of Bitwise Operators in JavaScript

Bitwise AND (&) returns 1 in each bit position only when both bits are 1, otherwise 0. Here is an example:

let result = 5 & 3;  
console.log(result); // 1
  • 5 in binary: 0101
  • 3 in binary: 0011
  • Compare each bit: only the last bit is 1 in both → 0001 (which is 1 in decimal).

Bitwise OR (|) returns 1 in a bit position when at least one of the bits is 1. For example:

let result = 5 | 3;  
console.log(result); // 7
  • 50101
  • 30011
  • Bit-by-bit: 0111 → decimal 7.

Bitwise XOR (^) returns 1 when the bits are different, returns 0 when they are the same. Here is an example:

let result = 5 ^ 3;  
console.log(result); // 6
  • 50101
  • 30011
  • Compare: 0110 → decimal 6.

Bitwise NOT (~) flips each bit — 1 becomes 0, and 0 becomes 1. Here is an example:

let result = ~5;  
console.log(result); // -6
  • 5 in binary (32-bit signed): 00000000000000000000000000000101
  • Flipped: 11111111111111111111111111111010 → This is -6 in two’s complement form.

Bitwise left shift (<<) moves all bits to the left by the given number of positions. Fills the empty right bits with 0.

For example:

let result = 5 << 1;  
console.log(result); // 10
  • 50101
  • Shift left 1 place: 1010 → decimal 10.
  • This is the same as when you multiply by 2 once.

Bitwise right shift (>>) moves all bits to the right. It keeps the sign bit (for negative numbers).

For example:

let result = 5 >> 1;  
console.log(result); // 2
  • 50101
  • Shift right 1 place: 0010 → decimal 2.

For negative numbers:

console.log(-5 >> 1); // -3

The sign bit is preserved, so it rounds toward negative infinity.

Zero-fill right shift (>>>) moves bits to the right and fills the left with 0. It does not keep the sign bit.

let result = -5 >>> 1;  
console.log(result); // 2147483645
  • -5 in 32-bit binary: 11111111111111111111111111111011
  • Shift right 1, fill left with 0: 01111111111111111111111111111101 → decimal 2147483645.

The Difference Between Bitwise and Logical Operators

Bitwise operators look at the binary bits of a number and do calculations on each bit. The result is always another number. While the logical operators work with true or false values. They return true or false based on the logic you apply.

Here is a table that shows you the key differences for each one:

FeatureBitwise OperatorLogical Operator
Data type usedWorks on numbersWorks on Boolean values
Level of operationBit levelLogical condition
Result typeNumberBoolean
Symbol examples&, |, ^, ~, <<, >>, >>>&&, ||, !

Bitwise operators can be used to check or set bits in binary values. Logical operators are used to control program flow with conditions.

Examples

Mask Bits:

let flags = 13; // binary: 1101
let mask = 4;   // binary: 0100
let result = flags & mask;
console.log(result);

This example uses & to check if a specific bit is set. It checks if the third bit from the right is on. The output 4 means the bit is on.

Toggle Bits:

let value = 9;   // binary: 1001
let toggle = 5;  // binary: 0101
let result = value ^ toggle;
console.log(result); // 12

The ^ operator flips bits where the mask has 1. This changes the first and third bits in the binary form of the number.

Fast Multiplication by 2:

let num = 7;
let result = num << 1;
console.log(result); //14

The << operator moves bits to the left. Each left shift by 1 doubles the number. So 7 becomes 14 after one shift.

Force Unsigned Integer:

let num = -5;
let result = num >>> 0;
console.log(result); // 4294967291

This uses >>> to change a signed number into an unsigned 32-bit integer. The result is a large positive number that holds the same bit pattern.

Wrapping Up

In this article, you learned what bitwise operators in JavaScript are and how they work on binary data. You also understood the types of them.

Here is a quick recap:

  • Bitwise operators work on the binary bits inside a number.
  • You can use them in many tasks, such as:
    • Masks
    • Toggles
    • Shifts
    • Low-level data control

FAQs

How do bitwise operators work in JavaScript?

Bitwise operators work on 32-bit signed integers. JavaScript converts numbers to binary before the operation.
  • & - Bitwise AND
  • | - Bitwise OR
  • ^ - Bitwise XOR
  • ~ - Bitwise NOT
Example:

let a = 5;    // 0101
let b = 3;    // 0011
console.log(a & b); // 1 (0001)

What is the difference between bitwise AND and OR in JavaScript?

Bitwise AND (&) returns 1 only if both bits are 1. Bitwise OR (|) returns 1 if at least one bit is 1. Example:

let x = 6; // 0110
let y = 3; // 0011
console.log(x & y); // 2  (0010)
console.log(x | y); // 7  (0111)

How does the bitwise NOT (~) operator work in JavaScript?

Bitwise NOT (~) inverts all bits. It changes 0 to 1 and 1 to 0. In JavaScript, it also flips the sign due to two's complement. Example:

let num = 5; // 00000000000000000000000000000101
console.log(~num); // -6

How to use bitwise shift operators in JavaScript?

Bitwise shifts move bits left or right:
  • << - Left shift
  • >> - Right shift with sign
  • >>> - Right shift zero-fill
Example:

let n = 2; 
console.log(n << 1); // 4 (shift left)
console.log(n >> 1); // 1 (shift right)
console.log(n >>> 1); // 1 (zero-fill right)

Similar Reads

JavaScript Math abs(): How It Works with Examples

Some numbers come from user input and other come from math operations. Sometimes, these numbers need to stay positive. The…

JavaScript Garbage Collection: How it Works with Examples

JavaScript removes unused memory blocks with garbage collection. It frees memory space so programs run without leaks. What is JavaScript…

JavaScript “use strict” Mode: What It Is and Why You Should Use It

Code mistakes used to slip by without a warning. That made bugs hard to trace and fix. JavaScript "use strict"…

JavaScript Nullish Coalescing Operator Guide with Examples

The JavaScript nullish coalescing operator (??) gives a default value when a variable is null or undefined. Understand the Nullish…

JavaScript Hello World: Write a Simple Program in 3 Ways

If you are ready to take your first steps into the realm of web development, then there cannot be a…

JavaScript Symbol Type: How it Works with Examples

JavaScript Symbol Type gives a way to make unique values. A Symbol never matches any other value and this helps…

JavaScript Math log: How it Works with Examples

JavaScript Math.log() was added to help people find the natural log of a number. It solves real problems in science…

JavaScript do while Loop: How it Works with Examples

The "do while" loop in JavaScript runs code once before checking the condition. Use it when the code must run…

JavaScript Math ceil: Round Numbers with Precision

Some numbers do not stay whole. You get decimal parts when you divide or calculate prices. You may need to…

Math.cbrt in JavaScript: How to Finds Cube Roots

JavaScript added Math.cbrt to solve cube roots. Before that, developers used custom code or Math.pow with 1/3. It works with…

Previous Article

HTML sup Tag: How to Add Superscript in Web Pages

Next Article

PHP array_diff_assoc: How to Compare Arrays with Keys

Write a Comment

Leave a Comment

Your email address will not be published. Required fields are marked *


Subscribe to Get Updates

Get the latest updates on Coding, Database, and Algorithms straight to your inbox.
No spam. Unsubscribe anytime.