## Articles

- Programming with JS: Bitwise Operations — Alexander Kondov 100%
- Using JavaScript’s Bitwise Operators in Real Life — ian m
- JavaScript Bitwise Operators — w3resource 100%
- A Comprehensive Primer on Binary Computation and Bitwise Operators in Javascript — Paul Brown concept of using bitwise operator in real cases 100%

## Bits

Bits are binary digits consists of 0 & 1, which is the basic unit of data in computer.

## Bitwise Operators

### & (AND)

Return 1 if both compared bits are 1s.

### | (OR)

Returns 1 if either of compared bits is 1.

### ^ (XOR)

Returns if compare bits have only single 1.

### ~ (NOT)

Flips the bits.

### a<<b (left shift)

Shifts a in binary representation for b bits to left, add 0 for missing ones.

### a>>b (right shift)

Shifts a in binary representation for b bits to right.

## Two's complement

two's complement is a way to express negative numbers in binary expression. The leftmost bit represents the sign, if it is 1, it means that number is negative.

For example,

10111 = -16 + 4 + 2 + 1 = 9

10011 = -16 + 2 + 1 = -13, while

01001 = 8 + 1 = 9

01101 = 8 + 4 + 1 = 13

The interesting part is that negative version of certain number is obtained by flipping each bit and then adding one.

For example, in the case for 13...

13 = 01101(2)

~13 = 10010(2)

~13 +1 = 10011(2) = -16 + 2 + 1 = -13

-X = ~X +1, while, X is base 2

## How to express number in base 2

### using parseInt

```
parseInt(1111,2) // 15
```

### using binary literals (ES6)

```
let a= 0b111;
console.log(a); // 7
```

(`0o`

prefix is for octal literals)

## Real world implementation of binary expression

### Case1. Data of which student returned his homework

Let's say I'm the math teacher of class consists of 5 students. I want to store data which student returned his homework or not.

#### Using Array

One way is using array. We can use `true`

for who returned his homework, and `false`

for not returned yet. So, initial state for array would be like this.

```
const Data = [ false, false, false, false, false];
```

Let's say student of index 0, 2 returned his homework.

Then you should iterate the array and modify the false to true of responding index.

```
for(i=0;i<Data.length;i++){
if((i == 0) || (i == 2)){
Data[i] = true;
}
}
console.log(Data); // [ true, false, true, false, false]
```

It has time complexity of O(n).

#### Using binary expression & bitwise operator

Instead of using array, lets use binary expression. Instead of `true`

, we use 1 and `false`

for 0. So, initial state would be like this.

```
let Data = 0b00000;
```

It is a single number, compare to array, it save lots of memory if we think the number of students become larger.

For same case of updating, we can use `|`

bitwise operator. To update the state of student of index 0, 2...

```
Data = Data | 101000 ;
console.log(Data); // 101000
```

Let's say we want the list of students who didn't returned homework yet.

```
const yetRetured = ~Data;
console.log(yetReturned); // 010111
```

If new student was added to class,

```
Data = Data << 1 ;
console.log(Data); // 1010000
```

It's way more simple!

### Case2. Checking flags

Let' say we operate website and want to check whether the state of user satisfies multiple flags. For example,

flag A = 'Is user authenticated?'

flag B = 'Is user in unprohibited region?'

flag C = 'Is user human(not bot)?'

flag D = 'Is user's payment is accepted?'

Similar to Case 1, we can use array and multiple if statements. But it's way more easier and simpler to use binary expression. Let's match one-to-one with flags and binary digits.

flag A = 0001(2) = 1

flag B = 0010(2) = 2

flag C = 0100(2) = 4

flag D = 1000(2) = 8

Then we can check user's state as an integer with following function.

```
function raiseflag(binary){
const flagA = 0b0001;
const flagB = 0b0010;
const flagC = 0b0100;
const flagD = 0b1000;
const flags = [];
if(binary & flagA) {
flags.push('flagA');
}
if(binary & flagB) {
flags.push('flagB');
}
if(binary & flagC) {
flags.push('flagC');
}
if(binary & flagD) {
flags.push('flagD');
}
return flags;
}
console.log(raiseflag(10)); // ["flagB", "flagD"]
```

## Top comments (0)