Javascript Check If Variable Exists (Is Defined/Initialized)
Which Method of Checking If a Variable Has Been Initialized Is Better/Correct? (Assuming the Variable Could Hold Anything (String, Int, Object, Function...
Which method of checking if a variable has been initialized is better/correct? (Assuming the variable could hold anything (string, int, object, function, etc.))
if (elem) { // or !elem
or
if (typeof elem !== 'undefined') {
or
if (elem != null) {
31 Answers
You want the typeof operator. Specifically:
if (typeof variable !== 'undefined') {
// the variable is defined
}
The typeof operator will check if the variable is really undefined.
if (typeof variable === 'undefined') {
// variable is undefined
}
The typeof operator, unlike the other operators, doesn't throw a ReferenceError exception when used with an undeclared variable.
However, do note that typeof null will return "object". We have to be careful to avoid the mistake of initializing a variable to null. To be safe, this is what we could use instead:
if (typeof variable === 'undefined' || variable === null) {
// variable is undefined or null
}
For more info on using strict comparison === instead of simple equality ==, see:
Which equals operator (== vs ===) should be used in JavaScript comparisons?
In many cases, using:
if (elem) { // or !elem
will do the job for you!... this will check these below cases:
- undefined: if the value is not defined and it's
undefined - null: if it's null, for example, if a DOM element not exists...
- empty string:
'' - 0: number zero
- NaN: not a number
- false
So it will cover off kind of all cases, but there are always weird cases which we'd like to cover as well, for example, a string with spaces, like this ' ' one, this will be defined in javascript as it has spaces inside string... for example in this case you add one more check using trim(), like:
if(elem) {
if(typeof elem === 'string' && elem.trim()) {
///
Also, these checks are for values only, as objects and arrays work differently in Javascript, empty array [] and empty object {} are always true.
I create the image below to show a quick brief of the answer:
In JavaScript, a variable can be defined, but hold the value undefined, so the most common answer is not technically correct, and instead performs the following:
if (typeof v === "undefined") {
// no variable "v" is defined in the current scope
// *or* some variable v exists and has been assigned the value undefined
} else {
// some variable (global or local) "v" is defined in the current scope
// *and* it contains a value other than undefined
}
That may suffice for your purposes. The following test has simpler semantics, which makes it easier to precisely describe your code's behavior and understand it yourself (if you care about such things):
if ("v" in window) {
// global variable v is defined
} else {
// global variable v is not defined
}
This, of course, assumes you are running in a browser (where window is a name for the global object). But if you're mucking around with globals like this you're probably in a browser. Subjectively, using 'name' in window is stylistically consistent with using window.name to refer to globals. Accessing globals as properties of window rather than as variables allows you to minimize the number of undeclared variables you reference in your code (for the benefit of linting), and avoids the possibility of your global being shadowed by a local variable. Also, if globals make your skin crawl you might feel more comfortable touching them only with this relatively long stick.
In the majority of cases you would use:
elem != null
Unlike a simple if (elem), it allows 0, false, NaN and '', but rejects null or undefined, making it a good, general test for the presence of an argument, or property of an object.
The other checks are not incorrect either, they just have different uses:
if (elem): can be used ifelemis guaranteed to be an object, or iffalse,0, etc. are considered "default" values (hence equivalent toundefinedornull).typeof elem == 'undefined'can be used in cases where a specifiednullhas a distinct meaning to an uninitialised variable or property.- This is the only check that won't throw an error if
elemis not declared (i.e. novarstatement, not a property ofwindow, or not a function argument). This is, in my opinion, rather dangerous as it allows typos to slip by unnoticed. To avoid this, see the below method.
- This is the only check that won't throw an error if
Also useful is a strict comparison against undefined:
if (elem === undefined) ...
However, because the global undefined can be overridden with another value, it is best to declare the variable undefined in the current scope before using it:
var undefined; // really undefined
if (elem === undefined) ...
Or:
(function (undefined) {
if (elem === undefined) ...
})();
A secondary advantage of this method is that JS minifiers can reduce the undefined variable to a single character, saving you a few bytes every time.
Check if window.hasOwnProperty("varname")
An alternative to the plethora of typeof answers;
Global variables declared with a var varname = value; statement in the global scope
can be accessed as properties of the window object.
As such, the hasOwnProperty() method, which
returns a boolean indicating whether the object has the specified property as its own property (as opposed to inheriting it)
can be used to determine whether
a var of "varname" has been declared globally i.e. is a property of the window.
// Globally established, therefore, properties of window
var foo = "whatever", // string
bar = false, // bool
baz; // undefined
// window.qux does not exist
console.log( [
window.hasOwnProperty( "foo" ), // true
window.hasOwnProperty( "bar" ), // true
window.hasOwnProperty( "baz" ), // true
window.hasOwnProperty( "qux" ) // false
] );
What's great about hasOwnProperty() is that in calling it, we don't use a variable that might as yet be undeclared - which of course is half the problem in the first place.
Although not always the perfect or ideal solution, in certain circumstances, it's just the job!
Notes
The above is true when using var to define a variable, as opposed to let which:
declares a block scope local variable, optionally initializing it to a value.
is unlike the
varkeyword, which defines a variable globally, or locally to an entire function regardless of block scope.At the top level of programs and functions,
let, unlikevar, does not create a property on the global object.
For completeness: const constants are, by definition, not actually variable (although their content can be); more relevantly:
Global constants do not become properties of the window object, unlike
varvariables. An initializer for a constant is required; that is, you must specify its value in the same statement in which it's declared.The value of a constant cannot change through reassignment, and it can't be redeclared.
The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned.
Since let variables or const constants are never properties of any object which has inherited the hasOwnProperty() method, it cannot be used to check for their existence.
Regarding the availability and use of hasOwnProperty():
Every object descended from Object inherits the
hasOwnProperty()method. [...] unlike theinoperator, this method does not check down the object's prototype chain.
How to check if a variable exists
This is a pretty bulletproof solution for testing if a variable exists and has been initialized :
var setOrNot = typeof variable !== typeof undefined;
It is most commonly used in combination with a ternary operator to set a default in case a certain variable has not been initialized :
var dark = typeof darkColor !== typeof undefined ? darkColor : "black";