vendredi 13 juillet 2018

Should I specify value type in my function? JavaScript/JQuery

I have read a lot about == vs === and seems that '===' is way to go (at least the more recommended) which also prevents some invalid values to be compared. So I have function like this:

$('#frm_filterby').on('change',changeAttr);
function changeAttr() {
    var elementVal = $(this).val();
    console.log(typeof elementVal) // outputs string
    switch(elementVal){
        case "1":
            $("#frm_search").attr({
                "type" : "text",
                "placeholder" : "Example: jcook56",
                "required" : true
            }).val("");
            break;
        case "2":
            $("#frm_search").attr({
                "type" : "email",
                "placeholder" : "example@gmail.com",
                "required" : true
            }).val("");
            break;
        case "3":
            $("#frm_search").attr({
                "type" : "number",
                "placeholder" : "Example: 103",
                "required" : true
            }).val("");
            break;
        default:
            $("#frm_search").attr({
                "type" : "text",
                "placeholder" : "Select Search Criteria",
                "required" : false
            }).val("");
    }
}

So function above uses switch statement to check which filter user selected and based on that will set the attributes in search input filed. So my question is should I use Number() or parseInt() and force elementValue to be numeric, also remove stings in case statements values and replace them with the numbers? Is that something that will change anything/prevent? Also I'm wondering if this same scenario is done with simple if/else statements where I would use equal would that be a good option? Example:

$('#frm_filterby').on('change',changeAttr); function changeAttr() { var elementVal = Number($(this).val()); console.log(typeof elementVal) // outputs number

    if(elementValue === 1)
            $("#frm_search").attr({
                "type" : "text",
                "placeholder" : "Example: jcook56",
                "required" : true
            }).val("");
            break;
    }else if(elementVal === 2){
            $("#frm_search").attr({
                "type" : "email",
                "placeholder" : "example@gmail.com",
                "required" : true
            }).val("");
            break;
    }else if(elementVal === 3){
            $("#frm_search").attr({
                "type" : "number",
                "placeholder" : "Example: 103",
                "required" : true
            }).val("");
            break;
    }else{
            $("#frm_search").attr({
                "type" : "text",
                "placeholder" : "Select Search Criteria",
                "required" : false
            }).val("");
    }
}

I read few articles and they recommended using === when comparing values so in my case element value comes in the function as a string. In that case I have to convert the value to be Numeric in order to use === for comparison. If anyone has any thoughts about this please let me know.

Aucun commentaire:

Enregistrer un commentaire