What Does A Tilde Do In JavaScript?

The tilde in JavaScript is actually surprisingly useful for shorthand determining the truthiness of a value.

It's not every day that you see a tilde in JavaScript.

I was taking a look through the source code for the Twit NPM library when I was creating a Twitter Bot and came across the following lines of code:

if(~followers.indexOf(target)) {
  // do some action

Notice the tilde on the first line? Let's find out what that's all about.

I discovered that when we use the ~ operator, it does -(A + 1) where A is the value to the right of the tilde. For example, we'd get -2 if we did this (since -(1 + 1) = -2):

~['apples', 'oranges'].indexOf('apples'); // => 0
~['apples', 'oranges'].indexOf('oranges'); // => -2

Maybe you're like me and you're not really seeing the usefulness of using tilde yet.

It turns out that it's actually useful for determining the truthiness of a numeric value. It flips all the bits in its operand.

For a moment, let's just realize the mad crazy language that we're working with and recall that JavaScript does this:

-2 ? true : false; // => true
0 ? true : false; // => false
-1 ? true : false; // => true 😲

Ah! Isn't that funny? -1 has a truthiness of true and the only integer that has a truthiness of false is 0. So really, we can use tilde as a shorthand. Check this out:

// Instead of doing this
if(!fruits.indexOf('apples') != -1) {
  // Mmm, I love apples.

 else {
  // We ain't got no apples

// We can do this 
// to see if an array contains a particular value 
// (btw, there's a better way to do this with ES6 now.

if (!!~fruits.indexOf('apples')) {
  // Yay apples
  console.log("Found apples!") // <= this will print
 else {
  // Still no apples
  console.log("No apples apparently")

Now, the question then becomes... am I going to use this? Probably not, but it's cool to know that it exists after having stumbled upon it. I don't think I'd use this much solely because I'd prefer others to understand my code as fast as possible if they have to read it.

I hope you learned something here and won't get alienated next time you see a ~ floating around.

[Update: 2018/02/05] I lied. It's been a single day and I've already used ~ at least 4 times in my personal projects. Hey man, I'm sorry- it's kinda cool!


Liked this? Sing it loud and proud 👨‍🎤.

1 Comment

14 days ago

What's the better way to do this in ES6 now?

Stay in touch!

About the author

Khalil Stemmler,
Developer Advocate @ Apollo GraphQL ⚡

Khalil is a software developer, writer, and musician. He frequently publishes articles about Domain-Driven Design, software design and Advanced TypeScript & Node.js best practices for large-scale applications.

View more in Web Development

You may also enjoy...

A few more related articles

Over $85 billion spent on fixing bad code [bootcamps, junior devs, JavaScript, and software design principles]
More and more money is being spent by companies on maintaining bad JavaScript code. Here's where I think our industry needs to cha...
TypeScript vs. JavaScript [Pros / cons]
TypeScript is arguably one of the best things to come to the JavaScript world helping developers comfortably create complex enterp...
How to Build a Related Posts Component with Gatsby.js
Here's how to build a "Related Posts" component for your Gatsby.js site.
Cleaner Code with Async / Await Tutorial
Asynchronous programming in JavaScript used to be difficult to write clean code with. Today we have options. You can write asynchr...

Want to be notified when new content comes out?

Join 5000+ other developers learning about Domain-Driven Design and Enterprise Node.js.

I won't spam ya. 🖖 Unsubscribe anytime.

Get updates