The Mysterious Double Tilde (~~) Operation

Asad Memon — Fri, 06 Dec 2019 08:18:50 +0000

Long ago, I was optimizing a hot-path in some game physics code which involved lots of Math.floor() and parseInt() operations. I came across a micro-optimization to cast float or string to int.

~~ operation

console.log(~~1.6); // 1

What's happening?

A single ~ is a unary operator that converts the given number N to -(N+1). For example:

console.log(~2);  // -3
console.log(~1);  // -2
console.log(~0);  // -1

This operation is a bit too specific to be useful to many. But when you apply this operation twice, it's equivalent to Math.floor or parseInt. Examples:

console.log(~~-1);    // -1
console.log(~~0);     // 0
console.log(~~1);     // 1
console.log(~~"-1");  // -1
console.log(~~"0");   // 0
console.log(~~2.4);  // 2
console.log(~~3.9);  // 3
console.log(~~"1");   // 1
console.log(~~true);  // 1
console.log(~~false); // 0

Should I use it in my code?

It depends. As I said, it's a micro-optimization and the performance gains are only significant if you are doing this operation a lot in your code. Do not use it if you care about readability of your code as it might confuse other developers in your team.

Performance comparison

I wrote a little perf-test script to compare.

On Desktop Chrome, Math.floor() is almost as fast as ~~:

On Desktop Safari, ~~ is way faster than both Math.floor() and parseInt():

On iPhone XS, ~~ is also way faster than the others:

Happy Coding!

DEV Community: Asad Memon

The Mysterious Double Tilde (~~) Operation

~~ operation

What's happening?

Should I use it in my code?

Performance comparison