What does a tilde do when it precedes an expression?

by

~ is a bitwise operator that flips all bits in its operand.

For example, if your number was 1, its binary representation of the IEEE 754 float (how JavaScript treats numbers) would be…

0011 1111 1111 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000

So ~ converts its operand to a 32 bit integer (bitwise operators in JavaScript do that)…

0000 0000 0000 0000 0000 0000 0000 0001

If it were a negative number, it’d be stored in 2’s complement: invert all bits and add 1.

…and then flips all its bits…

1111 1111 1111 1111 1111 1111 1111 1110

So what is the use of it, then? When might one ever use it?

It has a quite a few uses. If you’re writing low level stuff, it’s handy. If you profiled your application and found a bottleneck, it could be made more performant by using bitwise tricks (as one possible tool in a much bigger bag).

It’s also a (generally) unclear trick to turn indexOf()‘s found return value into truthy (while making not found as falsy) and people often use it for its side effect of truncating numbers to 32 bits (and dropping its decimal place by doubling it, effectively the same as Math.floor() for positive numbers).

I say unclear because it’s not immediately obvious what it is being used for. Generally, you want your code to communicate clearly to other people reading it. While using ~ may look cool, it’s generally too clever for its own good. 🙂

It’s also less relevant now that JavaScript has Array.prototype.includes() and String.prototype.includes(). These return a boolean value. If your target platform(s) support it, you should prefer this for testing for the existence of a value in a string or array.

More Related Contents:

  1. JavaScript Syntax error
  2. Location of parenthesis for auto-executing anonymous JavaScript functions?
  3. What do parentheses surrounding an object/function/class declaration mean? [duplicate]
  4. How does this JavaScript/jQuery syntax work: (function( window, undefined ) { })(window)?
  5. What does the leading semicolon in JavaScript libraries do?
  6. Why avoid increment (“++”) and decrement (“–“) operators in JavaScript?
  7. What does “options = options || {}” mean in Javascript? [duplicate]
  8. Why do results vary based on curly brace placement?
  9. How do I convert a float number to a whole number in JavaScript?
  10. Javascript: Get deep value from object by passing path to it as string [duplicate]
  11. Difference between (function(){})(); and function(){}(); [duplicate]
  12. Immediate function invocation syntax
  13. “var” or no “var” in JavaScript’s “for-in” loop?
  14. Is && statement() the same as if() statement()?
  15. How can I concatenate regex literals in JavaScript?
  16. Javascript Property with three dots (…)
  17. No semicolon before [] is causing error in JavaScript
  18. When should I use a semicolon after curly braces?
  19. Use of commas versus semicolons?
  20. JavaScript error (Uncaught SyntaxError: Unexpected end of input)
  21. Function and variable with the same name
  22. Nested JSON objects – do I have to use arrays for everything?
  23. How can % signs be used in identifiers
  24. When is the ‘javascript:’ prefix valid syntax?
  25. Javascript while loop return value
  26. Using a block’s return value in JavaScript
  27. Javascript history.PushState not working?
  28. + operator before expression in javascript: what does it do?
  29. What is this asm style “x | 0” some javascript programmers are now using?
  30. How do you set, clear and toggle a single bit in JavaScript?

Leave a Comment