JavaScript Tips 1: Bitwise NOT

JavaScript is full of surprises and from time to time you may see strangely written source code that is not easy to understand at first glance. Such difficult-to-understand yet effective code phrases are called Idioms and one such idiom is shown in the following line:

Code Editor

You might wonder, what on earth does the ~ symbol mean. Short answer: A bit wise NOT operation. See the following link to read more about JavaScript bitwise operations and take the 3 bit system as an example of the following table:

Value	Binary	NOT Operation
1	001	110
2	010	101

Easy. Value 1 in 3 bit binary system is represented as 001, value 2 as 010 and so forth. Now, why would anyone use this in JavaScript condition evaluation? To answer this, we have to go a bit further and understand how negative numbers are represented in binary system. The table above shows only positive integers. Let's explore negative integers.

One of the most popular and perhaps most spread way to represent negative integers in computing is called Two's complement.

Two's complement is a mathematical operation on binary numbers, as well as a binary signed number representation based on this operation

By its definition, to convert a given integer into a negative integer we have to flip the bits by applying the NOT operation and add 1. Two's complement can handle a range expressed by the following formula:

−(2^N−1) to +(2^N−1 − 1)

Our 3 bit example system would therefore cover values from -4 to +3. Its binary representation is shown in the following table:

Signed integer	Binary value	Unsigned integer	Binary value
-4	100	0	000
-3	101	1	001
-2	110	2	010
-1	111	3	011
0	000	4	100
1	001	5	101
2	010	6	110
3	011	7	111

Now when two's complement method is clear let's get back to JavaScript. I'm sure you're aware of JavaScript's indexOf method. Whether used on arrays or strings it always returns an index of searched element. When an element is not found the function returns -1.

The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

I'm convinced things start to get sense to you now. In the binary table above we can clearly see that negative 1 integer will be represented as 111. As we also know the ~ symbol which is a bitwise NOT operation that inverts the bits the question now is:

if we are looking for an element in an array and it is not being found - what will the indexOf return? Right, the -1 (or 111 binary). What will the ~ symbol cause? Right, flip the bits and make it 000. What does the 0 equal to in JavaScript's expression evaluation? Right, it's evaluated as falsy expression and thus the FALSE.

So by the following code:

..we're asking if the value does exist in the array by asking if it's not equal to false by using JavaScript's truthy & falsy evaluation where 0 means false and whatever else means true.

In other words - if it doesn't exist - the indexOf function will return -1 which equals to binary 111 which equals to 000 when inverted by ~ symbol which then equals to FALSE when evaluated by JavaScript's truthy/falsy algorithm. In any other case the condition will succeed because only -1 will give binary 000 when inverted. So when an element is not found the condition can be also understood as following code:

Code Editor

Such idioms are sometimes hard to read but once fully understood it becomes usually a shorter way to write a code. Some programmers don't like these constructs as they are harder to read. I'm not going to agree or defend these opinions as in the end they are question of preferences. The thing is that It's important to be able to read them because you never know where you might need them.

See the example project on plunker