Chris Bateman

Blog

How Double-Equals Works in JavaScript

tl;dr — Don’t use double-equals!

When asked about the difference between double and triple-equals, a lot of JS developers will tell you that == compares values and === compares values and types. In other words, 1 == "1" will be true, and 1 === "1" will be false.

That explanation is somewhat true, but it belies a much more complicated reality.

Some of the confusion comes from thinking that == is somehow related to truthiness, which is all about how variables get coerced into booleans — which happens in an if statement like this:

if (something) {

In that case — 0, "" the empty string, null, undefined, and NaN will all return false. Non-zero numbers, Non-empty strings, arrays and objects (empty or not) will all return true. Most devs have a pretty good handle on this.

But… does that mean that a non-zero number, or all non-empty strings will double-equal true? This is where things can get confusing.

if ('a') {           // true
if ('a' == true) {   // false
if ('a' == false) {  // false

if (2) {             // true
if (2 == true) {     // false
if (1 == true) {     // true

Hopefully that makes it clear that truthiness has nothing to do with ==.

Remember: truthiness is about coercion into booleans. With double-equals, nothing will ever get coerced into a boolean. So what’s really going on?

The answer is the Abstract Equality Comparison Algorithm. If the two types differ, JS follows a particular process for converting them into the same type, so that it can compare them. If types don’t match somewhere along the way — the endgame will be numbers.

  • First, booleans are converted to numbers. True becomes 1 and false becomes 0.
  • Next, objects will be turned into strings using .toString() (unless you modified .valueOf() to return a primitive). So [1] becomes "1", [1,2] becomes "1,2", and both {...} and [{...}] become "[object Object]".
  • If a string and a number are left, the string is converted to a number (so any string with non-number characters will become NaN — which, by the way, never ever equals anything, including itself).
  • null and undefined equal themselves and each other.

That’s the gist of it, but you can check out the spec for more details.

So — do you need to remember all these rules? Absolutely not. As Felix Geisendörfer puts it, “Programming is not about remembering stupid rules. Use the triple equality operator as it will work just as expected.”

That’s why most all JS style guides recommend using only ===. Some allow for an exception when checking for null or undefined (by using “== null“). But some folks would argue against even that.

No comments yet. You can be the first!

Mozilla, DRM, and Pragmatism

Mozilla has taken a bit of a beating lately — more than their fair share, for sure. The latest trouble has been over their decision to add the Encrypted Media Extensions (EME) standard to Firefox. EME basically allows for native browser implementations of Digital Rights Management (DRM) systems.

There was a lot of unhappiness about this, which is understandable. I’m opposed to DRM — not because I’m in favor of pirating content — but because DRM has nothing to do with piracy and everything to do with leverage over creators of playback devices.

I shared an article on Twitter which made the case that there should have been a bigger outcry when Google and Microsoft implemented EME:

Google and Microsoft and Apple have already started implementing EME, over the complaints of precisely nobody…

I like the warm fuzzy feeling I get from knowing that Mozilla are out there doing the right thing… Firefox should stand on principle here and refuse to play DRMed videos – but of course I’m not going to stop using DRMed video, I’ll just use Safari for that. The warm fuzzy feeling is jolly nice, but it’s not enough to actually keep the Mozilla organisation running…

Mozilla helps keep the web open for us, but in return we have to help keep the web open for Mozilla. And we aren’t.

However, I was immediately seized upon by a dissenter who claimed that Mozilla was losing their core values and would lose their core user base because of it.

First off — switching away from Firefox because of DRM doesn’t add up. “I’ve been going out of my way to use the browser fighting against DRM, but now I might as well switch to Chrome, which embraced and promoted DRM from the start. Because DRM is the only aspect of the open web that Mozilla ever has or will stand for.” Yeah, that makes tons of sense.

But here’s the most important part — while there certainly are lots of people who use Firefox because of their committment to the open web, the average Firefox user has no idea about any of this. Half a billion people use Firefox (according to Mozilla); and for the vast majority of them, without EME, all they would know is that their Netflix doesn’t work in Firefox.

So it’s a tough situation for Mozilla. They’re clearly unhappy about adding EME, but they’re doing it because they believe that they simply can’t survive without it. And I agree. Mozilla hasn’t lost their core values, and I believe they still have much to offer the open web. But they can’t do any good at all if they don’t have people using their browser.

Tony Kushner penned the following words (inspried by Abraham Lincoln):

A compass, I learned when I was surveying, it’ll point you true north from where you’re standing, but it’s got no advice about the swamps and deserts and chasms that you’ll encounter along the way. If in pursuit of your destination, you plunge ahead, heedless of obstacles, and achieve nothing more than to sink in a swamp… what’s the use of knowing true north?

Old Particle App

Access it here: Bright Lights.

A couple years ago, I built an app for the iOS app store using HTML5 Canvas. It was there for a year, and made a very modest profit, but it was really too silly and simple to be worth keeping there.

I’ve been meaning to put it on GitHub for a while, and I finally got around to it, so here you go. I made a number of modifications to make it suitable for use on the open web, and it’s also hosted here now. It’s a couple minutes worth of fun for kids, you can add it to your home screen, and it works offline.

With an app like this, there’s just one notable drawback to having a “home screen app” instead of a native app – you can’t prevent the notification and control centers from popping up when your finger goes past the top or bottom of the screen. Oh well. Also, you can’t remove the status bar, though that’s not a huge deal.

No comments yet. Now's your chance.

Impetus.js

Long story short: I made a simple JavaScript utility for adding momentum to anything — Impetus.js.

Long story: I used to play around with creating panoramas (you know, before smartphones made it easy to make bad ones), and I was wondering if you could display a spherical panorama using CSS 3D transforms. Turns out you can. I wasn’t the first to come up with it, but it was really fun to figure out. You can check it out here: Spherical.js.

I built it to work on touch devices – but the first time I tried it, it was clear that I’d need to add momentum to the touch interaction. Momentum is so ubiqitous in touch UIs, that anything without it feels really unnatural. I started coding momentum into the panorama code, and then realized that I was solving two separate problems, so I abstracted out the momentum code, and Impetus was born.

You give it an area to listen for touch or mouse events, and it gives you the x and y values plus some momentum. That’s it. It’s not for scrolling, it’s not for touch carousels — it’s just simple momentum. I have no idea if it’ll be useful to anyone, but if you have any feedback or suggestions, please let me know!

The code is on Github and it’s on Bower as “impetus.”

I Still Love Firefox

I switched to Chrome as my primary browser almost right after it was released. The UI was minimal and fast, and I loved it. And the developer tools matured at lightning speed, so it wasn’t long before I dropped Firefox for development too. And Firefox was relegated to the status of “testing only,” right alongside IE.

But here’s the thing: I really want Firefox to succeed. This has been thrown in to sharp relief lately, as we’ve seen Chrome/Blink start to throw their weight around (also: meme version).

So here’s why I still love Firefox and Mozilla.

Firefox is 100% open source. You don’t have to wonder what they’re doing with your data – you can see for yourself.

Firefox stuck their neck out for unencumbered video formats. And they’re doing the same now, fighting against DRM.

Their documentation is second to none. From JS to CSS to DOM to HTML5 to helping you fix the code you wrote for other browsers. (Oh, and don’t forget to click on MDN in your search results, not the site that shall not be named!)

Mozilla is working on all sorts of fantastic projects to help move the web forward. There’s Servo, Firefox OS, and asm.js, among many others.

Mozilla’s mission is to, “promote openness, innovation & opportunity on the Web.” And their manifesto is even better.

So I’m going to put my money where my mouth is and switch back to Firefox for browsing. I’m not quite ready to switch for development yet – but the dev tools have made some great progress, and I’m expecting more to come.

I love Firefox and Mozilla because I know I can count on them do do what’s right for the web. And I don’t know if I can say that about any other browser.