JavaScript Cheat Sheet 10.41: JavaScript Bitwise Operations

Understanding JavaScript Bitwise Operations

In this tutorial, we will delve into the fundamentals of JavaScript bitwise operations. Bitwise operations manipulate the individual bits of binary representations of numbers. Understanding these operations is crucial for various tasks such as encoding, decoding, cryptography, and low-level optimization. We will cover the following topics:

1. Introduction to Bitwise Operations

Bitwise operations work on the binary representations of numbers. Each digit in a binary number represents a power of 2. For instance, 1010 in binary represents 1*2^3 + 0*2^2 + 1*2^1 + 0*2^0 = 10 in decimal.

2. Basic Bitwise Operators

JavaScript provides several bitwise operators:

  • Bitwise AND (&)
  • Bitwise OR (|)
  • Bitwise XOR (^)
  • Bitwise NOT (~)
  • Left Shift (<<)
  • Right Shift (>>)
  • Unsigned Right Shift (>>>)

These operators work on 32-bit integers.

3. Bitwise AND (&)

The bitwise AND operator (&) returns a 1 in each bit position where both operands have a 1.

let result = 5 & 3; // 0101 & 0011 = 0001 (1 in decimal)
console.log(result); // Output: 1

4. Bitwise OR (|)

The bitwise OR operator (|) returns a 1 in each bit position where at least one operand has a 1.

let result = 5 | 3; // 0101 | 0011 = 0111 (7 in decimal)
console.log(result); // Output: 7

5. Bitwise XOR (^)

The bitwise XOR operator (^) returns a 1 in each bit position where only one operand has a 1.

let result = 5 ^ 3; // 0101 ^ 0011 = 0110 (6 in decimal)
console.log(result); // Output: 6

6. Bitwise NOT (~)

The bitwise NOT operator (~) flips the bits of its operand.

let result = ~5; // ~0101 = 1010 (in two's complement form)
console.log(result); // Output: -6

7. Left Shift (<<) and Right Shift (>>)

Left shifting (<<) shifts the bits to the left by a specified number of positions. Right shifting (>>) shifts the bits to the right.

let result1 = 5 << 1; // 0101 << 1 = 1010 (10 in decimal)
let result2 = 5 >> 1; // 0101 >> 1 = 0010 (2 in decimal)
console.log(result1, result2); // Output: 10 2

8. Unsigned Right Shift (>>>)

The unsigned right shift operator (>>>) shifts the bits to the right, filling in zeros from the left.

let result = -5 >>> 1; // 11111111111111111111111111111011 >>> 1 = 01111111111111111111111111111101 (2147483645 in decimal)
console.log(result); // Output: 2147483645

9. Practical Examples

Let’s see a practical example of using bitwise operations to manipulate colors:

// Combine RGB values into a single integer
function combineRGB(r, g, b) {
    return (r << 16) | (g << 8) | b;
}

// Split an integer into RGB values
function splitRGB(color) {
    const r = (color >> 16) & 0xFF;
    const g = (color >> 8) & 0xFF;
    const b = color & 0xFF;
    return [r, g, b];
}

const red = 255, green = 128, blue = 0;
const combinedColor = combineRGB(red, green, blue);
console.log(combinedColor); // Output: 16744448

const [r, g, b] = splitRGB(combinedColor);
console.log(r, g, b); // Output: 255 128 0

This example showcases how to combine and split RGB values using bitwise operations.

Conclusion

Understanding bitwise operations is essential for low-level manipulation and optimization tasks in JavaScript. By mastering these operations, you can efficiently work with binary data, perform bitwise encryption, and optimize your code for performance-sensitive applications. Experiment with the provided examples and explore further applications of bitwise operations in your projects.

Leave a Reply