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>

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.