I wrote a more detailed article on bitwise operators published on the LogRocket blog. Check it out here: Interesting use cases for JavaScript bitwise operators.
Although bitwise operators are sparingly used in JavaScript programs, they have quite a number of interesting applications. This post shows 5 simple applications of bitwise operators.
1. Even or Odd
No doubt the most popular way of checking if an integer is even or odd is by using the remainder operator (%) like so:
For signed integers that can be fully represented in 32 bits, the bitwise AND (&) operator can be used to check if the least significant bit is set. If it is set (that is set to 1), the integer is odd, otherwise it is even. Hence the previous functions become:
2. Includes
In ES6, the includes() method was added to the prototypes for the Array and String constructors to check if they contain a particular element or substring and return a boolean indicating the presence.
Prior to ES6, one of the available methods is the indexOf() method which returns the index of the element or substring if present and -1 otherwise. Since JavaScript bitwise operators represent integers in two's complement format, -1 is the integer with all bits set to 1, and its complement is 0 (with all bits set to 0).
This information can be used to create a simple includes() function that is based on indexOf() like so:
3. Powers of 2
Bitwise shift operators can be used to perform some quick arithmetic with powers of 2. The left shift (<<) operator can be used to quickly multiply integers by powers of 2. Given that (0 <= a < 32):
The sign-propagating right shift (>>) operator can be used to quickly perform integer division by powers of 2. Given that (0 <= a < 32):
The above can be used in algorithms like binary search, where you need to find the midpoint of an array like so:
4. Truncating Floats
Bitwise operators convert their operands to 32-bit integers. This has a truncating effect on operands that are floats.
The bitwise NOT (~) operator can be used to truncate a float to an integer (remove the decimal portion of a float).
Given that (-2147483649 < a < 2147483648):
The bitwise OR (|) operator can also be used in like manner to truncate a float to an integer like so:
5. Color Conversions
Bitwise operators can be used to convert color representations from RGB to hexadecimal and vice-versa. Each RGB color component (red, green and blue) ranges from 0 - 255, and can be fully represented with 8 bits.
Hence RGB color can be fully represented by a 24-bit integer, where the first (most significant) 8 bits represent the red, the next 8 bits represent the green and the last (least significant) 8 bits represent the blue.
Based on this information, we can convert a color representation from RGB to hexadecimal using the bitwise left shift (<<) and OR (|) operators as follows:
Note: The above function isn't reliable for RGB color component values lower than 16. For example: rgbToHex([0, 128, 255]) will return #80ff.
To convert from hexadecimal to RGB representation, we need to work in the reverse direction to extract each color component using the bitwise right shift (>>) and AND (&) operators like so:
Note: The above function will not work for hexadecimal colors in compact form (3 hexadecimal digits). For example: hexToRgb('#3ff') will return [0, 0, 0].
❤️ Like and Share
Thanks for making time to go through this post. I am really glad that you made it to the end, and do hope it was worth your time.
If you loved this post, kindly hit the like button and share with friends. You can also follow me for updates on more exciting content coming up soon.
Top comments (0)