How to do bit manipulation in JavaScript
Tags: javascript, beginners, codenewbie, learning
Published: 2021-02-11 13:01:46

Bitwise operations aren’t very common in JavaScript, but sometimes they’re indispensable.

<!--more-->

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.

If you're new to the topic, you can start with the [introduction to the binary number system](https://learn.coderslang.com/0017-algorithms-abstraction-and-pseudocode/).

## 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 write down all the numbers in binary.

### AND, OR, XOR operators

Operators `&`, `|` and `^` require 2 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 decimal number is in the comment:

```javascript
const x = 5;   // 0101
const y = 6;   // 0110
```

It's easier if you write the binary numbers one under the other like this:

```javascript
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:

```javascript
console.log(x & y);  // 4
console.log(x || y); // 7
console.log(x ^ y);  // 3
```

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

```javascript
console.log(x ^ x);  // 0
console.log(y ^ y);  // 0
```

On the contrary, if you replace `^` with either `&` or `|` the number won’t change.

### NOT operator

The `~` operator is a different beast. It’s called a unary operator as it applies to a single operand (number).

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

```javascript
console.log(~x);     // -6
console.log(~y);     // -7
```

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, `1` - it’s negative.

If you apply the `~` operator the number twice, you’ll get back to where you started:

```javascript
console.log(~~x);     // 5
```

### Bitwise shift operators

The bitwise shift requires 2 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 1 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.

```javascript
console.log(x << 1);   // 10
console.log(y << 2);   // 24
```

#### 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 2. In our case, with the small numbers, it’s not so easy:

```javascript
console.log(x >> 1);   // 2
console.log(y >> 2);   // 1
```

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

```javascript
const n = 100;   
const m = -100;

console.log(n >>> 2);   // 25
console.log(m >>> 2);   // 1073741799
```

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](https://coderslang.com) you might find my app Coderslang very helpful. It has over 1500 questions in JavaScript, HTML/CSS, Java, C#, Node.js, React.js, React Native, and QA. Download it on [iOS](https://apps.apple.com/us/app/coderslang-learn-programming/id1489105103) or [Android](https://play.google.com/store/apps/details?id=com.coderslang.com&hl=en&gl=US).

I've also posted a [FREE ebook](https://learn.coderslang.com/free-ebooks) with 35 top JavaScript interview questions.