Checking if undefined in jQuery/Javascript

Question

I have the following:

var currentQuestion = $(this).closest(".question")

I have tried everything suggested in this, this and this question:

if(currentQuestion !== undefined)
if(currentQuestion !== "undefined")
if(typeof currentQuestion !== undefined)
if(typeof currentQuestion !== "undefined")
if(currentQuestion !== null)
if(currentQuestion != undefined)
if(currentQuestion != "undefined")
if(currentQuestion.data("index") !== null)
if(currentQuestion.data("index") !== undefined)
if(typeof currentQuestion.data("index") !== undefined)

But it keeps going inside the if statement...

I have this inside the if:

console.log("nextQ: " + currentQuestion.data("index"));

and nextQ: undefined is getting print out

any other ideas?

EDIT:

currentQuestion.data("index") != null

worked out. If you check all the options I tried before, the one similar to this one had this comparison element: !== and not !=. That change made the difference. If someone can explain why, I'll grant him/her the correct answer.

• jammykam: Did you try length?
• zerkms: console.log(currentQuestion.data("index"), currentQuestion); PS: just a side note: real computer science engineers don't make random things and expect them to work.
• marimaf: @zerkms i get the following: undefined [div.send-button, prevObject: b.fn.b.init[1], context: button.next, jquery: "1.9.1", constructor: function, init: function...] 0: div.send-button context: button.next length: 1 prevObject: b.fn.b.init[1] proto: Object[0]
• zerkms: @marimaf: now you see why your comparison to random undefined values isn't true - because it is defined and stores an object.
• Guffa: The reason that !== null doesn't work but != null does, is that the value returned is not null. When there is no data associated with the element, the data method returns undefined. Comparing that to null using the !== operator will give true, as null and undefined is not the same type. Comparing them using the != operator will give false as they are converted to a type that can be compared value to value, and the conversion will make them end up as the same value. To check if there is no data associated with the element, check the type that the data method returns.

Answer 1

The result will never be undefined, it's always a jQuery object. If the operation didn't find any elements, the jQuery object will be empty, so you check how many element there are in it to see if found anything:

if (currentQuestion.length > 0)

---

After you have checked that there is actually any element in the jQuery object, you can check if there is any data associated to the element.

If no data is associated with an element, the data method will return undefined when you try to read the value. So, to check if there is no data, you should check the type of the value that the data method returns:

if (typeof currentQuestion.data("index") != "undefined")

• marimaf: It still goes in with this solution
• Qantas 94 Heavy: @marimaf: then there is something else going on that you haven't told us about.
• marimaf: mm I'm receiving currentQuestion as a parameter in a function. Can that be the problem? I don't know what else
• marimaf: currentQuestion gets updated with currentQuestion.next()

Answer 2

If you want to check any elements exist, then check the length.

var currentQuestion = $(this).closest(".question");
if (currentQuestion.length > 0) {
 console.log("nextQ: " + currentQuestion.data("index"));
}

• bozdoz: Perhaps you don't have a data attribute on that selector @marimaf. Maybe what you can check is if (currentQuestion.data('index'))
• marimaf: I have the data attribute. My code is moving from one question to the other in the same document and I need to know when there are no more questions to show. I am getting nextQ: 1, nextQ: 2, etc before the undefined

Answer 3

if (currentQuestion.length) {

Should work fine. If it goes in there, it found something. And instead of looking at the if statement you need to look at your html and see what it found.

• jammykam: Which suggests it found a match. Try console.log(currentQuestion) to see what it matched.
• marimaf: I get this printed out: [div.send-button, prevObject: b.fn.b.init[1], context: button.next, jquery: "1.9.1", constructor: function, init: function...] 0: div.send-button context: button.next length: 1 prevObject: b.fn.b.init[1] proto: Object[0]
• jammykam: In Chrome, You should be able to expand that and jump to the matched element. I'm not sure closest on it's own is correct, I would also expect a next selector, but without a jsFiddle of your html I doubt anyone else will be able to figure this out for you.

Answer 4

What you want is currentQuestion.length.

jQuery selectors return an array of elements matching the selector. To test for values in an array, you should use length:

Boolean([].length); //false

Because 0 evaluates to false, you can just use if (currentQuestion.length).

If you're trying to check for it when it is false, use !:

if (!currentQuestion.length)

For your question of why != worked but not !==, I would suggest this question: Difference between == and === in JavaScript

Basically, currentQuestion.data('index') is not strictly equal to null, but it could evaluate to null: same as [] == 0 evaluates to true, but [] === 0 evaluates to false.

• marimaf: I get length of 1... I tried currentQuestion.data("index").length but then I get an error I cannot call length of undefined...
• bozdoz: Because the element exists but it doesn't have the data attribute. @marimaf Either check for currentQuestion.length or currentQuestion.data('index')
• bozdoz: I read in a comment that you might be returning an object? If that's true you could do typeof(currentQuestion.data('index')) !== 'undefined'
• marimaf: This worked after all: currentQuestion.data("index") != null what I tried before was !== instead of !=. Thanks for your help!

Answer 5

It is probably not the most elegant solution. But somehow

currentQuestion.data("index") != null

worked out. If you check all the options I tried before, the most similar to this one had this comparison element: !== and not !=. That change made the difference. If someone can explain why, I'll grant him/her the correct answer.