JavaScript - Bitwise Operators

Hello there, future coding wizards! Today, we're going to dive into the fascinating world of JavaScript Bitwise Operators. Now, I know what you're thinking: "Bitwise what?" Don't worry! By the end of this lesson, you'll be manipulating bits like a pro. So, let's embark on this binary adventure together!

JavaScript Bitwise Operators

Bitwise operators are special tools in JavaScript that allow us to work with numbers at the binary level. That means we're dealing with 1s and 0s, just like computers do internally. It might sound intimidating, but trust me, it's actually quite fun once you get the hang of it!

Before we jump into the specifics, let's take a look at all the bitwise operators we'll be covering:

Operator	Name	Description
&	AND	Sets each bit to 1 if both bits are 1
|	OR	Sets each bit to 1 if one of two bits is 1
^	XOR	Sets each bit to 1 if only one of two bits is 1
~	NOT	Inverts all the bits
<<	Left Shift	Shifts left by pushing zeros in from the right
>>	Right Shift	Shifts right by pushing copies of the leftmost bit in from the left
>>>	Zero-fill Right Shift	Shifts right by pushing zeros in from the left

Now, let's break these down one by one!

JavaScript Bitwise AND (&) Operator

The Bitwise AND operator is like a very strict doorman at an exclusive club. It only lets a 1 through if both inputs are 1. Otherwise, it's a 0. Let's see it in action:

let a = 5;  // 0101 in binary
let b = 3;  // 0011 in binary
console.log(a & b);  // 0001 in binary, which is 1 in decimal

In this example, we're comparing 5 (0101) and 3 (0011) bit by bit. Only the rightmost bit is 1 in both numbers, so that's the only 1 that makes it through. The result is 0001, which is 1 in decimal.

JavaScript Bitwise OR (|) Operator

The Bitwise OR operator is like a much more lenient bouncer. If either input is a 1, it lets it through. Let's see how it works:

let a = 5;  // 0101 in binary
let b = 3;  // 0011 in binary
console.log(a | b);  // 0111 in binary, which is 7 in decimal

Here, we get 1 wherever either 5 or 3 has a 1, resulting in 0111, which is 7 in decimal.

JavaScript Bitwise XOR (^) Operator

The XOR operator is like a quirky party game where you're only allowed in if you're wearing a hat or a scarf, but not both! It returns 1 only if the bits are different. Check this out:

let a = 5;  // 0101 in binary
let b = 3;  // 0011 in binary
console.log(a ^ b);  // 0110 in binary, which is 6 in decimal

We get 1 where the bits are different (second and third from right), resulting in 0110, or 6 in decimal.

JavaScript Bitwise NOT (~) Operator

The NOT operator is like opposite day - it flips all the bits. But there's a catch! In JavaScript, it also inverts the sign and subtracts 1. Let's see:

let a = 5;  // 0101 in binary
console.log(~a);  // -6 in decimal

The result might surprise you! It's because JavaScript uses two's complement for negative numbers. So ~5 is actually -6.

Bitwise Left Shift (<<) Operator

The Left Shift operator is like a conveyor belt moving bits to the left and adding zeros on the right. Each shift effectively doubles the number:

let a = 5;  // 0101 in binary
console.log(a << 1);  // 1010 in binary, which is 10 in decimal
console.log(a << 2);  // 10100 in binary, which is 20 in decimal

See how 5 becomes 10 with one shift, and 20 with two shifts? It's like magic!

Bitwise Right Shift (>>) Operator

The Right Shift operator does the opposite, moving bits to the right. It effectively halves the number (rounding down):

let a = 5;  // 0101 in binary
console.log(a >> 1);  // 0010 in binary, which is 2 in decimal

5 divided by 2 is 2.5, but we round down to 2.

Bitwise Right Shift with Zero (>>>) Operator

This operator is similar to >>, but it always fills with zeros from the left, even for negative numbers:

let a = -5;  // 11111111111111111111111111111011 in binary (32-bit)
console.log(a >>> 1);  // 01111111111111111111111111111101 in binary, which is 2147483645 in decimal

This one's a bit tricky! It's mainly used when you need to treat a number as unsigned.

And there you have it, folks! You've just taken your first steps into the world of bitwise operations. These operators might seem a bit abstract now, but they're incredibly useful for tasks like working with binary data, creating hash functions, or optimizing certain algorithms.

Remember, practice makes perfect. Try playing around with these operators, and soon you'll be biting through bits like a pro! Happy coding, and may the bits be with you!

Credits: Image by storyset