Introduction to JavaScript Bitwise Operators
Tags: javascript, beginners, operations, codenewbie
Published: 2021-08-15 20:37:12

### Introduction
Recently on twitter, a tweep asked how to determine if a number is even or odd. I hurriedly answered using modulus. Yeah, my answer was right, but any other approach? I was hinted about bitwise operator. JavaScript operates using different type of operator which includes 
* **Assignment operators**
* **Arithmetic operators**
* **Ternary operators**
* **Logical operators**
* **Comparison operators**
* **Typeof operator** 
* **Bitwise operators**

> We commonly use most of these operators in our routine but sparingly use bitwise operator especially if you just getting started with *JavaScript*.
This article will elucidate on different bitwise operators, how we can use it and  


### What's bitwise?
Bitwise is a level of operations that involves working with individual bits, which are the smallest units of data in a computer. a bit can be `0` or `1`. All bitwise operations are performed with `32bits` binary numbers and later converted to 64bits(*javaScript* works with `64bits`).

> In this article, we will make use of  `ES6` *arrow function* syntax and conversion to decimal(base 10) will follow the example below:

![base 10](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jkt2j7hkxj5cqzetz2r5.PNG)

> Conversion of integers to bit will be done using the binary operation as illustrated below, Writing of the bits begins from the lasts bit to the first as pointed by the arrow:


![base2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/14kwd6oynej6wzrxlfzu.png)

![bits](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hbz7o9hqssz43jx0366b.png)

> From the above snippets, we can conclude that numbers that has the last bit as `0`  are `even` while integer with last bit as `1` are `odd` 


> Converting 12 to bit , we have 
```
000000000000000000000000000001100
```

But for simplicity sake, we remove the preceding `0s` and our bits are
  ```
  1100

  ```

### **Types of Bitwise Operators**

* `&` — AND

* `|` — OR

*  `~` — NOT

*  `^` —  XOR
 
* `<<` — Left Shift

* `>>` — Sign-Propagating Right Shift

* `>>>` — Zero-Fill Right Shift

> **Lets get started**

* **`&` - `AND` OPERATOR** : This return  `1` if the corresponding bits of  `operands` are `1` and return `0`  if they differs. 

#### Below is a table for comparison

![AND](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xyci7cby0bgzcswx6q62.png)

##### Example 1: The example below is a `function` that computes the `AND` operator.

![AND](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fe79gf8lxgzbkdtn4or3.png)

> Common interview question is to determine if a number is even or odd, JavaScript Bitwise AND can be used.

##### Example 2 : Determine if a number is even or odd

![even](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1epnsetx68icoeo2efza.png)

> **Explanation** 
As I said earlier, `Even` Numbers when converted to `bits` ends with `0`, *JavaScript* compares the last bit and discard the remaining. Therefore,  `0 & 1`  will return `0`.

##### Example 3: The below code checks for `odd` Number

![odd](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/530dcn0vyyjl6h0h0xkk.png)

> **Explanation** 
This check if the last `bit` is `1`, then compare   `1 & 1`  and return `true` otherwise return `false`

* **`|` - `OR` OPERATOR** : This return `1` if any of the corresponding operand's `bit` is `1`and return `0` is the  operand's bits are `0`. 

> Below is a table illustrating different bits combination

![OR](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zsgje7ozee7tg6j6vgem.png)

##### Example 4 : The below code takes two `operands` as arguments and perform the `OR` bitwise operation.

![Bitwise OR](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gv54ar2zkskd13wwlfa1.png)



* **`~` `NOT` Operator** : This accepts only one `operand`(unary operator). `~` performs `NOT` operator on every `bit`. `bits` that are `1` become `0` and `bits` that are `0` turn to `1`, forming the ones' complement of the given binary value.

##### Example 5 : The `function` below performs `NOT` operation

![bitwiseNOT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eeg7iio28kwvb6q5a2w3.png)

> **Explanation** 

As we said earlier, ~ operator turns the bit from zero to one and vice-versa.
 `~ 8` becomes `1111111111111111111111111111011` (-9 in decimal) 


##### Few things to note:

* The first bit by the left is called the `sign bit`. The `sign bit` is `0` for positive integer and  `1`   for negative  integer.

* The remaining `31bits` are used to represent integer. 
* the maximum `32bits` integer that can be represented can be calculated as  `2^31 - 2^0 = 2147483647`

* While the minimum is `-(2^31) = - 2147483648`

> Bitwise operators convert their operands to 32-bit signed integers in two’s complement format.  when the NOT operator is used on an integer, the resulting value is the two’s complement of the integer as shown below

![noToPERATOR](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6kz61hcbyhd1jzs2iph6.png)


* **`^` - `XOR` OPERATOR** : Also called (exclusive-Or), it returns `0` if the operand's bit are the same `(0 or 1)` and if different return `1`

![XOR](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aw457v90o2zvex7wssxl.png)
##### Example 6 : The `function` below performs  `XOR` operation 


![XOR](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3iyvyqxjs6zbo4x7cpp4.png)

* **`<<` - `Left shift` OPERATOR** : This takes two `operands`, the `first` is an `integer` to be converted to `bits` while the `second` `operand` is the number of `bits` of the `first` `operand` to be shifted away from the `left` and added to the `right`.
##### Example 7 : The `function` below performs  `Left shift` operation 

![checkLeftShift](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80bf83o9qxigda7e6jr2.png)

* **`>>` - `Sign-propagating right shift` OPERATOR**: This takes two `operands`, the `first` is an integer to be converted to bits while the `second` `operand` is the number of `bits` of the first `operand` to be shifted away from the `right` and also discarded from the `left`.

##### Example 8 : The `function` below performs  `Sign-propagating right shift` operation.

![checkRightShift](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ocfagl285xcekd8fj8up.png)

* **`>>>` - `Zero-fill right shift`** : This behaves  like the sign-propagating right shift (>>) operator. The difference is that `bits` are shifted in from the left.

##### Example 9 : The `function` below performs  `Zero-fill right shift` operation.

 ![Zero-fill](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7mv9kevdd92df5c4hqi.png)


**Thanks for Reading!!!!**
If you enjoy this and wish to get Notified when I published new articles, click [here](https://mailchi.mp/4f641d33a5ee/subscribe-ti-my) to subscribe.