JavaScript – Understanding the +!! Operator in an If Statement

javascript

I was reviewing the code for an angularjs factory to better understand how it works. The code contains an if statement that I don't fully understand.

In a plnkr demo the author wrote this:

if ((+!!config.template) + (+!!config.templateUrl) !== 1) {
  throw new Error('Expected modal to have exactly one of either `template` or `templateUrl`');
}

It is slightly different in the github repo:

if (!(!config.template ^ !config.templateUrl)) {
  throw new Error('Expected modal to have exactly one of either `template` or `templateUrl`');
}

Obviously by the error message it is checking to see if one of the two exists. I'm just not sure how it comes to the conclusion. I have not been able to find any information on ^ or +!

My question is: How does this if statement work? (^ or +! or +!! specifically)

Best Answer

!! converts a value to a boolean (true or false). + then converts that boolean to a number, either 1 for true or 0 for false.

> +true
1
> +false
0

Personally I find it clearer to write something like this, when dealing with two booleans:

if (!config.template == !config.templateUrl) {
  throw ...
}

Code clarity and readability be damned, apparently.

Related Solutions

JavaScript – Meaning of ‘!’ Operator with Non-Boolean Variables

Any falsy value will satisfy the if(!insert_variable_here) condition, including:

false
null
undefined
The empty string ''
The number 0
NaN

If callback return evaluates any of those values, the condition will be satisfied.

Even though null != false, the following will give you an alert:

x = null;
if(!x) {
    alert('"!null" does evaluate to true');
}

Regardless of whether or not null != false makes sense to you or anyone else, the point is that in JavaScript null is a falsy value, and thus a value that would satisfy the condition in my first bit of code listed above. This, it seems, is the question you have asked--not, rather, if null should or should not == false.

JavaScript Operators – Understanding the ! Operator

! does what you think: turns true to false and vice-versa. The weird behavior has to do with how Javascript can convert literally anything to true or false.

http://11heavens.com/falsy-and-truthy-in-javascript

Like in C (only worse) all values can be promoted to true or false. The googlable terms you want are "truthy" and "falsy," or "truthiness" and "falsiness." Truthy means something converts to true, falsy means something converts to false. All values are truthy except null, undefined, 0, "", NaN, and... false

This link has more fun examples:

http://www.sitepoint.com/javascript-truthy-falsy/

And this site really likes doing pathological things with the funny behavior here:

http://wtfjs.com

Also note that == really tries hard to make things comparable whereas === just returns false if the things aren't comparable. Crockford in Javascript: The Good Parts recommends not using == entirely.

Best Answer

Related Solutions

JavaScript – Meaning of ‘!’ Operator with Non-Boolean Variables

JavaScript Operators – Understanding the ! Operator

Related Question