4

The jQuery version that we are using is 1.10.2.

On a particular screen we are getting a DOM element using jQuery and try to get its offset() object. Sometimes the object might not be displayed and, according to the jQuery documentation, when this is the case offset() is not supported.

This is all fine but, what's really making my head spin is why if I try to check if the offset() object is different than undefined the code always goes inside the condition?

My code (simplified because of non-disclosure agreements) is like follows:

var isCurrent = $('.detail-current[value=\'true\']:first');
if (isCurrent != 'undefined') {
   var button = isCurrent.closest('.batch-item').find('.batch-item-top').find('input[name=\'edit\']');

   var myOffsetTop = 0;
   if(button.offset() != 'undefined')
      myOffsetTop = button.offset().top;

   $('html, body').animate({
      scrollTop: myOffsetTop - 50
   });
}

When I debug this using IE development tools I see on the console that button.offset() is undefined but button.offset() != undefined returns true!!

Does anybody know why this happens and how we could best handle it?

Thank you.

4
  • Why not test that button.length is a truthy (non-falsy value) instead? If it exists it should have an offset() other than undefined. Commented Jul 9, 2013 at 20:01
  • try console.log. btw its (typeof button.offset() !== 'undefined') Commented Jul 9, 2013 at 20:02
  • undefined evaluates to false in javascript, so you could just do if(button.offset()) without comparing it to anything if you want.
    – taldonn
    Commented Jul 9, 2013 at 20:02
  • 1
    The way you are writing it, it would be (button.offset() !== undefined) without the quotes Commented Jul 9, 2013 at 20:06

3 Answers 3

10

You are checking if it is a string called undefined, not whether it is actually undefined or not.

if (typeof something === "undefined") 
  alert("something is undefined");

To check whether it is NULL or not, use if (null === something)

11
  • 1
    Shouldn't use typeof like this to test for undefined. It causes too many bugs, like that in the question.
    – user2437417
    Commented Jul 9, 2013 at 20:17
  • 1
    What bug? The one in the question. It's a guard that causes more code problems than the problem it's supposed to solve. Better is to simply make sure the global undefined is never redefined, which is impossible in modern browsers anyway.
    – user2437417
    Commented Jul 9, 2013 at 20:20
  • 1
    It also always seems a bit hacky to be comparing type names as strings. The whole point of the undefined keyword is so you don't have to do that.
    – jcsanyi
    Commented Jul 9, 2013 at 20:29
  • 2
    @jcsanyi No problem to check it against string "undefined", simply undefined may cause bug. read here Commented Jul 9, 2013 at 20:39
  • 1
    @GrijeshChauhan: The point is that the $ function doesn't return undefined, so the condition will always pass. jcsanyi's solution to test the .length is correct.
    – user2437417
    Commented Jul 9, 2013 at 20:54
5

You need to check against the keyword undefined, not the string "undefined".

A check for undefined should look like this:

if (someVar !== undefined)

However - if jQuery doesn't find something - it does not return undefined. It returns a jQuery object representing an empty set.

Because of that, your first check should use the .length property, like this:

if (isCurrent.length > 0)

offset(), on the other hand does return undefined if there's nothing defined - so your second check should look like this:

if (button.offset() !== undefined)
0

You're not testing for undefined, it should be

if(typeof button.offset() !== 'undefined')

Not the answer you're looking for? Browse other questions tagged or ask your own question.