jQuery prop() and Google Closure Compiler

Question

I'm using google closure compiler and I've been getting a warming that I don't understand. I need to test if a radio button is checked or not so I have the following code:

// ==ClosureCompiler==
// @output_file_name default.js
// @compilation_level ADVANCED_OPTIMIZATIONS
// @externs_url http://closure-compiler.googlecode.com/svn/trunk/contrib/externs/jquery-1.8.js
// ==/ClosureCompiler==

function test() {

  var TheBool = $('#SomeElement').prop('checked');

  if (TheBool === true) {
     alert('checked');
   }
}

I'm getting a warning that says that it's a condition that always evaluates to false, even though I know that's not the case.

You can try this out at http://closure-compiler.appspot.com/home and copy-paste the code as I have it (make sure to check "Optimization : Advanced")

How do I make this warning go away?

Answer 1

This seems to be a bug in the externs file provided by Google.

They incorrectly declare jQuery.prototype.prop as returning either a string or jQuery, and ignore the fact it can return a Boolean;

/**
 * @param {(string|Object.<string,*>)} arg1
 * @param {(string|number|boolean|function(number,String))=} arg2
 * @return {(string|!jQuery)}
 */
jQuery.prototype.prop = function(arg1, arg2) {};

... when it should be;

/**
 * @param {(string|Object.<string,*>)} arg1
 * @param {(string|number|boolean|function(number,String))=} arg2
 * @return {(string|boolean|!jQuery)}
 */
jQuery.prototype.prop = function(arg1, arg2) {};

I fixed this and uploaded it , and when using that declaration of externs, your problem is fixed;

// ==ClosureCompiler==
// @output_file_name default.js
// @compilation_level ADVANCED_OPTIMIZATIONS
// @externs_url http://files.mattlunn.me.uk/permanent/jquery-1.8.js
// ==/ClosureCompiler==

function test() {

  var TheBool = $('#SomeElement').prop('checked');

  if (TheBool === true) {
     alert('checked');
   }

}

You'll be able to bypass this by not checking directly for === true ; just if (TheBool) will be enough.

---

FWIW, this has been reported on their issues page, and a patch submitted.

Answer 2

prop returns a boolean value. So there's no need to check if it === true . Just use:

if (TheBool) {
    alert('checked');
}

To make it more understandable when reading, try:

var elementIsChecked = $('#SomeElement').prop('checked');
// `elementIsChecked` is either true or false

if (elementIsChecked) { // `elementIsChecked` is coerced into a boolean, but it already is, so it doesn't matter
    alert('checked');
}

and maybe you'll understand why it's not necessary in the first place.

Expressions used in if () are evaluated as true or false, whether or not their result is true or false. It just happens to be the prop actually does return true or false.