• +91-8294938831

  • Hajipur, Bihar, 844101

☰
❮
❯

JavaScript

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

JavaScript Bitwise

← Previous Next →

Bitwise operators in JavaScript are used to manipulate individual bits of numbers. While most JavaScript operations work with numbers at a higher level (decimal or floating-point), bitwise operators allow you to perform low-level operations directly on the binary representation of integers.

Bitwise operations are often used in performance-critical code, low-level programming, flags, masks, or encryption algorithms. Understanding them can also help you debug certain algorithms efficiently.

All bitwise operations in JavaScript work on 32-bit signed integers, even though JavaScript numbers are generally 64-bit floating-point values.

Binary Representation of Numbers

Before diving into operators, it’s helpful to understand how numbers are represented in binary:

let num = 5; // Decimal: 5
console.log(num.toString(2)); // Logs: 101 (binary representation)

  • Each number is converted internally to a 32-bit signed integer when performing bitwise operations.

  • Negative numbers use two’s complement representation.

Bitwise AND &

The AND operator compares each bit of two numbers and returns 1 if both bits are 1, otherwise 0.

let a = 5; // 0101
let b = 3; // 0011

let result = a & b; 
console.log(result); // Logs: 1 (0001 in binary)

  • Bitwise AND is often used to mask specific bits.

Bitwise OR |

The OR operator compares each bit of two numbers and returns 1 if at least one bit is 1.

let a = 5; // 0101
let b = 3; // 0011

let result = a | b;
console.log(result); // Logs: 7 (0111 in binary)

  • Bitwise OR is useful for setting specific bits.

Bitwise XOR ^

The XOR (exclusive OR) operator returns 1 if the bits are different, and 0 if they are the same.

let a = 5; // 0101
let b = 3; // 0011

let result = a ^ b;
console.log(result); // Logs: 6 (0110 in binary)

  • XOR is often used in toggles or encryption.

Bitwise NOT ~

The NOT operator flips every bit of a number. In JavaScript, it also converts the number to a 32-bit signed integer.

let a = 5; // 00000000000000000000000000000101
console.log(~a); // Logs: -6

  • Formula: ~x = -(x + 1)

  • Be careful with negative results because of two’s complement representation.

Left Shift <<

The left shift operator shifts bits to the left by a specified number of positions, filling the right side with zeros.

let a = 5; // 0101
let result = a << 2; // Shift left by 2
console.log(result); // Logs: 20 (10100 in binary)

  • Equivalent to multiplying by 2^n (here 5 * 2^2 = 20).

Right Shift >>

The signed right shift operator shifts bits to the right, preserving the sign bit for negative numbers.

let a = 20; // 10100
let result = a >> 2; 
console.log(result); // Logs: 5 (0101 in binary)

  • Equivalent to dividing by 2^n and rounding towards negative infinity.

Unsigned Right Shift >>>

The unsigned right shift operator shifts bits to the right, filling the left side with zeros, ignoring the sign.

let a = -20; 
let result = a >>> 2;
console.log(result); // Logs: 1073741819

  • This is useful when working with unsigned 32-bit integers.

Combining Bitwise Operators

Bitwise operators can be combined to perform complex operations like flags, masks, and toggles.

const READ = 1;    // 0001
const WRITE = 2;   // 0010
const EXECUTE = 4; // 0100

let permissions = 0;

// Grant read and write permissions
permissions = permissions | READ | WRITE; 
console.log(permissions); // Logs: 3 (0011)

// Check if WRITE permission exists
let hasWrite = (permissions & WRITE) !== 0;
console.log(hasWrite); // true

// Remove READ permission
permissions = permissions & ~READ;
console.log(permissions); // Logs: 2 (0010)

  • Using bitwise operators for flags is highly efficient.

Practical Example: Toggling Bits

let value = 5; // 0101

// Toggle the second bit using XOR
value = value ^ 2; 
console.log(value); // Logs: 7 (0111)

// Toggle again
value = value ^ 2; 
console.log(value); // Logs: 5 (0101)

  • XOR is ideal for toggling bits without affecting other bits.

Tips and Notes

  • All bitwise operations convert operands to 32-bit signed integers.

  • Use >>> for unsigned operations, especially with large numbers or negative values.

  • Bitwise operators are fast and memory-efficient for flags, masks, and low-level logic.

  • Combining bitwise operations can optimize certain algorithms like permissions, graphics, and cryptography.

Summary of the Tutorial

  • JavaScript bitwise operators work at the binary level of 32-bit integers.

  • & (AND), | (OR), ^ (XOR), ~ (NOT) manipulate bits.

  • <<, >>, >>> shift bits left or right.

  • Useful in flags, masks, toggles, encryption, and performance-critical code.

  • Understanding binary representation is key to mastering bitwise operations.

Bitwise operations may not be used daily in typical web apps, but they are essential in advanced JavaScript, game development, low-level computations, and algorithm optimization.

Practice Questions

  1. Use the bitwise AND & operator to check which bits are common between 12 and 5 and log the result.

  2. Use the bitwise OR | operator to combine 8 and 3 and log the resulting number.

  3. Use the bitwise XOR ^ operator on 7 and 10 and log the result. Explain why the output is what it is.

  4. Use the bitwise NOT ~ operator on the number 6 and log the result.

  5. Left shift the number 4 by 3 positions using << and log the result.

  6. Right shift the number 32 by 2 positions using >> and log the result.

  7. Use the unsigned right shift >>> operator on -16 and log the result. Explain the difference from >>.

  8. Implement a simple permission system using bitwise operators: define READ = 1, WRITE = 2, EXECUTE = 4, then grant READ and EXECUTE permissions and log the resulting value.

  9. Toggle the second bit of the number 5 using XOR ^ and log the new value. Then toggle it back and log again.

  10. Use bitwise operators to check if a number permissions = 7 has WRITE permission (value 2) and log true or false.

← Previous Next →

Online Code Editor and Compiler

Write and run code directly in your browser. Live preview for frontend languages.

Try Editor Now >>

CodePractice Blogs

Latest Blogs on JavaScript

JavaScript

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

codepractice logo
Login
Go Back Top