#### How to Do Bit Manipulation in JavaScript

Bitwise operations arenâ€™t very common in JavaScript, but sometimes theyâ€™re indispensable.

To understand how bitwise operations work in JavaScript, you need to first understand what a binary system is and how to convert numbers from decimal to binary and back again.

An introduction to the binary number system can be found here.

## A Broad Review of All Bitwise Operators in JS

Operator | Common name | Description |
---|---|---|

`&` |
AND | If both bits are 1 – the result is 1. If at least one of them is 0 – the result is 0. |

`|` |
OR | If both bits are 0 – the result is 0. If at least one of them is 1 – the result is 1. |

`^` |
XOR | If both bits are the same – the result is 0. If the bits are different – the result is 1. |

`~` |
NOT | Inverts all bits in a number. |

`<<` |
Left shift | Shifts all bits to the left, fills empty slots with zeros. |

`>>` |
Signed right shift | Shifts all bits to the right, fills empty slots with the leftmost bit, to maintain the sign of the number. |

`>>>` |
Unsigned right shift | Shifts all bits to the right, fills empty slots with zeros. |

## Examples and Usage

Bitwise operators in JavaScript are quite hard to understand if you apply them to decimal numbers.

I suggest starting with a piece of paper and a pencil and writing down all the numbers in binary.

### The AND, OR, XOR Operators

The operators `&`

, `|`

and `^`

require two numbers to function properly. They compare the bits in these numbers one-by-one, applying the rules from the table above.

Letâ€™s try them out. The binary representation of a decimal number is in the comment:

Itâ€™s easier if you write the binary numbers one under the other like this:

```
AND 0101 OR 0101 XOR 0101
0110 0110 0110
---- ---- ----
0100 0111 0011
```

Now, we can add `console.log`

and see if our calculations were right:

An important trick with XOR is that if you place the same number on both sides of it, youâ€™ll always get zero.

On the contrary, if you replace `^`

with either `&`

or `|`

the number wonâ€™t change.

### The NOT Operator

The `~`

operator is a different beast. Itâ€™s called a unary operator as it applies to a single operand (number).

```
NOT 0101 => 1010
NOT 0110 => 1001
```

The sign flips as itâ€™s determined by the leftmost bit in a JavaScript number. If itâ€™s set to `0`

, the number is positive, Â if it’s set to `1`

itâ€™s negative.

If you apply the `~`

operator the number twice, youâ€™ll get back to where you started:

### Bitwise Shift Operators

The bitwise shift requires two numbers to run. The first one is the actual number thatâ€™s being shifted and the second is the number of binary digits that should be moved.

#### Left Shift

Shifting the binary number one digit to the left is the same as making it two times bigger. Unless itâ€™s already so big that there are no bits to hold the result of such a multiplication.

#### Right Shift

The right shift, contrary to the left shift, makes the number smaller. If the number is large enough and no significant bits will â€śfall off,â€ť it will divide the number by two. In our case, with the small numbers, itâ€™s not so easy:

Donâ€™t be lazy, check the binary calculation yourself!

#### Unsigned Right Shift

The unsigned right shift is different from the regular right shift, as it doesnâ€™t maintain the sign of the number. When applied to negative numbers it will always turn them positive as the leftmost bit will become `0`

.

There were no surprises with `100`

and it expectedly got `4`

times smaller.

But do you understand why `-100`

turned into `1073741799`

?

## Conclusion

If youâ€™re doing web development using JavaScript then you most likely will never have to use bitwise operators in your everyday tasks.

Some interviewers, though, like this topic a lot and might ask you to implement some tasks using only bitwise operations. For example, determine if the number is even.

If youâ€™re looking to prepare for the technical interview you might find my app, Coderslang, very helpful. It has over 1,500 questions in JavaScript, HTML/CSS, Java, C#, Node.js, React.js, React Native, and QA.

Download it on iOS or Android.

Credit: Source link