CODEWITHSUNDEEP
javascriptangularjseslint
LBaelish
LBaelish

Reputation: 699

Checking for undefined variable vs false variable

I'm using ESLint to check my javascript code and I found an warning for "Unexpected use of undefined"

The statement is 

if (data.items === undefined) {...}

Data.items is equal to a JSON object normally, but under some conditions it could just be undefined and I want to take a separate action if that is the case.

To get rid of this warning, is it appropriate to use

if (data.items === false) {...}

Are these two statements equivalent under these circumstances?

Upvotes: 6

Views: 7395

Answers (4)

rsp
rsp

Reputation: 111394

People often recommend doing this for checking the existence of a value:

if (typeof data.items === "undefined" || data.items === null)

It is worth noting that it is exactly the same as a perfectly valid:

if (data.items == null)

And the only reason that it is problematic are the linter rules created for beginners and imposed on everyone.

What the == null does is checking for null or undefined. Of course your linter will scream at you under the assumption that you cannot be trusted to understand the behavior of == and remember two values that the == null matches - namely null and undefined, the two most common values that you often compare your data with.

When the linters started complaining, we had to bloat our code by changing all:

if (x == null)

to:

if (x === null || x === undefined)

but apparently it wasn't verbose enough and now we have to write:

if (x === null || typeof x === 'undefined')

I'm sure that some day people will figure out that it is still too short and an even more correct way will get invented. Until then this is the currently blessed way to test for existence of a value.

By the way, I don't recommend using:

if (!x)

because it will match not only null and undefined but also false, 0 and the empty string. In fact I am surprised that the linters still allow this construct and haven't forced us to use this yet:

if (x === false || x === 0 || x === '' || x === null || typeof x === 'undefined')

I'm sure it's just a matter of time, though.

Upvotes: 2

Rajan
Rajan

Reputation: 85

Both are falsy values, but are not the same. In addition to what Felix Kling has mentioned, if you want to check the existence of a variable, I think a fairly safe way to do is how coffeescript does it:

if(typeof data.items === "undefined" || data.items === null)

Also, the way you are currently checking with undefined would try to equate it with an object called undefined. Now modern browsers have made this object immutable and set its initial value to primitive undefined, but I believe there was a time when it was mutable. In that case, if someone were to change the value of undefined (the object) your check would fail! :D

Upvotes: 0

Harris
Harris

Reputation: 1785

While if statements will evaluate the individual values (false, null, and undefined) as falsy, it doesn't hold them to be exactly the same. null and undefined can be == evaluated as true, but false is not equivalent, and even with null and undefined, === will return false.

TL;DR- No, they aren't equivalent.

Upvotes: 1

Felix Kling
Felix Kling

Reputation: 816700

No, they are not equivalent. For them to be equivalent, undefined === false would have to be true. However, === performs strict equality comparison, meaning that values of different data types are never equal. false is a value of the Boolean data type, undefined is the value of the Undefined data type. Hence undefined === true is false.

If you want to test for the value undefined explicitly without referencing undefined, you can use typeof:

if (typeof data.items === 'undefined')

If you want to test for the existence of the property items, you can use the in operator or .hasOwnPropery:

if (!data.hasOwnProperty('items'))
if (!('items' in data))

If know that the possible values of data.items are either undefined or an object, you can simply let JavaScript's type conversion work for you and use

if (!data.items)

If data.items is an object (including arrays) !data.items will be false. If it is undefined, it will be true.

Upvotes: 3

Related Questions