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.

`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. — zerkms, Jan 06 '14 at 03:11
@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] — marimaf, Jan 06 '14 at 03:12
@marimaf: now you see why your comparison to random `undefined` values isn't true - because it is defined and stores an object. — zerkms, Jan 06 '14 at 03:13
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. — Guffa, Jan 06 '14 at 21:20

Guffa · Answer 1 · 2014-01-06T21:21:51.913

3

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")

edited Jan 06 '14 at 21:21

answered Jan 06 '14 at 03:13

Guffa

687,336
108
737
1,005

It still goes in with this solution – marimaf Jan 06 '14 at 03:17
1

@marimaf: then there is something else going on that you haven't told us about. – Qantas 94 Heavy Jan 06 '14 at 03:18
mm I'm receiving currentQuestion as a parameter in a function. Can that be the problem? I don't know what else – marimaf Jan 06 '14 at 03:19
currentQuestion gets updated with currentQuestion.next() – marimaf Jan 06 '14 at 03:29

score 1 · Answer 2 · edited May 23 '17 at 12:03

1

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.

edited May 23 '17 at 12:03

Community

1
1

answered Jan 06 '14 at 03:11

bozdoz

12,550
7
67
96

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

score 1 · Answer 3 · answered Jan 06 '14 at 03:11

1

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"));
}

answered Jan 06 '14 at 03:11

xdazz

158,678
38
247
274

Perhaps you don't have a data attribute on that selector @marimaf. Maybe what you can check is `if (currentQuestion.data('index'))` – bozdoz Jan 06 '14 at 03:16
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 – marimaf Jan 06 '14 at 03:20

score 1 · Answer 4 · answered Jan 06 '14 at 03:12

1

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.

answered Jan 06 '14 at 03:12

Damien Black

5,579
18
24

Which suggests it found a match. Try `console.log(currentQuestion)` to see what it matched. – jammykam Jan 06 '14 at 03:17
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] – marimaf Jan 06 '14 at 03:22
In Chrome, You should be able to expand that and jump to the matched element. I'm not sure [closest](http://api.jquery.com/closest/) on it's own is correct, I would also expect a [next](http://api.jquery.com/next/) selector, but without a jsFiddle of your html I doubt anyone else will be able to figure this out for you. – jammykam Jan 06 '14 at 03:49

score 0 · Answer 5 · answered Jan 06 '14 at 19:10

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.

Checking if undefined in jQuery/Javascript

5 Answers5