My TypeScript Software Design & Architecture book just prelaunched! Check out solidbook.io.
Close

What Does A Tilde Do In JavaScript?

Nov 16th, 2017 / 3 min read / Share / Edit on GitHub
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!



Discussion

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


0 Comments

Be the first to leave a comment

Submit

Stay in touch!



About the author

Khalil Stemmler

Khalil Stemmler is a Developer / Designer and co-founder of Univjobs. He frequently publishes articles about Domain-Driven 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]
Jun 7th, 2019 / 10 min read
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]
May 11th, 2019 / 4 min read
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
Apr 16th, 2019 / 7 min read
Here's how to build a "Related Posts" component for your Gatsby.js site.
Cleaner Code with Async / Await Tutorial
Jul 30th, 2018 / 7 min read
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 2000+ other developers learning about Domain-Driven Design and Enterprise Node.js.

I won't spam ya. 🖖 Unsubscribe anytime.

Get updates