251

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?

1

13 Answers 13

288

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 -(231) and 231 - 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.210 = 111111111111111111111111110101012

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

NOT -4310 = 000000000000000000000000001010102 = 4210

Inverting again gives:

NOT 4210 = 111111111111111111111111110101012 = -4310

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

3
  • 9
    Which is to say, ~~ is a shorthand way (and possibly a good solution?) for creating a truncate function, but obviously in javascript.
    – ruffin
    May 22, 2013 at 16:22
  • 6
    JSLint will complain about the use of ~~. Sep 20, 2013 at 18:13
  • 3
    Try Math.trunc()
    – Xitalogy
    Jun 8, 2017 at 22:15
36

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
3
  • 9
    also ~~undefined // 0
    – rampion
    Sep 16, 2014 at 14:42
  • 2
    also ~~null // 0
    – chovy
    Aug 3, 2017 at 4:11
  • 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)
    – yunzen
    Jun 15, 2020 at 13:27
25

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);
}
3
14

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/

0
11

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

1
  • Have to scroll down to Matt's comment to see it in proper use ;)
    – mplungjan
    Oct 30, 2010 at 6:10
9

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

5

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

2

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

~~8.29 // output 8

Math.trunc(8.29) // output 8

1

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
0
1

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)

0
0

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

1
  • ~~(-1.23) yields -1, while Math.abs(Math.trunc(-1.23)) yields 1 Mar 27, 2023 at 2:46
0

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;
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.