Tilde or the Floor? Practical use for JavaScript bitwise operators. (#1)

JavaScript bitwise operators are one of these features of JavaScript that we always forget about. It seems like we assume there is no good use for them in a client-side code. Why would we care about ones and zeros if we're not using binary? Why would we ever care for binary AND, OR, XOR or left/right shift?

I am not going to explain how these operators are affecting binary numbers because there are plenty of resources available covering this topic.

Instead, in a series of articles, I will focus on a practical use for few of them showing how to make your JavaScript code faster, more compact and unfortunately often less readable.

Bitwise NOT - The ~ operator

Apart from "inverting the bits of its operand" bitwise NOT in JavaScript is actually very useful not only when it comes to binary. Firstly, it has a very interesting effect on integers - it converts the integer to -(N+1) value. For example:

~2 === -3; //true
~1 === -2; //true
~0 === -1; //true
~-1 === 0; //true

However, the most practical way of utilizing the power of this operator is to use it as a replacement for Math.floor() function as double bitwise NOT performs the same operation a lot quicker. You can use it, to convert any floating point number to a integer without performance overkill that comes with Math.floor(). Additionally, when you care about minification of your code, you end up using 2 characters (2 tildes) instead of 12.

Example use of double tilde / double bitwise NOT operator:

~~2 === Math.floor(2); //true, 2
~~2.4 === Math.floor(2); //true, 2
~~3.9 === Math.floor(3); //true, 3

Performance difference converting a list of 100000 float numbers to integer:

#BrowserMath.floor()Bitwise double NOT ~~
#1Firefox 7.0.142ms29ms
#2Firefox 7.0.144ms28ms
#3Chrome 1563ms64ms
#4Chrome 1563ms68ms
#5IE8265ms192ms
#6IE8324ms190ms

This test is also available here: http://jsperf.com/jsfvsbitnot.

Performance difference between Math.floor() and JavaScript bitwise double NOT

I must admit these results are very surprising - Internet Explorer actually performs better than Chrome! Math.floor() is still faster on Internet Explorer than bitwise NOT. All other browsers are indeed behaving as expected - JavaScript bitwise NOT performs a lot better.

Summary

Use double bitwise NOT when:

1. You want to convert the number from float to integer.
2. You want to perform same operation as Math.floor() but a lot quicker.
3. You want to minimalize your code.

Do not use double bitwise NOT when:

1. You run Google Chrome (apparently?).
2. You care about readability of your code.

Next..

In next article I will describe binary left shift and right shift and how to practially use them in your JavaScript code.

Tags: 

Social/Code

profile for rochal on Stack Exchange, a network of free, community-driven Q&A sites