How do I determine if variable is undefined or null?
My code is as follows:
var EmpName = $("div#esd-names div#name").attr('class');
if(EmpName == 'undefined'){
// DO SOMETHING
};
<div id="esd-names">
<div id="name"></div>
</div>
But if I do this, the JavaScript interpreter halts execution.
You can use the qualities of the abstract equality operator to do this:
if (variable == null){
// your code here.
}
Because null == undefined is true, the above code will catch both null and undefined.
The standard way to catch null and undefined simultaneously is this:
if (variable == null) {
// do something
}
--which is 100% equivalent to the more explicit but less concise:
if (variable === undefined || variable === null) {
// do something
}
When writing professional JS, it's taken for granted that type equality and the behavior of == vs === is understood. Therefore we use == and only compare to null.
Edit again
The comments suggesting the use of typeof are simply wrong. Yes, my solution above will cause a ReferenceError if the variable doesn't exist. This is a good thing. This ReferenceError is desirable: it will help you find your mistakes and fix them before you ship your code, just like compiler errors would in other languages. Use try/catch if you are working with input you don't have control over.
You should not have any references to undeclared variables in your code.
Combining the above answers, it seems the most complete answer would be:
if( typeof variable === 'undefined' || variable === null ){
// Do stuff
}
This should work for any variable that is either undeclared or declared and explicitly set to null or undefined. The boolean expression should evaluate to false for any declared variable that has an actual non-null value.
if (variable == null) {
// Do stuff, will only match null or undefined, this won't match false
}
if (typeof EmpName != 'undefined' && EmpName) {
will evaluate to true if value is not:
null
undefined
NaN
empty string ("")
0
false
Probably the shortest way to do this is:
if(EmpName == null) { /* DO SOMETHING */ };
Here is proof:
function check(EmpName) {
if(EmpName == null) { return true; };
return false;
}
var log = (t,a) => console.log(`${t} -> ${check(a)}`);
log('null', null);
log('undefined', undefined);
log('NaN', NaN);
log('""', "");
log('{}', {});
log('[]', []);
log('[1]', [1]);
log('[0]', [0]);
log('[[]]', [[]]);
log('true', true);
log('false', false);
log('"true"', "true");
log('"false"', "false");
log('Infinity', Infinity);
log('-Infinity', -Infinity);
log('1', 1);
log('0', 0);
log('-1', -1);
log('"1"', "1");
log('"0"', "0");
log('"-1"', "-1");
// "void 0" case
console.log('---\n"true" is:', true);
console.log('"void 0" is:', void 0);
log(void 0,void 0); // "void 0" is "undefined"
And here are more details about == (source here)
BONUS: reason why === is more clear than == (look on agc answer)
jQuery attr() function returns either a blank string or the actual value (and never null or undefined). The only time it returns undefined is when your selector didn't return any element.
So you may want to test against a blank string. Alternatively, since blank strings, null and undefined are false-y, you can just do this:
if (!EmpName) { //do something }
Edited answer: In my opinion, you shouldn't use the function from my below old answer. Instead, you should probably know the type of your variable and use the according to check directly (for example, wondering if an array is empty? just do if(arr.length===0){} etc.). This answer doesn't even answer OP's question.
I've come to write my own function for this. JavaScript is weird.
It is usable on literally anything. (Note that this also checks if the variable contains any usable values. But since this information is usually also needed, I think it's worth posting). Please consider leaving a note.
function empty(v) {
let type = typeof v;
if (type === 'undefined') {
return true;
}
if (type === 'boolean') {
return !v;
}
if (v === null) {
return true;
}
if (v === undefined) {
return true;
}
if (v instanceof Array) {
if (v.length < 1) {
return true;
}
} else if (type === 'string') {
if (v.length < 1) {
return true;
}
if (v === '0') {
return true;
}
} else if (type === 'object') {
if (Object.keys(v).length < 1) {
return true;
}
} else if (type === 'number') {
if (v === 0) {
return true;
}
}
return false;
}
TypeScript-compatible.
This function should do exactly the same thing like PHP's empty() function (see RETURN VALUES)
Considers undefined, null, false, 0, 0.0, "0" {}, [] as empty.
"0.0", NaN, " ", true are considered non-empty.
The shortest and easiest:
if(!EmpName ){
// DO SOMETHING
}
this will evaluate true if EmpName is:
null
undefined
NaN
empty
string ("")
0
false
If the variable you want to check is a global, do
if (window.yourVarName) {
// Your code here
}
This way to check will not throw an error even if the yourVarName variable doesn't exist.
Example: I want to know if my browser supports History API
if (window.history) {
history.back();
}
How this works:
window is an object which holds all global variables as its properties, and in JavaScript it is legal to try to access a non-existing object property. If history doesn't exist then window.history returns undefined. undefined is falsey, so code in an if(undefined){} block won't run.
In JavaScript, as per my knowledge, we can check an undefined, null or empty variable like below.
if (variable === undefined){
}
if (variable === null){
}
if (variable === ''){
}
Check all conditions:
if(variable === undefined || variable === null || variable === ''){
}
Since you are using jQuery, you can determine whether a variable is undefined or its value is null by using a single function.
var s; // undefined
jQuery.isEmptyObject(s); // will return true;
s = null; // defined as null
jQuery.isEmptyObject(s); // will return true;
// usage
if(jQuery.isEmptyObject(s)){
alert('Either variable: s is undefined or its value is null');
}else{
alert('variable: s has value ' + s);
}
s = 'something'; // defined with some value
jQuery.isEmptyObject(s); // will return false;
I've just had this problem i.e. checking if an object is null.
I simply use this:
if (object) {
// Your code
}
For example:
if (document.getElementById("enterJob")) {
document.getElementById("enterJob").className += ' current';
}
You can simply use the following (I know there are shorter ways to do this, but this may make it easier to visually observe, at least for others looking at the code).
if (x === null || x === undefined) {
// Add your response code here, etc.
}
source: https://www.growthsnippets.com/how-can-i-determine-if-a-variable-is-undefined-or-null/
jQuery check element not null:
var dvElement = $('#dvElement');
if (dvElement.length > 0) {
// Do something
}
else{
// Else do something else
}
With the newest javascript changes, you can use the new logical operator ??= to check if the left operand is null or undefined and if so assign the value of right operand.
SO,
if(EmpName == null){ // if Variable EmpName null or undefined
EmpName = 'some value';
};
Is equivalent to:
EmpName ??= 'some value';
The easiest way to check is:
if(!variable) {
// If the variable is null or undefined then execution of code will enter here.
}
I run this test in the Chrome console. Using (void 0) you can check undefined:
var c;
undefined
if (c === void 0) alert();
// output = undefined
var c = 1;
// output = undefined
if (c === void 0) alert();
// output = undefined
// check c value c
// output = 1
if (c === void 0) alert();
// output = undefined
c = undefined;
// output = undefined
if (c === void 0) alert();
// output = undefined
With the solution below:
const getType = (val) => typeof val === 'undefined' || !val ? null : typeof val;
const isDeepEqual = (a, b) => getType(a) === getType(b);
console.log(isDeepEqual(1, 1)); // true
console.log(isDeepEqual(null, null)); // true
console.log(isDeepEqual([], [])); // true
console.log(isDeepEqual(1, "1")); // false
etc...
I'm able to check for the following:
null
undefined
NaN
empty
string ("")
0
false
To test if a variable is null or undefined I use the below code.
if(typeof sVal === 'undefined' || sVal === null || sVal === ''){
console.log('variable is undefined or null');
}
if you create a function to check it:
export function isEmpty (v) {
if (typeof v === "undefined") {
return true;
}
if (v === null) {
return true;
}
if (typeof v === "object" && Object.keys(v).length === 0) {
return true;
}
if (Array.isArray(v) && v.length === 0) {
return true;
}
if (typeof v === "string" && v.trim().length === 0) {
return true;
}
return false;
}
(null == undefined) // true
(null === undefined) // false
Because === checks for both the type and value. Type of both are different but value is the same.
Let's look at this,
let apple; // Only declare the variable as apple
alert(apple); // undefined
In the above, the variable is only declared as apple. In this case, if we call method alert it will display undefined.
let apple = null; /* Declare the variable as apple and initialized but the value is null */
alert(apple); // null
In the second one it displays null, because variable of apple value is null.
So you can check whether a value is undefined or null.
if(apple !== undefined || apple !== null) {
// Can use variable without any error
}
The foo == null check should do the trick and resolve the "undefined OR null" case in the shortest manner. (Not considering "foo is not declared" case.) But people who are used to have 3 equals (as the best practice) might not accept it. Just look at eqeqeq or triple-equals rules in eslint and tslint...
The explicit approach, when we are checking if a variable is undefined or null separately, should be applied in this case, and my contribution to the topic (27 non-negative answers for now!) is to use void 0 as both short and safe way to perform check for undefined.
Using foo === undefined is not safe because undefined is not a reserved word and can be shadowed (MDN). Using typeof === 'undefined' check is safe, but if we are not going to care about foo-is-undeclared case the following approach can be used:
if (foo === void 0 || foo === null) { ... }
You can do something like this, I think its more efficient for multiple value check on the same variable in one condition
const x = undefined;
const y = null;
const z = 'test';
if ([undefined, null].includes(x)) {
// Will return true
}
if ([undefined, null].includes(y)) {
// Will return true
}
if ([undefined, null].includes(z)) {
// Will return false
}
No one seems to have to posted this yet, so here we go:
a?.valueOf() === undefined works reliably for either null or undefined.
The following works pretty much like a == null or a == undefined, but it could be more attractive for purists who don't like == 😎
function check(a) {
const value = a?.valueOf();
if (value === undefined) {
console.log("a is null or undefined");
}
else {
console.log(value);
}
}
check(null);
check(undefined);
check(0);
check("");
check({});
check([]);
On a side note, a?.constructor works too:
function check(a) {
if (a?.constructor === undefined) {
console.log("a is null or undefined");
}
}
check(null);
check(undefined);
check(0);
check("");
check({});
check([]);
Calling typeof null returns a value of “object”, as the special value null is considered to be an empty object reference. Safari through version 5 and Chrome through version 7 have a quirk where calling typeof on a regular expression returns “function” while all other browsers return “object”.
var x;
if (x === undefined) {
alert ("only declared, but not defined.")
};
if (typeof y === "undefined") {
alert ("not even declared.")
};
You can only use second one: as it will check for both definition and declaration
var i;
if (i === null || typeof i === 'undefined') {
console.log(i, 'i is undefined or null')
}
else {
console.log(i, 'i has some value')
}
I still think the best/safe way to test these two conditions is to cast the value to a string:
var EmpName = $("div#esd-names div#name").attr('class');
// Undefined check
if (Object.prototype.toString.call(EmpName) === '[object Undefined]'){
// Do something with your code
}
// Nullcheck
if (Object.prototype.toString.call(EmpName) === '[object Null]'){
// Do something with your code
}
Lets say I have array something like this:
$game = Array
(
['round'] => Array
(
['match'] => Array
(
['player_2'] => Array
(
[name] => asddd
[id] => 1846845
[winner] => yes
)
['player_21'] => Array
(
[name] => ddd
[id] => 1848280
[winner] => no
)
)
)
)
And lets say in Node.js/Javascript I need to check if player_3 winner key value is yes. In PHP, you did something like this:
if( $game['round']['match'][player_3]['winner'] == 'yes'){
}
Because there is no player_3 it returns false in PHP, but if I did something similar in Javascript:
if( typeof game['round']['match'][player_3]['winner'] != 'undefined' && game['round']['match'][player_3]['winner'] == 'yes'){
}
I would get error: (node:15048) UnhandledPromiseRejectionWarning: TypeError: Cannot read property '0' of undefined, because player_3 doesn't exist in array and you can't check key value of array, that doesn't exist.
You could do this in Javascript:
if(
typeof game['round'] != 'undefined' &&
typeof game['round']['match'] != 'undefined' &&
typeof game['round']['match']['player_3'] != 'undefined' &&
typeof game['round']['match']['player_3']['winner'] != 'undefined' &&
typeof game['round']['match']['player_3']['winner'] == 'yes'
){
var playerIsWinner = true;
}else{
var playerIsWinner = false;
}
You check each array inside array from top down and make sure that they exists. I don't know if it actually works, but even if it does, it seems bad and stupid way to check something. I mean look how simple it is in PHP, while in Javascript I have to check each array existence inside array. So is there better way checking value of array?
Please, look at the lodash library, especially at methods, such as get. Then you may safely try something like:
_.get(game, 'round.match.player3.winner', false);
That's it :)
The array you've shown resembles more of an object in JS. So here's what you could possibly try.
const obj = {
round: {
match: {
player_2: {
name: 'asddd',
id: 1846845,
winner: true
},
player_21: {
name: 'ddd',
id: 1848280,
winner: false
}
}
}
}
...
const isWinner = (key) => {
try {
return obj.round.match[key].winner
} catch(e) {
return false
}
}
console.log(isWinner('player_2'))
By wrapping your return inside of try ... catch, you prevent the error from being thrown at your query and possibly stopping the app from continuing on. If from whatever reason the structure of your object would change, you'd still have a boolean value returned.
If you have to keep your winner value in form of a string, you could simply compare the value, and you'll end up with boolean as a result. As so:
const isWinner = (key) => {
try {
return (obj.round.matchs[key].winner === 'yes')
} catch(e) {
return false
}
}
No you don't need to do manual check for deeply nested data for null or undefined, instead you could rollout your own small but compact function in this case get and be flexible with any input data provided. See more about Array.prototype.reduce()
// this single line will do the trick
const get = (p, o) =>p.reduce((xs, x) => (xs && xs[x]) ? xs[x] : null, o)
// let's pass in our props object...
const props = {"round":{"match":[{"player_21":{"name":"asdfg","id":1846845,"winner":"not yet"}},{"player_2":{"name":"sany","id":1846280,"winner":"no"}},{"player_3":{"name":"sunny","id":1846000,"winner":"yes"}}]}}
var playerIsWinner = false;
//console.log(get(['round', 'match', 2, 'player_3', 'winner'], props))
if (get(['round', 'match', 2, 'player_3', 'winner'], props) == 'yes') {
playerIsWinner = true;
}
console.log(playerIsWinner)
You can do the following to avoid the undefined error:
if ( game['round']['match'][player_3] && game['round']['match'][player_3]['winner'] == 'yes' ) {
...
}
Because undefined is "falsey" you'll get false instead of undefined if player_3 does not exist, and true if player_3 exists and is the winner.
Just wrap in a try catch block. This allows you to skip all of your boilerplate typeof statements:
typeof game['round'] != 'undefined' &&
typeof game['round']['match'] != 'undefined' &&
typeof game['round']['match']['player_3'] != 'undefined' &&
typeof game['round']['match']['player_3']['winner'] != 'undefined' &&
typeof game['round']['match']['player_3']['winner'] == 'yes'
Instead throw an error and handle it if a element is not present. For example:
let nestedObj = {
prop1: {
propa1: {
propb1: 'test'
}
},
prop2: {}
}
try {
console.log(nestedObj['prop1']['propa1']['propb1']);
console.log(nestedObj['prop2']['propa2']['propb2']);
} catch(e) {
console.log('prop not defined');
}
This is a lot simpler than checking for every simple condition like you are doing now.
In an API response, I want to check if a variable exists. If it doesn't, I want to assign it a blank value:
if(!data3.fields[i+2].values.value[0]) {
data3.fields[i+2].values.value[0] = "";
} else {
break;
}
Error in the console is:
Uncaught TypeError: Cannot read property 'value' of undefined
This confuses me because I thought that's exactly what my if the statement was checking. Any ideas what's going on here?
The if check won't protect you from trying to use an undefined variable. In your instance the values property is undefined. If you wanted to test for that you would need to first check that specific property
if(data3.fields[i+2].values !== undefined && data3.fields[i+2].values.value[0]){
//do something with data3.fields[i+2].values.value[0]
}
additionally, if you are in a scenario where you don't even know if data3 exists (for example you are checking for the existence of a third party script, or something else in your environment) you would need to use the typeof operator to be safe. E.G.
if(typeof(ga) !== 'undefined'){ //typeof returns a string. This would be testing for google analytics on a page.
It doesnt work like PHP does (which checks the whole 'chain'). In your example, you actually check if .value[0] of values exists, but dont check if values exists. The full version should be:
if( data3 && && data3.fields[i+2] && data3.fields[i+2].values && !data3.fields[i+2].values.value[0]) {}
In your code ata3.fields[i+2].values is undefined, and you're trying to access value[0] of 'undefined'
Or slightly more simplefied, if you wand to test if d has a value, you have to make sure that a, b and c aldo have a value:
if( a && a.b && a.b.c && !a.b.c.d){ /* ... */ }
You can remove checks on the left side of the checks if you are sure those exist. E.g.: If you know that a.b always exist, you can simplefy:
if( a.b.c && !a.b.c.d){ /* ... */ }
If you really want to make sure the complete property chain is not undefined you have to check every single step and the later ones won't be executed if at least && condition is false.
if (data3 && data3.fields && data3.fields[i+2] && data3.fields[i+2].values && data3.fields[i+2].values.value && data3.fields[i + 2].values.value[0]) {
data3.fields[i + 2].values.value[0] = "";
} else {
break;
}
Another way would be to just do it and catch the exception:
try {
data3.fields[i + 2].values.value[0] = "";
} catch (e) {
break;
}
The error is telling you that data3.fields[i+2].values is undefined. You can't check for a property .value on undefined.
You'd need to verify each property/index belongs along the way if you always want that nested path to default to an empty string.
if (data3.fields[i+2] === undefined) {
data.fields[i+2] = {};
}
if (data3.fields[i+2].values === undefined) {
data3.fields[i+2].values = {};
}
if (data3.fields[i+2].values.value === undefined) {
data3.fields[i+2].values.value = [];
}
// and finally your empty string assignment
if (data3.fields[i+2].values.value[0] === undefined) {
data3.fields[i+2].values.value[0] = '';
}
Depending on your requirements, you might be able to get away with assigning a stub as soon as you know data3.fields[i+2] is undefined.
if (data3.fields[i+2] === undefined) {
data3.fields[i+2] = {
values: {
value: ['']
}
};
}
For example, this is the value of the object I am processing:
object = {"message":"success","dataList":{"state":"error","count":"25"}}
I know that to check if key "message" exists, I can do the following:
if(object['message']){
//"message" exists. do stuff.
} else{
//"message" does not exist
}
How do I check for the existence of "state" or "count" though?
if(object['dataList']['state']){
// dataList["state"] exists. do stuff.
} else {
// dataList["state"] does not exist
}
or the (in my opinion) more readable:
if(object.dataList.state){ ... }
Edit: It would also be a good idea to check for all parent objects so you will not get an unexpected error when, for example, dataList does not exist on the object:
if (object && object.dataList && object.dataList.state)
try like this:
object = {"message":"success","dataList":{"state":"error","count":"25"}};
if(object.message =='success'){
console.log(object.dataList);// your datalist object here use it
console.log(object.dataList.state);
console.log(object.dataList.count);
} else{
//"message" does not exist
}
if you are trying to check state do this:
if(typeof(object.dataList.state) !='undefined' && object.dataList.state.length > 0){
// dataList.state exists. do stuff.
} else {
// dataList.state does not exist
}
if (object.dataList.state || object.dataList.count) {
// ...
}
First of all, if you are checking the existence of a property, you should use if ('message' in object). If you use if (object['message']), for the case object = {'message': null}, the result is wrong.
In your question, the object is nested into two layers. If there are more than two, you can try a generic solution using recursion:
function findProperty (obj, key) {
if (typeof obj === "object") {
if (key in obj) return true;
var childReturned = false;
for (k in obj) {
childReturned = findProperty(obj[k], key);
if (childReturned) return true;
}
}
return false;
}
var obj = {"message":"success","dataList":{"state":"error","count":"25"}};
findProperty(obj, 'message'); // => true
findProperty(obj, 'dataList'); // => true
findProperty(obj, 'state'); // => true
findProperty(obj, 'count'); // => true
I want to search two item (name=string and location=json). this search is (one input box and two columns for search).
at the moment with this code I can find 'name' but i need I need to find location also.
if(textToCheck !== '') {
if((searchArray[i]['location']).toLowerCase().search(textToCheck) === -1) {
display = false;
}
}
the code that I suggest and doesn't work is:
if(textToCheck !== '') {
if((searchArray[i]['name']).toLowerCase().search(textToCheck) === -1 || (searchArray[i]['location']).toLowerCase().search(textToCheck) === -1) {
display = false;
}
}
error is :
Uncaught TypeError: Object 123 Street,xxx,xx,Canada,123rd Street,xxx,xx,123 xxx,12345 xxx,France has no method 'toLowerCase' FilterController.showFilteredSet (anonymous function)
As you said location=json, actually searchArray[i]['location'] is a object but not string. You need to do search depend on the what the object like.
Or simply change the object to string format like below:
JSON.stringify(searchArray[i]['location']).toLowerCase().search(textToCheck) === -1
JSON.stringify() is fine. But that searches in the object keys also.
This means:
if your "JSON" object looks like this:
({
street: 'my street',
country: 'Texas'
})
JSON.stringify(obj).toLowerCase().search('country') will find a result, even if the "data" doesn't contain it.
instead:
use a generalized way to do a flat search on objects.
Object.prototype.search = function(subject) {
for(var k in this) {
if(this.hasOwnProperty(k) && this[k].toString().toLowerCase().search(subject) !== -1)
return true;
}
return false;
};
var myObj = ({ foo: 'bar', hello: 'world' });
console.log(myObj.search('ar')); //search for "ar", returns true
console.log(myObj.search('ponyo!')); //search for "ponyo!", returns false
console.log(myObj.search('hello')); //search for "hello", returns false
in your case that would decline to:
//somewhere above, run this only once:
Object.prototype.search = function(subject) {
for(var k in this) {
if(this[k].toString().toLowerCase().search(subject) !== -1)
return true;
}
return false;
};
/////
if(textToCheck !== '') {
if((searchArray[i]['name']).toLowerCase().search(textToCheck) === -1 &&
(searchArray[i]['location']).search(textToCheck) === false) {
display = false;
}
}
please be warned that this code modifies the Object prototype, adding a "search" function to all objects (this might conflict with other libraries, you may or may not be using, that want to do the same).