Though it can come at the cost of blatantly defying the often pretentious
opinions of JSLint (I prefer JSHint), I enjoy using a lesser known bit of
JavaScript: the `~`

operator.

`~`

is the **bitwise NOT** operator in JavaScript. It’s a unary operator
(it operates on a single operand) that flips the bits that represent the
number it is operating on—this is the
One’s Compliment
of a number. If you’d rather think about it in terms of
a mathematical formula, it will give you the result of `-(N + 1)`

.

Take the number 500. In binary it’s represented as:

```
500 = 00000000000000000000000111110100
```

(Operands of bitwise operators (such as `~`

) are always converted to signed
32-bit integers.)

The value is `~500`

will return the **one’s compliment** of 500. Look closely
at the two binary strings together, and you’ll see that the binary representation
of -500 is simply the binary representatino of 500 with each bit flipped (1
becomes 0 and 0 becomes 1).

```
~500 = -501 = 11111111111111111111111000001011
500 = 00000000000000000000000111110100
```

## Checking for Existence

When you’re looking for element `n`

in an array `a`

, you usually break out
`.indexOf()`

. If the script finds `n`

as the first element in `a`

, then it
will return zero: a falsy value. This false negative result requires the
conditional to check, specifically, for a value that isn’t -1.

In other words, we can’t do this:

```
if (a.indexOf(n)) {}
```

We need to do this:

```
if (a.indexOf(n) !== -1) {}
```

Stylistically, I’m not a huge fan of how that looks. But we can use the
`~`

operator to cut this down a bit. Remembering that `~`

equates to
`-(N + 1)`

, it’s clear that substituting `N`

for `-1`

will return in `0`

.
Since `0`

is a fasly value, we can shorten our conditional to:

```
if (~a.indexOf(n)) {}
```

Follow the table below to see why `~`

works in this scenario:

a | n | found? | a.indexOf(n) | ~a.indexOf(n) |
---|---|---|---|---|

[‘a’, ‘b’] | b | found | 0 | -1 |

[‘a’, ‘b’, ‘c’, ‘d’] | c | found | 2 | -3 |

[‘a’, ‘b’] | z | not found | -1 | 0 |

As seen above, if `n`

exists in `a`

, then `~a.indexOf(n)`

will be a
non-zero value, and therefore truthy. This is not the case for
`a.indexOf(n)`

, where it will return `0`

if `n`

is found in the first
index.

Sure it might sound a little pedantic and saves a negligible amount of bytes, but this is purely about coding style and preference.

## Truncating a Decimal

If you have a decimal, say `25.14`

, and you want to round down, a common
method is to use JavaScript’s built-in `Math.floor(25.14) === 25`

. You
could even use `parseInt(25.14, 10)`

. If you’re feeling a little crazy,
you could do something completely absurd like
`+String(25.14).split('.').shift();`

.

While all the above work fine (the last one works, but I wouldn’t call
it *“fine”*), there is a more succinct way to “floor” (it’s actually *truncating*)
a decimal. This is, of course, using the `~`

operator. Two of them, to be precise.

When you use `~`

on a decimal, it will convert it to an integer:

```
~24.15 === -25
```

Again, refer back to the mathematical representation of `~`

, `-(N + 1)`

,
and consider applying two of them at once:

```
~~24.15
= ~(-(24.15 + 1)) = ~(-25) // (remember the integer conversion from ~)
= -(-25 + 1)
= 24
```

As seen above, applying `~`

twice has the same result of truncating a
decimal. More obviously,

```
Math.floor(24.15) === ~~24.15 === 24
```

Another way to think about how `~~`

ends up truncating a decimal, is to
use two facts about how `~`

operates:

- It automatically converts a decimal to an integer.
- It inverses the binary representation of the number.

When we use `~~`

, the first `~`

will chop off any decimal and
flip the bits (all 1s go to 0s, all 0s go to 1s). The second `~`

will
then flip the bits back to their original position, and therefore return
the original number sans decimal.

#### Examples

```
~~24.15 // 24
~~10 // 10
```

(Yes, you can also use tricks like `n | 0`

, but this post is about `~`

)

### A Huge Caveat

While this is a neat and quick way to truncate the decimal from a number, an
issue does exist—note that I’ve been saying **truncate** and not **floor**.
This is because `~~`

does *not* floor, as it is popularly believed:

```
Math.floor(-20.51) === ~~-20.51 // FALSE!
```

The actual mathematical definition of the “floor” of some variable *x* is the
largest integer *y* that is not greater than *x*. In the case of negative numbers,
simply truncating the decimal will *not* give you the floor!

Take `-20.51`

for example. Using the mathematical definition, the floor of
`-20.51`

is the largest integer that is not greater than `-20.51`

itself. This
would be `-21`

, *not* `-20`

, since `-21 < -20`

.

JavaScript’s built-in `Math.floor()`

handles this correctly, while `~~`

does not:

```
Math.floor(-20.51) === -21
~~-20.51 === -20
```

## In Conclusion…

`~`

is a neat operator that has shining moments as well as dark pitfalls. Use it
with care and it will reward you, use it carelessly and you risk frustrating bugs
that evade detection. It can make your code look much more sleek and
pretty (hey, just my opinion), but others feel it can make the code confusing and
unreadable for those not familiar with the language. It all comes down to personal preference, and more importantly, the
code style guidelines for the project you’re working on. If it’s your own project
and you like `~`

, just remember to force JSHint to share your opinion with `bitwise: true`

!