Question

I have a ajax form that populates select lists with values based on the previous selected select list item. This form is used in 3 different views with each view adding an extra select list. I have written some basic validation code that keeps the form process in sync and doesn’t confuse the user.

I have written one function that handles all 3 forms in an external script file.

My Question:
Is it acceptable or is there anything I need to worry about if some of my variables are undefined based on the form and view?

Here is some sample code that illustrates my question:
Note: These are not the actual names of my variables.

    (function ($){
    var objects = {sl1:$('#SelectList1'),sl2:$('#SelectList2'),sl3:$('#SelectList3'),lbl1:$('#Label1'),lbl2:$('#Label2'),lbl3:$('#Label3')};
    objects.sl1.change(function(){
    mapValues();
    }
    function mapValues(){
    objects.lbl1.text(objects.sl1.val());
    objects.lbl2.text(objects.sl2.val());
    objects.lbl3.text(objects.sl3.val());//What if this select list is undefined for View1?
}
    })(jQuery);

To summarize, View #1 has SelectList1 & SelectList2. View #2 has all 3. Is there a performance issue or is it bad practice to call a function where some of the variables are undefined?

Thanks.

Answer 1

This is more of a jQuery issue, not a JS one. jQuery simply does nothing (it does not even fail!) if you execute a method such as .text() or .val() on an empty result from a selector. For the performance issue, test it yourself. If the element is not found, I expect the performance to be a little better compared to when an element exists.

So, it’s valid to use such code.

Note that you’re mixing up “undefined variables” with “non-available elements” which are totally different matters. Using undefined variables is strongly discouraged and often lead to unexpected behavior.