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)