5 Simple Applications of JavaScript Bitwise Operators
Tags: javascript, computerscience, webdev
Published: 2019-10-28 01:26:20

> _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](https://blog.logrocket.com/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:

![](https://thepracticaldev.s3.amazonaws.com/i/f52f7te2r8prxxi00llp.png)

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:

![](https://thepracticaldev.s3.amazonaws.com/i/whpbd8gn2fn3tlm79z1h.png)
  

## 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:

![](https://thepracticaldev.s3.amazonaws.com/i/e99rnp6p791kwj10wtx3.png)


## 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`**):

![](https://thepracticaldev.s3.amazonaws.com/i/iwnwx6m72ax6f2aqdhp6.png)

The sign-propagating right shift (`>>`) operator can be used to quickly perform integer division by powers of 2. Given that (**`0 <= a < 32`**):

![](https://thepracticaldev.s3.amazonaws.com/i/qap02sbl7095rn3lkaxv.png)

The above can be used in algorithms like **binary search**, where you need to find the midpoint of an array like so:

![](https://thepracticaldev.s3.amazonaws.com/i/9cn2l5e54pchbu0a40mw.png)


## 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`**):

![](https://thepracticaldev.s3.amazonaws.com/i/e1pow60urkmjafljdzmt.png)

The bitwise OR (`|`) operator can also be used in like manner to truncate a float to an integer like so:

![](https://thepracticaldev.s3.amazonaws.com/i/84uhmgu4gaat501r7xrp.png)


## 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.

![](https://thepracticaldev.s3.amazonaws.com/i/cvbv3ruulr99tiys0liw.png)

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:

![](https://thepracticaldev.s3.amazonaws.com/i/rz166b71p5qfg4o5zp4y.png)

**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:

![](https://thepracticaldev.s3.amazonaws.com/i/de6zk1kjmo4yh37cl4gf.png)

**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.