33 Javascript Concepts — #12. Bitwise Operators

First of all, this story is based on Stephen Curtis -33 Fundamentals Every Javascript Developer Should Know and you can read it here.
I thought it is a great concept to know although it is not a requirement. I decided to learn and explain these concepts one by one.

Binary number

A bitwise operator treats their operands as a set of 32 bits (zeros and ones), rather than as decimal, hexadecimal, or octal numbers. 32 bits mean it has 32 of 0 or 1 like this 01010101010101010101010101010101. However, since this makes it hard to understand, I am gonna explain with a set of 8 bits that have only 8 of 0 or 1.

The binary number only represents numbers with 0 and 1. So There’s no other way but to shift 1 to left or increase by 1 to represent numbers.

// decimal  binary
// 1       00000001
// 2       00000010
// 3       00000011

In the above example, 1(decimal) is converted to 0000001(binary), and if 1(decimal) is added, it(binary) shifts 1 to the left since the binary system doesn’t have 2. And then if 1(decimal) is added again, in this time, 1 is added in the last place.

Bitwise AND (&)

Bitwise AND Returns a one in each bit position for which the corresponding bits of both operands are ones. It means if both of them have 1, 1.

// 1       00000001
// 2       00000010
// 1&2     00000000
console.log(1&2) // 0

For example, 1&2 returns 00000000. Because 1 is converted to binary number 00000001 and 2 is converted to binary number 00000010. But there’s no position in which the corresponding bits of both operands are ones.

// 7     00000111
// 9     00001001
// 7&9   00000001
console.log(7&9) // 1

In this case, 1 is logged on the console since both 7 and 9 have the last number 1.

Bitwise OR (|)

Bitwise OR Returns a zero in each bit position for which the corresponding bits of both operands are zeros. It means if one of them has 1, 1.

// 1       00000001
// 2       00000010
// 1|2     00000011
console.log(1|2) // 3
// 7     00000111
// 9     00001001
// 7|9   00001111
console.log(7|9) // 15

Unlike Bitwise AND, they result in 1 if one of them has 1, the result will be like above.

Use Case

Let’s imagine we have 8-bit numbers and some of them represent if a person has permission or not.

const readPermission = 4;     //00000100
const writePermission = 2;   //00000010
const executePermission = 1;  //00000001
let myPermisson = 0;
myPermission = readPermission | writePermission | executePermission;
let message = myPermission & readPermission ? ‘have permission’ : ‘no permisson’;
console.log(message);

For example, a person with 00000001 has execute-permission since the last number is 1. However, the person who has 00000000 don’t have execute-permission since the last number is 0.

If myPermission = readPermission | writePermission | executePermission,
myPermisson is equal to 00000111. It means I have all three permissions, read, write and execute.

As a result ‘have permission’ is logged on the console because myPermission & readPermission is true!!

reference: YOUTUBE