Javascript convert number string to Boolean

Question

I'm making this control toggle between hide and show base on the value in this hidden value. I wanted to use a Boolean because I can just do something like == true. Is this the best way to do this? Working sample

https://jsfiddle.net/tjmcdevitt/4bdrfgcu/12/

 $("#hdMeetingDateId").val(500);
 //"#hdMeetingDateId").val(0);
 console.log($("#hdMeetingDateId").val());
 let hasMeetingDateId = $("#hdMeetingDateId").val() > '1' ;
 
 if (hasMeetingDateId == true) {
 $("#displayButton").hide();
 } else {
 $("#displayButton").show();
 }

Answer 1

Teepeemm is correct. It is best to avoid implicit type coercions and use strict equality operators like === and !==. The problem with loose comparisons (e.g. ==, !=) is that it has so many weird rules one would need to memorize in order to be confident in its proper usage.

Speaking of type coercion - it would be better to compare the value to the number one as a Number instead of a String

let hasMeetingDateId = $("#hdMeetingDateId").val() > '1' ;

Since the less than and greater than operators will attempt to convert both operands to numbers¹ it would be simpler to just represent it as 1:

const hasMeetingDateId = $("#hdMeetingDateId").val() > 1 ;

And as was already mentioned jQuery's toggle() method can be used to simplify the conditionals. See this demonstrated in the snippet below. Note that the input was changed to an <input type="number">. Also the DOM ready callback was simplified because as of jQuery 3.0, only $(handler) is recommended; the other syntaxes still work but are deprecated.¹ . Also the code makes use of the ES6 feature arrow function expression.

$(_ => { //jquery DOM ready callback with arrow function
 $('#hdMeetingDateId').change(function() { //change event handler
 const hasMeetingDateId = $(this).val() > 1;
 $("#displayButton").toggle(!hasMeetingDateId);
 });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Sample</h1>
 <input type="range" name="hdMeetingDateId" id="hdMeetingDateId" value="4" min="0" max="5" />
<p>
 <button id="displayButton">Value Button</button>
</p>

• Jefferson: Thanks what if I wanted to hide it for true?
• Sᴀᴍ Onᴇᴌᴀ: Use the negated value: $("#displayButton").toggle(!hasMeetingDateId)

Answer 2

As a general programming guide, you should avoid == true, and just use if ( hasMeetingId ). (Things are even worse in Javascript, because == behaves strangely, eg, 1==true is true. You should use === instead of == whenever possible.)

With Javascript, you could have $("#displayButton")[hasMeetingDateId?"hide":"show"](), and it would collapse those five lines into one less comprehensible line.

But jQuery is a bit more helpful. Instead of hide and show, you can use toggle and end up with $("#displayButton").toggle(hasMeetingDateId).

You should also use const instead of let, if you can.

• Jefferson: What if I wanted to hide it for true?