Related
For example, in iOS Swift, I can do something like this:
if (self.user?.company?.pic?.phoneNumber != null) { doSomething() }
Without the need to:
if (self.user != null && self.user!.company != null && self.user!.company!.pic != null && self.user!.company!.pic!.phoneNumber != null) { doSomething() }
In ReactNative (or Javascript), I found out that if an object is undefined, I can't check for the existence of the variable inside of it, so I have to check first whether the object is undefined or not, only then I can safely check whether the variable inside of it undefined or not.
if (typeof this.state.user !== "undefined" && typeof this.state.user.company !== "undefined" && typeof this.state.user.company.pic !== "undefined" && typeof this.state.user.company.pic.phoneNumber !== undefined) { this.doSomething() }
How can I turn this into just:
if (typeof this.state.user.company.pic.phoneNumber !== "undefined") { this.doSomething() }
or something similar?
Thanks.
Currently, optional chaining is a stage 3 draft, and so, you may be able to do it in the future.
EDIT:
Optional chaining will now be part of ES2020, and so you'll be able to do the following:
if (self.user?.company?.pic?.phoneNumber !== undefined) {
doSomething(); // phoneNumber exists
}
With that being said, it still has very limited browser support.
So, for the time being, you could instead create a function which recursively finds each object from a list of properties like so:
const optional_chain = (obj, [key, ...props]) =>
obj !== undefined && key ? optional_chain(obj[key], props) : obj;
const user = {
company: {
pic: {
phoneNumber: 1
}
}
}
console.log(optional_chain(user, ['company', 'pic', 'phoneNumber'])); // 1
console.log(optional_chain(user, ['company', 'pic', 'phoneNumber', 'x'])); // undefined
console.log(optional_chain(user, ['company', 'picture', 'phoneNumber'])); // undefined
console.log(optional_chain(user, ['x', 'picture', 'phoneNumber'])); // undefined
In your case, the usage would be as so:
if (optional_chain(self.user, ['company', 'pic', 'phoneNumber']) !== undefined) {
doSomething();
}
If you can’t use optional chaining which is still a proposal but available via babel plugin you could use a recursive utility function to test for the presence of each path segment:
const pluck = (item, path) => {
const [, part, rest] = /^([^.]+)\.*(.*)/.exec(path) || [];
if (!part) {
return null;
}
const o = (item || {})[part];
if (o == null) {
return null;
}
return rest.length ? pluck(o, rest) : o;
};
if (pluck(this.state, ‘user.company.pic.phoneNumber’)) {
doSomething();
}
In JavaScript, comparisons that involve undefined properties are evaluated as false, rather than throwing an error, even in "strict" mode.
This has created more than one hard-to-resolve bug in my code.
Is there any way to a) detect these mistakes, or b) mitigate against them?
> let x = {foo: 1}
> x.foo == 2 // Sensible behaviour
false
> x.floo // Where floo is a typo.
ReferenceError: floo is not defined
> x.floo == 2 // Nonsensical behaviour
false
Although #jonrsharpe is absolutely right that you should use Typescript if you need that level of control, just for fun, here's a pure javascript implementation. Wrap your object in strict(...) and you will get reference errors on undefined props:
const SPECIAL_PROPS = [
// well-known symbols
...Object.getOwnPropertyNames(Symbol).map(p => Symbol[p]),
// used by JSON.strinfigy
'toJSON',
// something else?
];
let strict = obj => new Proxy(obj, {
get(t, p) {
if (p in t)
return t[p];
if (!SPECIAL_PROPS.includes(p))
throw new ReferenceError(`property ${String(p)} is not defined`);
}
});
let x = strict({foo: 1})
x.foo == 2 // Sensible behaviour
x.floo == 2 // Reference error
Needless to say, this is a purely runtime check, which kinda defeats the whole purpose.
You can try using a Proxy
let x = {foo: 1}
let handler = {
get: function(target,prop,reciver){
if(!target.hasOwnProperty(prop)){
throw new Error('Sorry property do not exist')
} else{
return target[prop]
}
}
}
let proxy = new Proxy(x,handler)
console.log(proxy.foo)
console.log(proxy.floo)
You can check item === undefined.
Or define additional property .isNull() in Object prototype that covers this case:
Object.defineProperty(Object.prototype, 'isNull', {
value: function (obj) {
return (obj === null || obj === undefined);
}
});
Usage:
if(Object.isNull(x)) {
....
}
This question already has answers here:
Test for existence of nested JavaScript object key
(64 answers)
Closed 8 years ago.
a "problem" which i have every now and then is that i have an object e.g. user = {} and through the course of using the app this gets populated. Let's say somwhere, after an AJAX call or something i do this:
user.loc = {
lat: 50,
long: 9
}
At another place i want to check if user.loc.lat exists.
if (user.loc.lat) {
// do something
}
If it does not exists, this will cause an error. If user.loc.lat is undefined, user.loc of course is undefined as well.
"Cannot read property 'lat' of null" - Dev Tools error
That means I need to check it like this:
if (user.loc) {
if (user.loc.lat) {
// do something
}
}
or
if (user.loc && user.loc.lat) {
// do something
}
This isn't really pretty and the bigger my objects are the worse it gets - obviously (imagine 10 levels of nesting).
It kind bums me that if(user.loc.lat) isn't just returning false if user.loc is undefined as well.
What's the ideal way to check situations like this?
You can use an utility function like this:
get = function(obj, key) {
return key.split(".").reduce(function(o, x) {
return (typeof o == "undefined" || o === null) ? o : o[x];
}, obj);
}
Usage:
get(user, 'loc.lat') // 50
get(user, 'loc.foo.bar') // undefined
Or, to check only if a property exists, without getting its value:
has = function(obj, key) {
return key.split(".").every(function(x) {
if(typeof obj != "object" || obj === null || ! x in obj)
return false;
obj = obj[x];
return true;
});
}
if(has(user, 'loc.lat')) ...
You can combine the checks using lazy and:
if(user.loc && user.loc.lat) { ...
Or, you use CoffeeScript. And ES2020 has new syntax ( Nullish coalescing Operator ).
user.loc?.lat?. '...'
which would run the checks for loc property and safeguard against empty objects.
Well, javascript has try-catch. Depending on what you actually need to do (i.e. what your else statement would look like if it's undefined), that may be what you want.
example:
try {
user.loc.lat.doSomething();
} catch(error) {
//report
}
Try this if(user && user.loc && user.loc.lat) {...}
You can check value of null and undefined using typeof
If .loc has value false than you can try
if(user && user.loc && typeof(user.loc)!=="undefined"){...}
If you have a huge nested object than have a look at
Source.
function checkNested(obj /*, level1, level2, ... levelN*/) {
var args = Array.prototype.slice.call(arguments),
obj = args.shift();
for (var i = 0; i < args.length; i++) {
if (!obj.hasOwnProperty(args[i])) {
return false;
}
obj = obj[args[i]];
}
return true;
}
var test = {level1:{level2:{level3:'level3'}} };
checkNested(test, 'level1', 'level2', 'level3'); // true
checkNested(test, 'level1', 'level2', 'foo'); // false
Update:
Try lodash.get
I'm trying to get:
document.createElement('div') //=> true
{tagName: 'foobar something'} //=> false
In my own scripts, I used to just use this since I never needed tagName as a property:
if (!object.tagName) throw ...;
So for the second object, I came up with the following as a quick solution -- which mostly works. ;)
The problem is, it depends on browsers enforcing read-only properties, which not all do.
function isDOM(obj) {
var tag = obj.tagName;
try {
obj.tagName = ''; // Read-only for DOM, should throw exception
obj.tagName = tag; // Restore for normal objects
return false;
} catch (e) {
return true;
}
}
Is there a good substitute?
This might be of interest:
function isElement(obj) {
try {
//Using W3 DOM2 (works for FF, Opera and Chrome)
return obj instanceof HTMLElement;
}
catch(e){
//Browsers not supporting W3 DOM2 don't have HTMLElement and
//an exception is thrown and we end up here. Testing some
//properties that all elements have (works on IE7)
return (typeof obj==="object") &&
(obj.nodeType===1) && (typeof obj.style === "object") &&
(typeof obj.ownerDocument ==="object");
}
}
It's part of the DOM, Level2.
Update 2: This is how I implemented it in my own library:
(the previous code didn't work in Chrome, because Node and HTMLElement are functions instead of the expected object. This code is tested in FF3, IE7, Chrome 1 and Opera 9).
//Returns true if it is a DOM node
function isNode(o){
return (
typeof Node === "object" ? o instanceof Node :
o && typeof o === "object" && typeof o.nodeType === "number" && typeof o.nodeName==="string"
);
}
//Returns true if it is a DOM element
function isElement(o){
return (
typeof HTMLElement === "object" ? o instanceof HTMLElement : //DOM2
o && typeof o === "object" && o !== null && o.nodeType === 1 && typeof o.nodeName==="string"
);
}
The accepted answer is a bit complicated, and does not detect all types of HTML elements. For example, SVG elements are not supported. In contrast, this answer works for HTML as well as SVG, etc.
See it in action here: https://jsfiddle.net/eLuhbu6r/
function isElement(element) {
return element instanceof Element || element instanceof HTMLDocument;
}
Cherry on top: the above code is IE8 compatible.
No need for hacks, you can just ask if an element is an instance of the DOM Element:
const isDOM = el => el instanceof Element
All solutions above and below (my solution including) suffer from possibility of being incorrect, especially on IE — it is quite possible to (re)define some objects/methods/properties to mimic a DOM node rendering the test invalid.
So usually I use the duck-typing-style testing: I test specifically for things I use. For example, if I want to clone a node I test it like this:
if(typeof node == "object" && "nodeType" in node &&
node.nodeType === 1 && node.cloneNode){
// most probably this is a DOM node, we can clone it safely
clonedNode = node.cloneNode(false);
}
Basically it is a little sanity check + the direct test for a method (or a property) I am planning to use.
Incidentally the test above is a good test for DOM nodes on all browsers. But if you want to be on the safe side always check the presence of methods and properties and verify their types.
EDIT: IE uses ActiveX objects to represent nodes, so their properties do not behave as true JavaScript object, for example:
console.log(typeof node.cloneNode); // object
console.log(node.cloneNode instanceof Function); // false
while it should return "function" and true respectively. The only way to test methods is to see if the are defined.
A simple way to test if a variable is a DOM element (verbose, but more traditional syntax :-)
function isDomEntity(entity) {
if(typeof entity === 'object' && entity.nodeType !== undefined){
return true;
}
else{
return false;
}
}
Or as HTMLGuy suggested (short and clean syntax):
const isDomEntity = entity =>
typeof entity === 'object' && entity.nodeType !== undefined
You could try appending it to a real DOM node...
function isDom(obj)
{
var elm = document.createElement('div');
try
{
elm.appendChild(obj);
}
catch (e)
{
return false;
}
return true;
}
How about Lo-Dash's _.isElement?
$ npm install lodash.iselement
And in the code:
var isElement = require("lodash.iselement");
isElement(document.body);
This is from the lovely JavaScript library MooTools:
if (obj.nodeName){
switch (obj.nodeType){
case 1: return 'element';
case 3: return (/\S/).test(obj.nodeValue) ? 'textnode' : 'whitespace';
}
}
The using the root detection found here, we can determine whether e.g. alert is a member of the object's root, which is then likely to be a window:
function isInAnyDOM(o) {
return (o !== null) && !!(o.ownerDocument && (o.ownerDocument.defaultView || o.ownerDocument.parentWindow).alert); // true|false
}
To determine whether the object is the current window is even simpler:
function isInCurrentDOM(o) {
return (o !== null) && !!o.ownerDocument && (window === (o.ownerDocument.defaultView || o.ownerDocument.parentWindow)); // true|false
}
This seems to be less expensive than the try/catch solution in the opening thread.
Don P
old thread, but here's an updated possibility for ie8 and ff3.5 users:
function isHTMLElement(o) {
return (o.constructor.toString().search(/\object HTML.+Element/) > -1);
}
var IsPlainObject = function ( obj ) { return obj instanceof Object && ! ( obj instanceof Function || obj.toString( ) !== '[object Object]' || obj.constructor.name !== 'Object' ); },
IsDOMObject = function ( obj ) { return obj instanceof EventTarget; },
IsDOMElement = function ( obj ) { return obj instanceof Node; },
IsListObject = function ( obj ) { return obj instanceof Array || obj instanceof NodeList; },
// In fact I am more likely t use these inline, but sometimes it is good to have these shortcuts for setup code
I think prototyping is not a very good solution but maybe this is the fastest one:
Define this code block;
Element.prototype.isDomElement = true;
HTMLElement.prototype.isDomElement = true;
than check your objects isDomElement property:
if(a.isDomElement){}
I hope this helps.
This could be helpful: isDOM
//-----------------------------------
// Determines if the #obj parameter is a DOM element
function isDOM (obj) {
// DOM, Level2
if ("HTMLElement" in window) {
return (obj && obj instanceof HTMLElement);
}
// Older browsers
return !!(obj && typeof obj === "object" && obj.nodeType === 1 && obj.nodeName);
}
In the code above, we use the double negation operator to get the boolean value of the object passed as argument, this way we ensure that each expression evaluated in the conditional statement be boolean, taking advantage of the Short-Circuit Evaluation, thus the function returns true or false
According to mdn
Element is the most general base class from which all objects in a Document inherit. It only has methods and properties common to all kinds of elements.
We can implement isElement by prototype. Here is my advice:
/**
* #description detect if obj is an element
* #param {*} obj
* #returns {Boolean}
* #example
* see below
*/
function isElement(obj) {
if (typeof obj !== 'object') {
return false
}
let prototypeStr, prototype
do {
prototype = Object.getPrototypeOf(obj)
// to work in iframe
prototypeStr = Object.prototype.toString.call(prototype)
// '[object Document]' is used to detect document
if (
prototypeStr === '[object Element]' ||
prototypeStr === '[object Document]'
) {
return true
}
obj = prototype
// null is the terminal of object
} while (prototype !== null)
return false
}
console.log(isElement(document)) // true
console.log(isElement(document.documentElement)) // true
console.log(isElement(document.body)) // true
console.log(isElement(document.getElementsByTagName('svg')[0])) // true or false, decided by whether there is svg element
console.log(isElement(document.getElementsByTagName('svg'))) // false
console.log(isElement(document.createDocumentFragment())) // false
I think that what you have to do is make a thorough check of some properties that will always be in a dom element, but their combination won't most likely be in another object, like so:
var isDom = function (inp) {
return inp && inp.tagName && inp.nodeName && inp.ownerDocument && inp.removeAttribute;
};
In Firefox, you can use the instanceof Node. That Node is defined in DOM1.
But that is not that easy in IE.
"instanceof ActiveXObject" only can tell that it is a native object.
"typeof document.body.appendChild=='object'" tell that it may be DOM object, but also can be something else have same function.
You can only ensure it is DOM element by using DOM function and catch if any exception. However, it may have side effect (e.g. change object internal state/performance/memory leak)
Perhaps this is an alternative? Tested in Opera 11, FireFox 6, Internet Explorer 8, Safari 5 and Google Chrome 16.
function isDOMNode(v) {
if ( v===null ) return false;
if ( typeof v!=='object' ) return false;
if ( !('nodeName' in v) ) return false;
var nn = v.nodeName;
try {
// DOM node property nodeName is readonly.
// Most browsers throws an error...
v.nodeName = 'is readonly?';
} catch (e) {
// ... indicating v is a DOM node ...
return true;
}
// ...but others silently ignore the attempt to set the nodeName.
if ( v.nodeName===nn ) return true;
// Property nodeName set (and reset) - v is not a DOM node.
v.nodeName = nn;
return false;
}
Function won't be fooled by e.g. this
isDOMNode( {'nodeName':'fake'} ); // returns false
You can see if the object or node in question returns a string type.
typeof (array).innerHTML === "string" => false
typeof (object).innerHTML === "string" => false
typeof (number).innerHTML === "string" => false
typeof (text).innerHTML === "string" => false
//any DOM element will test as true
typeof (HTML object).innerHTML === "string" => true
typeof (document.createElement('anything')).innerHTML === "string" => true
This is what I figured out:
var isHTMLElement = (function () {
if ("HTMLElement" in window) {
// Voilà. Quick and easy. And reliable.
return function (el) {return el instanceof HTMLElement;};
} else if ((document.createElement("a")).constructor) {
// We can access an element's constructor. So, this is not IE7
var ElementConstructors = {}, nodeName;
return function (el) {
return el && typeof el.nodeName === "string" &&
(el instanceof ((nodeName = el.nodeName.toLowerCase()) in ElementConstructors
? ElementConstructors[nodeName]
: (ElementConstructors[nodeName] = (document.createElement(nodeName)).constructor)))
}
} else {
// Not that reliable, but we don't seem to have another choice. Probably IE7
return function (el) {
return typeof el === "object" && el.nodeType === 1 && typeof el.nodeName === "string";
}
}
})();
To improve performance I created a self-invoking function that tests the browser's capabilities only once and assigns the appropriate function accordingly.
The first test should work in most modern browsers and was already discussed here. It just tests if the element is an instance of HTMLElement. Very straightforward.
The second one is the most interesting one. This is its core-functionality:
return el instanceof (document.createElement(el.nodeName)).constructor
It tests whether el is an instance of the construcor it pretends to be. To do that, we need access to an element's contructor. That's why we're testing this in the if-Statement. IE7 for example fails this, because (document.createElement("a")).constructor is undefined in IE7.
The problem with this approach is that document.createElement is really not the fastest function and could easily slow down your application if you're testing a lot of elements with it. To solve this, I decided to cache the constructors. The object ElementConstructors has nodeNames as keys with its corresponding constructors as values. If a constructor is already cached, it uses it from the cache, otherwise it creates the Element, caches its constructor for future access and then tests against it.
The third test is the unpleasant fallback. It tests whether el is an object, has a nodeType property set to 1 and a string as nodeName. This is not very reliable of course, yet the vast majority of users shouldn't even fall back so far.
This is the most reliable approach I came up with while still keeping performance as high as possible.
Test if obj inherits from Node.
if (obj instanceof Node){
// obj is a DOM Object
}
Node is a basic Interface from which HTMLElement and Text inherit.
For the ones using Angular:
angular.isElement
https://docs.angularjs.org/api/ng/function/angular.isElement
This will work for almost any browser. (No distinction between elements and nodes here)
function dom_element_check(element){
if (typeof element.nodeType !== 'undefined'){
return true;
}
return false;
}
differentiate a raw js object from a HTMLElement
function isDOM (x){
return /HTML/.test( {}.toString.call(x) );
}
use:
isDOM( {a:1} ) // false
isDOM( document.body ) // true
// OR
Object.defineProperty(Object.prototype, "is",
{
value: function (x) {
return {}.toString.call(this).indexOf(x) >= 0;
}
});
use:
o={}; o.is("HTML") // false
o=document.body; o.is("HTML") // true
here's a trick using jQuery
var obj = {};
var element = document.getElementById('myId'); // or simply $("#myId")
$(obj).html() == undefined // true
$(element).html() == undefined // false
so putting it in a function:
function isElement(obj){
return (typeOf obj === 'object' && !($(obj).html() == undefined));
}
Not to hammer on this or anything but for ES5-compliant browsers why not just:
function isDOM(e) {
return (/HTML(?:.*)Element/).test(Object.prototype.toString.call(e).slice(8, -1));
}
Won't work on TextNodes and not sure about Shadow DOM or DocumentFragments etc. but will work on almost all HTML tag elements.
A absolute right method, check target is a real html element
primary code:
(function (scope) {
if (!scope.window) {//May not run in window scope
return;
}
var HTMLElement = window.HTMLElement || window.Element|| function() {};
var tempDiv = document.createElement("div");
var isChildOf = function(target, parent) {
if (!target) {
return false;
}
if (parent == null) {
parent = document.body;
}
if (target === parent) {
return true;
}
var newParent = target.parentNode || target.parentElement;
if (!newParent) {
return false;
}
return isChildOf(newParent, parent);
}
/**
* The dom helper
*/
var Dom = {
/**
* Detect if target element is child element of parent
* #param {} target The target html node
* #param {} parent The the parent to check
* #returns {}
*/
IsChildOf: function (target, parent) {
return isChildOf(target, parent);
},
/**
* Detect target is html element
* #param {} target The target to check
* #returns {} True if target is html node
*/
IsHtmlElement: function (target) {
if (!X.Dom.IsHtmlNode(target)) {
return false;
}
return target.nodeType === 1;
},
/**
* Detect target is html node
* #param {} target The target to check
* #returns {} True if target is html node
*/
IsHtmlNode:function(target) {
if (target instanceof HTMLElement) {
return true;
}
if (target != null) {
if (isChildOf(target, document.documentElement)) {
return true;
}
try {
tempDiv.appendChild(target.cloneNode(false));
if (tempDiv.childNodes.length > 0) {
tempDiv.innerHTML = "";
return true;
}
} catch (e) {
}
}
return false;
}
};
X.Dom = Dom;
})(this);
Each DOMElement.constructor returns function HTML...Element() or [Object HTML...Element] so...
function isDOM(getElem){
if(getElem===null||typeof getElem==="undefined") return false;
var c = getElem.constructor.toString();
var html = c.search("HTML")!==-1;
var element = c.search("Element")!==-1;
return html&&element;
}
I have a special way to do this that has not yet been mentioned in the answers.
My solution is based on four tests. If the object passes all four, then it is an element:
The object is not null.
The object has a method called "appendChild".
The method "appendChild" was inherited from the Node class, and isn't just an imposter method (a user-created property with an identical name).
The object is of Node Type 1 (Element). Objects that inherit methods from the Node class are always Nodes, but not necessarily Elements.
Q: How do I check if a given property is inherited and isn't just an imposter?
A: A simple test to see if a method was truly inherited from Node is to first verify that the property has a type of "object" or "function". Next, convert the property to a string and check if the result contains the text "[Native Code]". If the result looks something like this:
function appendChild(){
[Native Code]
}
Then the method has been inherited from the Node object. See https://davidwalsh.name/detect-native-function
And finally, bringing all the tests together, the solution is:
function ObjectIsElement(obj) {
var IsElem = true;
if (obj == null) {
IsElem = false;
} else if (typeof(obj.appendChild) != "object" && typeof(obj.appendChild) != "function") {
//IE8 and below returns "object" when getting the type of a function, IE9+ returns "function"
IsElem = false;
} else if ((obj.appendChild + '').replace(/[\r\n\t\b\f\v\xC2\xA0\x00-\x1F\x7F-\x9F ]/ig, '').search(/\{\[NativeCode]}$/i) == -1) {
IsElem = false;
} else if (obj.nodeType != 1) {
IsElem = false;
}
return IsElem;
}
(element instanceof $ && element.get(0) instanceof Element) || element instanceof Element
This will check for even if it is a jQuery or JavaScript DOM element
The only way to guarentee you're checking an actual HTMLEement, and not just an object with the same properties as an HTML Element, is to determine if it inherits from Node, since its impossible to make a new Node() in JavaScript. (unless the native Node function is overwritten, but then you're out of luck). So:
function isHTML(obj) {
return obj instanceof Node;
}
console.log(
isHTML(test),
isHTML(ok),
isHTML(p),
isHTML(o),
isHTML({
constructor: {
name: "HTML"
}
}),
isHTML({
__proto__: {
__proto__: {
__proto__: {
__proto__: {
constructor: {
constructor: {
name: "Function"
},
name: "Node"
}
}
}
}
}
}),
)
<div id=test></div>
<blockquote id="ok"></blockquote>
<p id=p></p>
<br id=o>
<!--think of anything else you want--!>
In PHP you can do if(isset($array['foo'])) { ... }. In JavaScript you often use if(array.foo) { ... } to do the same, but this is not exactly the same statement. The condition will also evaluate to false if array.foo does exists but is false or 0 (and probably other values as well).
What is the perfect equivalent of PHP's isset in JavaScript?
In a broader sense, a general, complete guide on JavaScript's handling of variables that don't exist, variables without a value, etc. would be convenient.
Update: 11 years and 11 months ago I posted this question, and wow, it still gets a lot of activity. Now, I'm pretty sure that when I wrote this, I only wanted to know how to check for the presence of a property in an associative array (a.k.a. dictionary), and as such the correct (for me) answers involve hasOwnProperty or the in operator. I wasn't interested in checking local or global variables.
But while I remember that well, that intent is not quite clear in the question as written, or even directly contradicted by it! I never mentioned the associative array, and PHP's isset does also do those other things. Let this be a lesson to all of us about how important it is to properly state your requirements in a question, and also how global variables, local variables, object properties, dictionary keys and what-have-you aren't Huey, Dewey, and Louie.
In the meantime (heh), many many people have provided answers to that effect as well, so for those of you who found this question through Google, well, I'm glad my vagueness helped in a way I guess. Anyway, just wanted to clarify that.
I generally use the typeof operator:
if (typeof obj.foo !== 'undefined') {
// your code here
}
It will return "undefined" either if the property doesn't exist or its value is undefined.
(See also: Difference between undefined and not being defined.)
There are other ways to figure out if a property exists on an object, like the hasOwnProperty method:
if (obj.hasOwnProperty('foo')) {
// your code here
}
And the in operator:
if ('foo' in obj) {
// your code here
}
The difference between the last two is that the hasOwnProperty method will check if the property exist physically on the object (the property is not inherited).
The in operator will check on all the properties reachable up in the prototype chain, e.g.:
var obj = { foo: 'bar'};
obj.hasOwnProperty('foo'); // true
obj.hasOwnProperty('toString'); // false
'toString' in obj; // true
As you can see, hasOwnProperty returns false and the in operator returns true when checking the toString method, this method is defined up in the prototype chain, because obj inherits form Object.prototype.
Age old thread, but there are new ways to run an equivalent isset().
ESNext (Stage 4 December 2019)
Two new syntax allow us to vastly simplify the use of isset() functionality:
Optional Chaining(?.)
Nullish Coalescing Operator(??)
Please read the docs and mind the browser compatibility.
Answer
See below for explanation. Note I use StandardJS syntax
Example Usage
// IMPORTANT pass a function to our isset() that returns the value we're
// trying to test(ES6 arrow function)
isset(() => some) // false
// Defining objects
let some = { nested: { value: 'hello' } }
// More tests that never throw an error
isset(() => some) // true
isset(() => some.nested) // true
isset(() => some.nested.value) // true
isset(() => some.nested.deeper.value) // false
// Less compact but still viable except when trying to use `this` context
isset(function () { return some.nested.deeper.value }) // false
Answer Function
/**
* Checks to see if a value is set.
*
* #param {Function} accessor Function that returns our value
* #returns {Boolean} Value is not undefined or null
*/
function isset (accessor) {
try {
// Note we're seeing if the returned value of our function is not
// undefined or null
return accessor() !== undefined && accessor() !== null
} catch (e) {
// And we're able to catch the Error it would normally throw for
// referencing a property of undefined
return false
}
}
NPM Package
This answer function is available as the isset-php package on NPM. The package contains a few improvements such as type checking and supporting multiple arguments.
npm install --save isset-php
The full documentation is available in the README.
const isset = require('isset-php')
let val = ''
// This will evaluate to true so the text will be printed.
if (isset(() => val)) {
console.log('This val is set so I will print.')
}
Explanation
PHP
Note that in PHP you can reference any variable at any depth - even trying to
access a non-array as an array will return a simple true or false:
// Referencing an undeclared variable
isset($some); // false
$some = 'hello';
// Declared but has no depth(not an array)
isset($some); // true
isset($some['nested']); // false
$some = ['nested' => 'hello'];
// Declared as an array but not with the depth we're testing for
isset($some['nested']); // true
isset($some['nested']['deeper']); // false
JavaScript
In JavaScript, we don't have that freedom; we'll always get an error if we do
the same because the engine is immediately attempting to access the value of deeper before we can wrap it in our isset() function so...
// Common pitfall answer(ES6 arrow function)
const isset = (ref) => typeof ref !== 'undefined'
// Same as above
function isset (ref) { return typeof ref !== 'undefined' }
// Referencing an undeclared variable will throw an error, so no luck here
isset(some) // Error: some is not defined
// Defining a simple object with no properties - so we aren't defining
// the property `nested`
let some = {}
// Simple checking if we have a declared variable
isset(some) // true
// Now trying to see if we have a top level property, still valid
isset(some.nested) // false
// But here is where things fall apart: trying to access a deep property
// of a complex object; it will throw an error
isset(some.nested.deeper) // Error: Cannot read property 'deeper' of undefined
// ^^^^^^ undefined
More failing alternatives:
// Any way we attempt to access the `deeper` property of `nested` will
// throw an error
some.nested.deeper.hasOwnProperty('value') // Error
// ^^^^^^ undefined
// Similar to the above but safe from objects overriding `hasOwnProperty`
Object.prototype.hasOwnProperty.call(some.nested.deeper, 'value') // Error
// ^^^^^^ undefined
// Same goes for typeof
typeof some.nested.deeper !== 'undefined' // Error
// ^^^^^^ undefined
And some working alternatives that can get redundant fast:
// Wrap everything in try...catch
try {
if (isset(some.nested.deeper)) {
// ...
}
} catch (e) {}
try {
if (some.nested.deeper !== undefined && some.nested.deeper !== null) {
// ...
}
} catch (e) {}
// Or by chaining all of the isset which can get long
isset(some) && isset(some.nested) && isset(some.nested.deeper) // false
// ^^^^^^ returns false so the next isset() is never run
Conclusion
All of the other answers - though most are viable...
Assume you're only checking to see if the variable is not undefined which
is fine for some use cases but can still throw an Error
Assume you're only trying to access a top level property, which again is
fine for some use cases
Force you to use a less than ideal approach relative to PHP's isset()
e.g. isset(some, 'nested.deeper.value')
Use eval() which works but I personally avoid
I think I covered a lot of it. There are some points I make in my answer that I
don't touch upon because they - although relevant - are not part of the
question(e.g. short circuiting). If need be, though, I can update my answer with links to some of the
more technical aspects based on demand.
I spent waaay to much time on this so hopefully it helps people out.
Thank-you for reading!
Reference to SOURCE
module.exports = function isset () {
// discuss at: http://locutus.io/php/isset/
// original by: Kevin van Zonneveld (http://kvz.io)
// improved by: FremyCompany
// improved by: Onno Marsman (https://twitter.com/onnomarsman)
// improved by: Rafał Kukawski (http://blog.kukawski.pl)
// example 1: isset( undefined, true)
// returns 1: false
// example 2: isset( 'Kevin van Zonneveld' )
// returns 2: true
var a = arguments
var l = a.length
var i = 0
var undef
if (l === 0) {
throw new Error('Empty isset')
}
while (i !== l) {
if (a[i] === undef || a[i] === null) {
return false
}
i++
}
return true
}
phpjs.org is mostly retired in favor of locutus
Here is the new link http://locutus.io/php/var/isset
if (!('foo' in obj)) {
// not set.
}
//
// tring to reference non-existing variable throws ReferenceError
// before test function is even executed
//
// example, if you do:
//
// if ( isset( someVar ) )
// doStuff( someVar );
//
// you get a ReferenceError ( if there is no someVar... )
// and isset fn doesn't get executed.
//
// if you pass variable name as string, ex. isset( 'novar' );,
// this might work:
//
function isset ( strVariableName ) {
try {
eval( strVariableName );
} catch( err ) {
if ( err instanceof ReferenceError )
return false;
}
return true;
}
//
//
This simple solution works, but not for deep object check.
function isset(str) {
return window[str] !== undefined;
}
I always use this generic function to prevent errrors on primitive variables as well as arrays and objects.
isset = function(obj) {
var i, max_i;
if(obj === undefined) return false;
for (i = 1, max_i = arguments.length; i < max_i; i++) {
if (obj[arguments[i]] === undefined) {
return false;
}
obj = obj[arguments[i]];
}
return true;
};
console.log(isset(obj)); // returns false
var obj = 'huhu';
console.log(isset(obj)); // returns true
obj = {hallo:{hoi:'hoi'}};
console.log(isset(obj, 'niet')); // returns false
console.log(isset(obj, 'hallo')); // returns true
console.log(isset(obj, 'hallo', 'hallo')); // returns false
console.log(isset(obj, 'hallo', 'hoi')); // returns true
This solution worked for me.
function isset(object){
return (typeof object !=='undefined');
}
If you are using underscorejs I always use
if (!_.isUndefined(data) && !_.isNull(data)) {
//your stuff
}
This is a pretty bulletproof solution for testing if a variable exists :
var setOrNot = typeof variable !== typeof undefined ? true : false;
Unfortunately, you cannot simply encapsulate it in a function.
You might think of doing something like this :
function isset(variable) {
return typeof variable !== typeof undefined ? true : false;
}
However, this will produce a reference error if variable variable has not been defined, because you cannot pass along a non-existing variable to a function :
Uncaught ReferenceError: foo is not defined
On the other hand, it does allow you to test whether function parameters are undefined :
var a = '5';
var test = function(x, y) {
console.log(isset(x));
console.log(isset(y));
};
test(a);
// OUTPUT :
// ------------
// TRUE
// FALSE
Even though no value for y is passed along to function test, our isset function works perfectly in this context, because y is known in function test as an undefined value.
window.isset = function(v_var) {
if(typeof(v_var) == 'number'){ if(isNaN(v_var)){ return false; }}
if(typeof(v_var) == 'undefined' || v_var === null){ return false; } else { return true; }
};
plus Tests:
https://gist.github.com/daylik/24acc318b6abdcdd63b46607513ae073
(typeof SOMETHING) !== 'undefined'
It's too long to write when used. But we can't package the typeof keyword into a function, because an error will thrown before the function is called, like this:
function isdef($var) {
return (typeof $var) !== 'undefined';
}
isdef(SOMETHING); ///// thrown error: SOMETHING is not defined
So I figured out a way:
function isdef($type) {
return $type !== 'undefined';
}
isdef(typeof SOMETHING);
It can work both with individual variables (variables that does not exist at all), or object properties (non-existent properties). And only 7 more characters than PHP isset.
function isset(variable) {
try {
return typeof eval(variable) !== 'undefined';
} catch (err) {
return false;
}
}
To check wether html block is existing or not, I'm using this code:
if (typeof($('selector').html()) != 'undefined') {
// $('selector') is existing
// your code here
}
Provide the object path as a string, then you can break this string into a path and resolve hasOwnProperty at each step while overwriting the object itself with each iteration.
If you are coding in ES6 environment, take a look at this stackoverflow Ques.
var a;
a = {
b: {
c: 'e'
}
};
function isset (obj, path) {
var stone;
path = path || '';
if (path.indexOf('[') !== -1) {
throw new Error('Unsupported object path notation.');
}
path = path.split('.');
do {
if (obj === undefined) {
return false;
}
stone = path.shift();
if (!obj.hasOwnProperty(stone)) {
return false;
}
obj = obj[stone];
} while (path.length);
return true;
}
console.log(
isset(a, 'b') == true,
isset(a, 'b.c') == true,
isset(a, 'b.c.d') == false,
isset(a, 'b.c.d.e') == false,
isset(a, 'b.c.d.e.f') == false
);
I use a function that can check variables and objects. very convenient to work with jQuery
function _isset (variable) {
if(typeof(variable) == "undefined" || variable == null)
return false;
else
if(typeof(variable) == "object" && !variable.length)
return false;
else
return true;
};
Try to create function like empty function of PHP in Javascript.
May this helps.
function empty(str){
try{
if(typeof str==="string"){
str=str.trim();
}
return !(str !== undefined && str !== "undefined" && str !== null && str!=="" && str!==0 && str!==false);
}catch(ex){
return true;
}
}
console.log(empty(0))//true
console.log(empty(null))//true
console.log(empty(" "))//true
console.log(empty(""))//true
console.log(empty(undefined))//true
console.log(empty("undefined"))//true
var tmp=1;
console.log(empty(tmp))//false
var tmp="Test";
console.log(empty(tmp))//false
var tmp=" Test ";
console.log(empty(tmp))//false
var tmp={a:1,b:false,c:0};
console.log(empty(tmp.a))//false
console.log(empty(tmp.b))//true
console.log(empty(tmp.c))//true
console.log(empty(tmp.c))//true
console.log(empty(tmp.c.d))//true
finally i solved problem with easy solution :
if (obj && obj.foo && obj.foo='somethings'){
console.log('i,m work without error')
}
PHP Manual say:
isset — Determine if a variable is set and is not NULL
And interface something like this:
bool isset ( mixed $var [, mixed $... ] )
The parameter $var is the variable to be checked. it can have any number of parameter though.
isset() returns TRUE if var exists and has value other than NULL. FALSE otherwise.
Some example:
$foo = 'bar';
var_dump(isset($foo)); -> true
$baz = null;
var_dump(isset($baz)); -> false
var_dump(isset($undefined)); -> false
As this in mind, Apparently, It's not possible to write exact equivalent of php isset() function.
For example when we call like this:
if (isset(some_var)) {
}
function issset() {
// function definition
}
Javascript trigger Uncaught ReferenceError: some_var is not defined at (file_name):line_number.
The important and remarkable thing about this behavior is that when trying to pass non-existent variables to normal functions, an error is triggered.
But in PHP isset() are not actually regular functions but language constructs. That means they're part of the PHP language itself, do not play by the normal rules of functions and can hence get away with not triggering an error for non-existent variables. This is important when trying to figure out whether a variable exists or not. But in javscript, it triggers an error in the first place say function call with non-existent variables.
My point is that we can't write it as equivlent javscript function but we can do something like this
if (typeof some_var !== 'undefined') {
// your code here
}
If you want exact same effect PHP also check varable is not NULL
For example
$baz = null;
var_dump(isset($baz)); -> false
So, we can incorporate this into javascript then it look like this:
if (typeof some_var !== 'undefined' && some_var !== null) {
// your code here
}
It was really a problem for me when I was accessing a deeper property of an object so I made a function which will return the property value if exist otherwise it will return false. You may use it to save your time,
//Object on which we want to test
var foo = {
bar: {
bik: {
baz: 'Hello world'
}
}
};
/*
USE: To get value from the object using it properties supplied (Deeper),
if found it will return the property value if not found then will return false
You can use this function in two ways
WAY - 1:
Passing an object as parameter 1 and array of the properties as parameter 2
EG: getValueFromObject(foo, ['bar', 'bik', 'baz']);
WAY - 2: (This will work only if, your object available in window object)
Passing an STRING as parameter 1(Just similarly how we retrieve value form object using it's properties - difference is only the quote)
EG: getValueFromObject('foo.bar.bik.baz');
*/
function getValueFromObject(object, properties) {
if(typeof(object) == 'string') { //Here we extract our object and it's properties from the string
properties = object.split('.');
object = window[properties[0]];
if(typeof(object) == 'undefined') {
return false;
}
properties.shift();
}
var property = properties[0];
properties.shift();
if(object != null && typeof(object[property]) != 'undefined') {
if(typeof(object[property]) == 'object') {
if(properties.length != 0) {
return getValueFromObject(object[property], properties); //Recursive call to the function
} else {
return object[property];
}
} else {
return object[property];
}
} else {
return false;
}
}
console.log(getValueFromObject('fooo.bar.bik.baz')); //false
console.log(getValueFromObject('foo.bar.bik.baz')); //Hello world
console.log(getValueFromObject('foo')); //false
console.log(getValueFromObject('foo.bar.bik')); //returns an object { baz: 'Hello World' }
console.log(getValueFromObject(foo, ['bar', 'bik'])); //returns an object { baz: 'Hello World' }
console.log(getValueFromObject(foo, ['bar', 'bik', 'baz']));//Hello world
If you want to check if an element exists, just use the following code:
if (object) {
//if isset, return true
} else {
//else return false
}
This is sample:
function switchDiv() {
if (document.querySelector("#divId")) {
document.querySelector("#divId").remove();
} else {
var newDiv = document.createElement("div");
newDiv.id = "divId";
document.querySelector("body").appendChild(newDiv);
}
}
document.querySelector("#btn").addEventListener("click", switchDiv);
#divId {
background: red;
height: 100px;
width: 100px;
position: relative;
}
<body>
<button id="btn">Let's Diiiv!</button>
</body>
Be careful in ES6, all the previous solutions doesn't work if you want to check a declaration of a let variable and declare it, if it isn't
example
let myTest = 'text';
if(typeof myTest === "undefined") {
var myTest = 'new text'; // can't be a let because let declare in a scope
}
you will see a error
Uncaught SyntaxError: Identifier 'myTest' has already been declared
The solution was to change it by a var
var myTest = 'text'; // I replace let by a var
if(typeof myTest === "undefined") {
var myTest = 'new text';
}
another solution if you can change a let by a var, you need to remove your var
let myTest = 'text';
if(typeof myTest === "undefined") {
myTest = 'new text'; // I remove the var declaration
}
try {
const value = array.foo.object.value;
// isset true
} catch (err) {
// isset false
}
use this function for arrays or nested array (but not for strings)
if(isset(array,'key1=>key1')){alert('isset');}
https://jsfiddle.net/dazzafact/cgav6psr/
arr={nested:{nested2:{val:'isset'}}}
if(t=isset(arr,'nested=>nested2=>val','=>')){
alert(t)
}
function isset(obj,nested,split) {
var sep=split || '.';
var dub=obj
var isset=false
if(typeof(obj)!="undefined" && typeof(nested)!="undefined"){
var arr=nested.split(sep);
for(var k in arr){
var key=arr[k];
if(typeof(dub[key])=="undefined"){
isset=false;
break;
}
dub=dub[key];
isset=dub
}
}
return isset;
}
isset('user.permissions.saveProject', args);
function isset(string, context) {
try {
var arr = string.split('.');
var checkObj = context || window;
for (var i in arr) {
if (checkObj[arr[i]] === undefined) return false;
checkObj = checkObj[arr[i]];
}
return true;
} catch (e) {
return false;
}
}
if (var) {
// This is the most concise equivalent of Php's isset().
}
javascript isset
let test = {
a: {
b: [0, 1]
}
};
console.log(test.isset('a.b')) // true
console.log(test.isset('a.b.1')) // true
console.log(test.isset('a.b.5')) // false
console.log(test.isset('a.c')) // false
console.log('abv'.isset('0')) // true
This is the most concise equivalent of Php's isset() :
if(var == undefined)
true this is var !isset
false this is var isset