What does ~~ ("double tilde") do in Javascript?

Question

I was checking out an online game physics library today and came across the ~~ operator. I know a single ~ is a bitwise NOT, would that make ~~ a NOT of a NOT, which would give back the same value, wouldn't it?

Fredric

See also What is the “double tilde” (~~) operator in JavaScript? – Inspiration

Answer 1

It removes everything after the decimal point because the bitwise operators implicitly convert their operands to signed 32-bit integers. This works whether the operands are (floating-point) numbers or strings, and the result is a number.

In other words, it yields:

function(x) {
  if(x < 0) return Math.ceil(x);
  else return Math.floor(x);
}

only if x is between -(2³¹) and 2³¹ - 1. Otherwise, overflow will occur and the number will "wrap around".

This may be considered useful to convert a function's string argument to a number, but both because of the possibility of overflow and that it is incorrect for use with non-integers, I would not use it that way except for "code golf" (i.e. pointlessly trimming bytes off the source code of your program at the expense of readability and robustness). I would use +x or Number(x) instead.

---

How this is the NOT of the NOT

The number -43.2, for example is:

-43.2₁₀ = 11111111111111111111111111010101₂

as a signed (two's complement) 32-bit binary number. (JavaScript ignores what is after the decimal point.) Inverting the bits gives:

NOT -43₁₀ = 00000000000000000000000000101010₂ = 42₁₀

Inverting again gives:

NOT 42₁₀ = 11111111111111111111111111010101₂ = -43₁₀

This differs from Math.floor(-43.2) in that negative numbers are rounded toward zero, not away from it. (The floor function, which would equal -44, always rounds down to the next lower integer, regardless of whether the number is positive or negative.)

Prevenient

Which is to say, ~~ is a shorthand way (and possibly a good solution?) for creating a truncate function, but obviously in javascript. – Grith

JSLint will complain about the use of ~~. – Finochio

Try Math.trunc() – Flay

Answer 2

The first ~ operator forces the operand to an integer (possibly after coercing the value to a string or a boolean), then inverts the lowest 31 bits. Officially ECMAScript numbers are all floating-point, but some numbers are implemented as 31-bit integers in the SpiderMonkey engine.

You can use it to turn a 1-element array into an integer. Floating-points are converted according to the C rule, ie. truncation of the fractional part.

The second ~ operator then inverts the bits back, so you know that you will have an integer. This is not the same as coercing a value to boolean in a condition statement, because an empty object {} evaluates to true, whereas ~~{} evaluates to false.

js>~~"yes"
0
js>~~3
3
js>~~"yes"
0
js>~~false
0
js>~~""
0
js>~~true
1
js>~~"3"
3
js>~~{}
0
js>~~{a:2}
0
js>~~[2]
2
js>~~[2,3]
0
js>~~{toString: function() {return 4}}
4
js>~~NaN
0
js>~~[4.5]
4
js>~~5.6
5
js>~~-5.6
-5

Freedwoman

also ~~undefined // 0 – Barong

also ~~null // 0 – Benedicto

Technically you have the wrong order. The second ~ does what you described the first ~ does and vice versa. The ~ operator is a unary operators and is interpereted from right to left ~~X is like ~(~X) not like (~~)X (which would be a syntax error) – Elidaelidad

Answer 3

In ECMAScript 6, the equivalent of ~~ is Math.trunc:

Returns the integral part of a number by removing any fractional digits. It does not round any numbers.

Math.trunc(13.37)   // 13
Math.trunc(42.84)   // 42
Math.trunc(0.123)   //  0
Math.trunc(-0.123)  // -0
Math.trunc("-1.123")// -1
Math.trunc(NaN)     // NaN
Math.trunc("foo")   // NaN
Math.trunc()        // NaN

The polyfill:

function trunc(x) {
    return x < 0 ? Math.ceil(x) : Math.floor(x);
}

Rotund

Somewhat surprisingly, ~~ is faster than Math.trunc, jsperf.com/math-trunc-vs-double-bitwise-not-operator. Though, not everything is about speed; readability too. – Rotund

There is an important difference between ~~ and Math.trunc: if you pass a string, or NaN or whatever thing that's not a number, Math.trunc will return NaN, and ~~ will always return a number, in those cases, it will return 0. – Zoila

Math.trunc is marginally faster than ~~ in Chrome 59+, according to jsperf.com/math-trunc-vs-double-bitwise-not-operator. – Subaquatic

Answer 4

The ~ seems to do -(N+1). So ~2 == -(2 + 1) == -3. If you do it again on -3, it turns it back: ~-3 == -(-3 + 1) == 2. It probably just converts a string to a number in a round-about way.

See this thread: https://www.sitepoint.com/community/t/double-tilde/51608

Also, more detailed info is available here: https://dreaminginjavascript.wordpress.com/2008/07/04/28/

Pellitory

Answer 5

Given ~N is -(N+1), ~~N is then -(-(N+1) + 1). Which, evidently, leads to a neat trick.

Ceilidh

Have to scroll down to Matt's comment to see it in proper use ;) – Bedivere

Answer 6

Just a bit of a warning. The other answers here got me into some trouble.

The intent is to remove anything after the decimal point of a floating point number, but it has some corner cases that make it a bug hazard. I'd recommend avoiding ~~.

First, ~~ doesn't work on very large numbers.

~~1000000000000 == -727279968

As an alternative, use Math.trunc() (as Gajus mentioned, Math.trunc() returns the integer part of a floating point number but is only available in ECMAScript 6 compliant JavaScript). You can always make your own Math.trunc() for non-ECMAScript-6 environments by doing this:

if(!Math.trunc){
    Math.trunc = function(value){
        return Math.sign(value) * Math.floor(Math.abs(value));
    }
}

I wrote a blog post on this for reference: http://bitlords.blogspot.com/2016/08/the-double-tilde-x-technique-in.html

Tripper

Answer 7

Converting Strings to Numbers

console.log(~~-1);    // -1
console.log(~~0);     // 0
console.log(~~1);     // 1
console.log(~~"-1");  // -1
console.log(~~"0");   // 0
console.log(~~"1");   // 1
console.log(~~true);  // 1
console.log(~~false); // 0

~-1 is 0

if (~someStr.indexOf("a")) {
  // Found it
} else  {
  // Not Found
}

source

Mallet

Answer 8

~~ can be used as a shorthand for Math.trunc()

~~8.29 // output 8

Math.trunc(8.29) // output 8

Tun

Answer 9

Here is an example of how this operator can be used efficiently, where it makes sense to use it:

leftOffset = -(~~$('html').css('padding-left').replace('px', '') + ~~$('body').css('margin-left').replace('px', '')),

Source:

See section Interacting with points

above link down - here it is on the wayback machine (takes a long time to load)

Burkhart

Answer 10

Tilde(~) has an algorihm -(N+1)

For examle:

~0 = -(0+1) = -1
~5 = -(5+1) = -6
~-7 = -(-7+1) = 6

Double tilde is -(-(N+1)+1)

For example:

~~5 = -(-(5+1)+1) = 5
~~-3 = -(-(-3+1)+1) = -3

Triple tilde is -(-(-(N+1)+1)+1)

For example:

~~~2 = -(-(-(2+1)+1)+1) = -3
~~~3 = -(-(-(3+1)+1)+1) = -4

Mcadoo

Answer 11

Same as Math.abs(Math.trunc(-0.123)) if you want to make sure the - is also removed.

Sedillo

~~(-1.23) yields -1, while Math.abs(Math.trunc(-1.23)) yields 1 – Linwoodlinz

Answer 12

In addition to truncating real numbers, ~~ can also be used as an operator for updating counters in an object. The ~~ applied to an undefined object property will resolve to zero, and will resolve to the same integer if that counter property already exists, which you then increment.

let words=["abc", "a", "b", "b", "bc", "a", "b"];
let wordCounts={};    
words.forEach( word => wordCounts[word] = ~~wordCounts[word] + 1 );
console.log("b count == " + wordCounts["b"]);  // 3

The following two assignments are equivalent.

wordCounts[word] = (wordCounts[word] ? wordCounts[word] : 0) + 1;
wordCounts[word] = ~~wordCounts[word] + 1;

Adit

Answer 13

~~ is two unary bitwise-not operators next to one another.

This is used as a shorter and usually faster substitute for Math.floor() for small, positive numbers. Since it also performs a conversion to number step it can also be used as replacement of parseInt, though ~~ will yield 0 when parseInt would have given NaN, e.g: ~~("a1") gives 0, while parseInt("a1") gives NaN. Also see this whatever-to-number conversion table.

For small numbers that can be negative, it is equivalent to Math.trunc(): it removes everything to the right of the decimal.

For numbers whose absolute value is bigger than 2 ** 31 (2_147_483_648) the bitwise-not "overflows" and applying it twice gives a number whose sign and value are off:

• ~~(2 ** 31) gives -2_147_483_648
• ~~(2 ** 31 + 1) gives -2_147_483_647

To go deeper, the ~ computes the bitwise complement on the 32-bit integral part of a number. Running it twice leaves us with just a 32-bit integral cast. Also see the specification and the MDN documentation of this operator.

Linwoodlinz