Develop Reference

Javascript using if(foo) exists to check if variable is set

I realize that this question is extremely similar to many others, but I must be missing some nuance with checking whether a variable is set or not. I have seen this in other developers code:
if(foo){
doSomething(foo);
}
else{
alert('error of whatever');
}
With the intent that the doSomething() will only execute if foo is set or not undefined. However, when I google this, it seems everyone says "typeof" should be used instead of the above method. I specifically see this in use with angular, like this:
if($scope.property){
dothis();
}
Am I missing something? When I see the above code, it seems to work, but all the answers I see never say this is the correct way to check if something is set or exists.

For if() checks, in MOST scenarios where you are checking for the existence of a property on an object (your situation), what you have described is perfectly valid, easy and convenient. It checks for the existence of the property and returns true if it exists.
However, there are plenty of nuanced areas where a typeof check is "more" correct, particularly if your type is being coerced in any way via == or if you want to differentiate between null and undefined.
For instance, if null is a valid value for your property to have but undefined is not, in your example dothis() would still be called. You would prevent this with a typeof check.
if (typeof $scope.property === 'undefined') {
dothis();
}
Finally, if you are checking for the existence of a variable instead of the existence of a property, an exception will be thrown if the variable you are checking is not defined, forcing you to use a typeof check.
In those scenarios, verbosity is your friend.

This has to do with the concept of "truthiness". Any value besides false, 0, "", null, undefined, and NaN is "truthy" which means the first block of the if-statement will run. For instance:
if ("") {
alert("falsie"); // won't run because the empty string ("") is falsie
} else {
alert("truthie"); // will run
}
whereas
if ("something") {
alert("truthy"); // will run because "something" is truthy
} else {
alert("falsie"); // won't run
}
Going back to your example, if foo is truthy (meaning that it has ANY value other than false, 0, "", null, undefined, and NaN) then it will run the first block of the if-statement (which has the doSomething() function in it).

You could also use short circuit evaluation and do this in one line.
($scope.property && doThis())

It is better to use typeof if you need to explicitly check whether the value is undefined or not. If you just want to check if the value is truthy, then you don't need typeof.

The reason the typeof operator is preferred is because it doesn't throw a ReferenceError exception when used with an undeclared variable.
However, it is important to note that variables initialized as null will return "object", so to avoid this issue, the following code is recommended:
if (typeof variable === 'undefined' || variable === null) {
// variable is undefined or null
}

What you are checking this way is if foo is not:
false
Undefined
Null
+0, −0, or NaN
Empty String
More info here:
https://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/
This way your function is only executed if foo is valid.
You may want to be more specific and check against a certain type with typeof.
var foo = 'foo';
if (typeof foo === 'string') { // true
doSomething();
}
The typeof operator returns a string indicating the type of the
unevaluated operand.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof

Best practice of checking if variable is undefined

I was having some issues in my conditions concerning undefined variables. What is, to sum it up, the best way to check if a variable is undefined?
I was mainly struggling with
x === undefined
and
typeof x === 'undefined'

You can use both ways to check if the value is undefined. However, there are little nuances you need to be aware of.
The first approach uses strict comparison === operator to compare against undefined type:
var x;
// ...
x === undefined; // true
This will work as expected only if the variable is declared but not defined, i.e. has undefined value, meaning that you have var x somewhere in your code, but the it has never been assigned a value. So it's undefined by definition.
But if variable is not declared with var keyword above code will throw reference error:
x === undefined // ReferenceError: x is not defined
In situations like these, typeof comparison is more reliable:
typeof x == 'undefined' // true
which will work properly in both cases: if variable has never been assigned a value, and if its value is actually undefined.

I guess both, depending on what you're testing? If it's a property, I'd always use x === undefined, since it's clearer (and it seems faster).
As others said, x === undefined won't work if x is not declared. Personally, I find that an even better reason to use it, since normally I shouldn't be checking if a variable is declared at all — it would usually be a sign of a coding mistake.
I've seen a lot of the other version for testing arguments — f = function(x) {if (typeof x == 'undefined') …} — if I'm code-reviewing code like this I'll tell them to change it. We know for a fact the variable is declared, and making an habit of writing it that way increases the chance you'll waste time chasing typo bugs.
The main exception is when you're trying to check if a component or library was loaded or initialized correctly. if (typeof jQuery == 'undefined') … makes sense. But in the medium term, all this should become modules anyway, in which case the typeof test should in my opinion be phased out as harmful.
(Also, personally, I prefer if (window.jQuery === undefined) for that case too. It's not portable for isomorphic code, though.)

x === undefined
does not work if variable is not declared. This returns true only if variable is declared but not defined.
Better to use
typeof x === 'undefined'

You could use any of them.
If you would like to check if a variable is undefined or null you could use:
x == null
This results in true if x is undefined or null.

In Javascript, is myObject == null a valid way to handle checking for undefined as well?

In Javascript, is myObject == null a valid way to handle checking for undefined as well as null?
JSLint would prefer that I do (myObject === undefined || myObject === null)
What Would Doug Crockford Do? (WWDCD)

Yes, that's a nice way to check for both. The language specification states (regarding == for comparing values of different types):
2) If x is null and y is undefined, return true.
3) If x is undefined and y is null, return true.
Here x and y are the terms of a comparison x == y. When you're comparing x == null, it will only be true if x is undefined, or null itself.
Just to be clear, when we say "undefined" here we mean the value undefined, not variables that are not defined (those produce a ReferenceError whenever they're used, except with typeof).
And regarding WWDCD, I'll quote Ian: Crockford would suggest what JSLint suggests (obviously) because == is voodoo to him. That means "use ===, never ==". So this would be a non-question for him.

Is myObject == null a valid way to handle checking for undefined as well as null?
Yes. As defined by the specification, null and undefined are the only two values that equal null.
JSLint would prefer that I do (myObject === undefined || myObject === null)
Then it doesn't understand your intention. It's not the first time. Or it (and its creator Crockford) want you to write explicit code, to be correctly understood by everyone who doesn't know all of Javascript's internals.

Running this code:
<html>
<head>
<script type="text/javascript">
function test() {
var variable = undefined;
if (typeof variable === 'undefined') console.log("variable is undefined");
if (variable == null) {
console.log("variable is null");
} else {
console.log("variable is not null");
}
}
</script>
</head>
<body onLoad="test()">
</body>
Returned the output
variable is undefined
variable is null
So... it seems to work. But I also seem to remember something odd about null vs undefined. Or maybe that was in another language-they start to blur together after a while.
Regardless, the answer that #collapsar gave is probably the cleanest way to do it as it checks for all cases.

localStorage alerts undefined but if undefined is false

Can not quite understand the reasoning for this. In the following code the localStorage of an item is alerted as undefined, but if I use an if(x==undefined) syntax it does not work. Can somebody explain what is the problem. Thank you.
alert(localStorage["x"]);
if(localStorage["x"]=="undefined"){alert("y");}
The top line alerts undefined
The bottom line does not alert y for me.

It doesn't contain the string "undefined", it contains a value of the type undefined:
if (localStorage["x"] == undefined) { alert("y"); }
The value undefined is possible to change in older browsers, so good practice is to check the type instead:
if (typeof localStorage["x"] == 'undefined') { alert("y"); }

Try:
if(typeof( localStorage["x"]) == 'undefined'){alert("y");}
OR
if( localStorage["x"] == undefined){alert("y");}
OR
if( !localStorage["x"] ){alert("y");}

The two ways of checking for something being undefined are:
typeof foo === "undefined"
and
foo === undefined
In the first case, it will be true if foo was never defined or the value of foo is undefined.
In the second case, it will only be true if foo was defined (otherwise it'll break) and its value is undefined.
Checking its value against the string "undefined" is not the same at all!
UPDATE:
When I said that if you try to perform an operation on an object literal's property that isn't defined, I guess I meant if it's undefined at all, and what I meant was something more like this:
obj["x"].toLowerCase()
// or
obj["x"]["y"]
where you are attempting to access/operate on something that is originally undefined. In this case, simply comparing in an if statement should be fine, because of the way object literals report the value...but is very different with normal Javascript variables.
With object literals, if a key (say "x") is not defined, then
obj["x"]
returns a value of undefined, so both the typeof and basic === undefined checks will work and be true.
The whole difference of not being defined or having a value of undefined is different with normal variables.
If you had:
var a;
// or
var a = undefined;
then both the typeof and basic === undefined checks I provided earlier would work and be true. But if you never even declared a, then only the typeof check would work and be true. The === undefined check would break.
Take a look at: http://jsfiddle.net/7npJx/
If you notice in the console, it says b is not defined and breaks the if statement.
Since you're basically looking at an object literal with localStorage, the way to distinguish whether an item is not defined or has a value of undefined is to use in first. So, you could use:
if (!("x" in localStorage)) {
to check if "x" is not a defined property at all, and:
else if (localStorage["x"] === undefined) {
to then check if it is defined but has a value of undefined. Then, using:
else {
would signify that localStorage["x"] is both defined and does not have the value undefined.
In your code though, it's okay to use the typeof or in checks (based on what you want to know) because of the way object literals report properties that aren't defined. Using the basic === undefined is also okay, but as Guffa pointed out, it's possible for the actual value of undefined to be overwritten and then wouldn't work in this comparison. When it comes to normal Javascript variables, typeof and === undefined checks aren't the same.

variable === undefined vs. typeof variable === "undefined"

The jQuery Core Style Guidelines suggest two different ways to check whether a variable is defined.
Global Variables: typeof variable === "undefined"
Local Variables: variable === undefined
Properties: object.prop === undefined
Why does jQuery use one approach for global variables and another for locals and properties?

For undeclared variables, typeof foo will return the string literal "undefined", whereas the identity check foo === undefined would trigger the error "foo is not defined".
For local variables (which you know are declared somewhere), no such error would occur, hence the identity check.

I'd stick to using typeof foo === "undefined" everywhere. That can never go wrong.
I imagine the reason why jQuery recommends the two different methods is that they define their own undefined variable within the function that jQuery code lives in, so within that function undefined is safe from tampering from outside. I would also imagine that someone somewhere has benchmarked the two different approaches and discovered that foo === undefined is faster and therefore decided it's the way to go. [UPDATE: as noted in the comments, the comparison with undefined is also slightly shorter, which could be a consideration.] However, the gain in practical situations will be utterly insignificant: this check will never, ever be any kind of bottleneck, and what you lose is significant: evaluating a property of a host object for comparison can throw an error whereas a typeof check never will.
For example, the following is used in IE for parsing XML:
var x = new ActiveXObject("Microsoft.XMLDOM");
To check whether it has a loadXML method safely:
typeof x.loadXML === "undefined"; // Returns false
On the other hand:
x.loadXML === undefined; // Throws an error
UPDATE
Another advantage of the typeof check that I forgot to mention was that it also works with undeclared variables, which the foo === undefined check does not, and in fact throws a ReferenceError. Thanks to #LinusKleen for reminding me. For example:
typeof someUndeclaredVariable; // "undefined"
someUndeclaredVariable === undefined; // throws a ReferenceError
Bottom line: always use the typeof check.

Yet another reason for using the typeof-variant: undefined can be redefined.
undefined = "foo";
var variable = "foo";
if (variable === undefined)
console.log("eh, what?!");
The result of typeof variable cannot.
Update: note that this is not the case in ES5 there the global undefined is a non-configurable, non-writable property:
15.1.1 Value Properties of the Global Object
[...]
15.1.1.3 undefined
The value of undefined is undefined (see 8.1). This property has the attributes
{ [[Writable]]: false, [[Enumerable]]: false, [[Configurable]]: false }.
But it still can be shadowed by a local variable:
(function() {
var undefined = "foo";
var variable = "foo";
if (variable === undefined)
console.log("eh, what?!");
})()
or parameter:
(function(undefined) {
var variable = "foo";
if (variable === undefined)
console.log("eh, what?!");
})("foo")

Who is interested in the performance gain of variable === undefined, may take a look here, but it seems to be a chrome optimization only.
http://jsperf.com/type-of-undefined-vs-undefined/30
http://jsperf.com/type-of-undefined-vs-undefined

Because undefined is not always declared, but jQuery declares undefined in its main function. So they use the safe undefined value internally, but outside, they use the typeof style to be safe.

For local variables, checking with localVar === undefined will work because they must have been defined somewhere within the local scope or they will not be considered local.
For variables which are not local and not defined anywhere, the check someVar === undefined will throw exception: Uncaught ReferenceError: j is not defined
Here is some code which will clarify what I am saying above. Please pay attention to inline comments for further clarity.
function f (x) {
if (x === undefined) console.log('x is undefined [x === undefined].');
else console.log('x is not undefined [x === undefined.]');
if (typeof(x) === 'undefined') console.log('x is undefined [typeof(x) === \'undefined\'].');
else console.log('x is not undefined [typeof(x) === \'undefined\'].');
// This will throw exception because what the hell is j? It is nowhere to be found.
try
{
if (j === undefined) console.log('j is undefined [j === undefined].');
else console.log('j is not undefined [j === undefined].');
}
catch(e){console.log('Error!!! Cannot use [j === undefined] because j is nowhere to be found in our source code.');}
// However this will not throw exception
if (typeof j === 'undefined') console.log('j is undefined (typeof(x) === \'undefined\'). We can use this check even though j is nowhere to be found in our source code and it will not throw.');
else console.log('j is not undefined [typeof(x) === \'undefined\'].');
};
If we call the above code like this:
f();
The output would be this:
x is undefined [x === undefined].
x is undefined [typeof(x) === 'undefined'].
Error!!! Cannot use [j === undefined] because j is nowhere to be found in our source code.
j is undefined (typeof(x) === 'undefined'). We can use this check even though j is nowhere to be found in our source code and it will not throw.
If we call the above code like these (with any value actually):
f(null);
f(1);
The output will be:
x is not undefined [x === undefined].
x is not undefined [typeof(x) === 'undefined'].
Error!!! Cannot use [j === undefined] because j is nowhere to be found in our source code.
j is undefined (typeof(x) === 'undefined'). We can use this check even though j is nowhere to be found in our source code and it will not throw.
When you do the check like this: typeof x === 'undefined', you are essentially asking this: Please check if the variable x exists (has been defined) somewhere in the source code. (more or less). If you know C# or Java, this type of check is never done because if it does not exist, it will not compile.
<== Fiddle Me ==>

Summary:
When at global scope we actually want to return true if the variable is not declared or has the value undefined:
var globalVar1;
// This variable is declared, but not defined and thus has the value undefined
console.log(globalVar1 === undefined);
// This variable is not declared and thus will throw a referenceError
console.log(globalVar2 === undefined);
Because in global scope we are not 100% sure if a variable is declared this might give us a referenceError. When we use the typeof operator on the unknown variable we are not getting this issue when the variable is not declared:
var globalVar1;
console.log(typeof globalVar1 === 'undefined');
console.log(typeof globalVar2 === 'undefined');
This is due to the fact that the typeof operator returns the string undefined when a variable is not declared or currently hold the value undefined which is exactly what we want.
With local variables we don't have this problem because we know beforehand that this variable will exist. We can simply look in the respective function if the variable is present.
With object properties we don't have this problem because when we try to lookup an object property which does not exist we also get the value undefined
var obj = {};
console.log(obj.myProp === undefined);

jQuery probably expects you to be using let and const variables in functions going forward, which in JavaScript's ES6 2015 design do NOT allow you to use any local scope (function) let or const variables until they are declared. Even hoisting by Javascript does not allow you to even type-check them!
If you try and do that, JavaScript generates an error, unlike with var variables which when hoisted creates a declared but uninitialized variable you can type check or check to see if its undefined.
If you declare a let or const variable in a function, but AFTER trying to access it, typeof checks still create a Reference Error in JavaScript! Its very odd behavior, and illogical to me why it was designed that way. But that is why jQuery likely sees no use for typeof function variable use. Example:
function MyError(){
// WOW! This variable DOES NOT EVEN EXIST, but you can still check its type!
if(typeof x === 'undefined')
{
alert(1);// OK!
}
// ERROR!
// WOW! You cannot even check an existing "let" variable's TYPE in a local function!
if(typeof y === 'undefined')//REFERENCE ERROR!!
{
alert(2);
}
// We defined the variable so its hoisted to the top but in a dead zone
let y = 'test';
}
MyError();
// RESULT
// alert 1 fires but a REFERENCE ERROR is generated from the second alert 2 condition.
It is odd above how a non-existing local variable cant be checked using typeof for 'undefined', but a declared let variable in the function cannot! So this is likely why I would not depend on jQuery to define what is best. There are edge cases.
More Weirdness on "undefined" variables in JavaScript
**undefined has two different expressions, and three different uses, as follows:
"typeof" and "undefined" types : Variables that are not declared and do not exist are not assigned anything, but have a "type" of undefined. If you access a variable that does NOT even exist, much less declared or initialized, you will generate a REFERENCE ERROR if you access it, even when testing for the primitive default value of undefined which is assigned to declared variables until assigned a value. So checking the "typeof" prevents this error in this one case as follows:
// In this first test, the variable "myVariable1" does not exist yet so creates
// an error if we try and check if its assigned the default value of undefined!
if (myVariable1 === undefined) alert(true);// REFERENCE ERROR!
// Here we can elegantly catch the "undefined" type
// of the missing variable and stop the REFERENCE ERROR using "typeof".
if (typeof myVariable1 === "undefined") alert(true);// true
// Here we have declared the missing variable and notice its
// still an "undefined" type until initialized with a value.
let myVariable1;
if (typeof myVariable1 === "undefined") alert(true);// true
// Lastly, after we assign a value, the type is no longer
// "undefined" so returns false.
myVariable1 = 'hello';
if (typeof myVariable1 === "undefined") alert(true);// false
All objects and types in JavaScript that are accessed but not declared will default to a type of "undefined". So, the lesson here is try and check for the typeof first, to prevent missing variable errors!
undefined primitive values : All declared variables not yet assigned a value are assigned in JavaScript the primitve of undefined. If you have declared a variable, but not initialized it yet, its assigned this default primitive type of undefined. That is not same as an "undefined" type. The primitive value of undefined is a reserved value but can be altered, but that's not what is asked here. Notice this catches all declared but uninitialized variables only:
let myVariable3;
if (myVariable3 === undefined) alert(true);// true
let myVariable4 = 'hello';
if (myVariable4 === undefined) alert(true);// false
Objects and undefined primitives : Lastly, Object properties do NOT behave like variables in JavaScript. Object properties, when missing do not become undefined types, but are simply assigned the primitive undefined as above for undeclared variables. So they act like #2:
let myObject = {};
if (myObject.myProperty === undefined) alert(true);// true
BEST PRACTICE
Lastly....this is a VERY GOOD REASON to always check for BOTH the "undefined" type and the undefined primitive value on variables in all your JavaScript code. Most will say, you will rarely need both. There may come a day when a missing variable is accessed in a library that does not exist and creates a nasty JavaScript REFERENCE ERROR! So I always do this check, and in this order, to stop all errors in JavaScript:
if (typeof myVariable !== "undefined" && myVariable !== undefined) {
// do something safe with myVariable!
}

typeof a === 'undefined' is faster then a === 'undefined' by about 2 times on node v6.9.1.