Sometimes it’s good to code defensively and put those extra checks "just in case".
This is especially true if your front end code are generated or rendered dynamically.
I have often encountered Javascript code that tries to access certain HTML element that doesn’t exists.
Usually this is caused by the following scenario:
Developer 1 creates the HTML display and Javascript accessing a certain HTML element on the display
Developer 2 comes along few months down the track to do a change request to remove that HTML element.
Developer 2 isn’t aware of that there is Javascript code associated with HTML element and he/she doesn’t
do proper testing or just ignore the Javascript warning.
Now of course there’s no excuse for Developer 2 to be more thorough – but Developer 1 can
also does his part better by programming more defensively.
The scenario above can be easily avoided. If you are using jQuery, you can check the existence of an element by using this simple
code:
if ( $('#myDiv').length ) $('#myDiv').show();
The code above is straight from the jQuery – Frequently Asked Questions page.
I sometimes use this sort of code myself, it works for me – but yeah this is before I found the jQuery FAQ page
if ( $( '#myDiv' ) != null ){ $('#myDiv').show();
I tend to do this nowadays especially for the code that I know other developers will muck around in the future.
A couple of comments:
1) If you’re going to reference $(’#myDiv’) more than once, you’ll want to cache the results:
var $div = $(’#myDiv’);
if ( $div.length ) $div.show();
While access an element by id is pretty efficient, there’s still overhead involved. However, when your selector is more complex (i.e. “#myDiv a.external”) then this becomes extremely important.
2) While I realize your example was simple, one thing to keep in mind is that the type of checks you’re using in this example are completely unneccesary.
If jQuery doesn’t find matches (i.e. there’s an empty set returned) then nothing in the chain will execute.
So if #myDiv does not exist, the 2 lines below will function exactly the same:
// the show() method won’t run because of the conditional statement
if ( $(’#myDiv’).length ) $(’#myDiv’).show();
// the show() method won’t run because the jQuery collection is empty
$(’#myDiv’).show();
There are definite times when you should be doing conditionally checking, but for simplier calls where you can perform everything you need to do in a single jQuery chain, then the conditional check is goin to add more processing and more code–which I try to avoid with client-side technology. Instead I use comments to explain my code.
Thanks for the tips Dan – I never considered things that you mentioned.
Dan, I found out before that if myDiv doesn’t exist on the page and jQuery tried to accessing it via $( #myDiv ) then the page will show a Javascript error and potentially other javascript codes on that page won’t work – that’s why I think sometimes there’s a need to manually checking before accessing the element.