IVAN SIVAK
  • About
  • Blog
  • CV
  • Contact

JavaScript Tips 1: Bitwise NOT

10/25/2015

0 Comments

 
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
0 Comments



Leave a Reply.

    About

    Blog about my programming experiments, tests and so on.

    View my profile on LinkedIn

    Categories

    All
    Algorithms
    Angular 2
    ASP.NET
    ASP.NET Core
    Aurelia JS
    Cryptography
    Data Structures
    Gulp
    JavaScript
    Math
    MVC6
    .NET Core
    React JS
    Security
    SQL Server

    Archives

    November 2016
    October 2016
    September 2016
    May 2016
    March 2016
    February 2016
    January 2016
    December 2015
    October 2015

    RSS Feed

Ivan Sivak


Stack overflow

Stack overflow profile

LinkedIn

LinkedIn profile

Email

ivansivak@outlook.com

GitHub

GitHub repository
  • About
  • Blog
  • CV
  • Contact