We Keep Coding

How to check for availability for a nested variable without checking all the preceding variable availability, in ReactNative?

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();
}

strict equality check for undefined

I cant seem to figure this answer out so maybe you could help shed some light. In my defense, undefined is a message returned when a variable, key, value etc could not be found. A message should be a string? No?
let foo = [{id: 1, you: "me"}]
let undif = foo.find(i => i.he === 1)
if (typeof undif === "undefined") {
console.log(undif) // not fired
}
if (typeof undif == undefined) {
console.log(undif) // not fired
}
if (typeof undif == 'undefined') {
console.log(undif) // fired!
}
Why cant I use typeof undif === 'undefined?

triple equals looks for both value and type;
hence undefined === 'undefined' will return false
for same reason your first case returns true
This is a wonderful article on double equals and triple equals along with falsy value comparsion

Your code had syntax errors (missing the opening braces after every if), but once those are fixed, the first and third are both fired.
let foo = [{id: 1, you: "me"}]
let undif = foo.find(i => i.he === 1)
if (typeof undif === "undefined") {
console.log('1', undif) // fired
}
if (typeof undif == undefined) {
console.log('2', undif) // not fired
}
if (typeof undif == 'undefined') {
console.log('3', undif) // fired!
}

Getting strange error when running the following function

I am trying to do something like
HTML('slider1') = someimage;
But my HTML() function is not returning document.getElementById('slider1');
function HTML(id){
if(typeof value !== undefined){
return document.getElementById(id).innerHTML;
}
}

typeof allows the identifier to never have been declared before.
function HTML(id){
if(typeof value == "undefined")
{
//do nothing
}else{
return document.getElementById(id).innerHTML;
}
}
You can also try
if(typeof neverDeclared === typeof undefined) //also no errors and no strings

I think you are trying to assign some image through innerHTML, you may update your function to something like this
function HTML(id){
if(typeof value !== undefined){
return document.getElementById(id);
}
}
HTML('slider1').innerHTML = someimage;
//OR
function HTML(id, htmlChunk){
if(typeof value !== undefined){
document.getElementById(id).innerHTML = htmlChunk;
}
}
HTML('slider1',someimage);

srcElement not working in IE9

I've been putting together a lightweight event utility for cross-browser event handling, but have come across a rather high hurdle I can't quite jump over. It's concerning the srcElement property in IE9, which just isn't working for me!
Currently, my utility looks something like this (the srcElement is the 3rd code block):
var bonsallNS = new Object();
bonsallNS.events = {
addEvent: function (node, type, func) {
if (typeof attachEvent != "undefined") {
node.attachEvent("on" + type, func);
} else {
node.addEventListener(type, func, false);
}
},
removeEvent: function (node, type, func) {
if (typeof detachEvent != "undefined") {
node.detachEvent("on" + type, func);
} else {
node.removeEventListener(type, func, false);
}
},
target: function (e) {
if (typeof srcElement != "undefined") {
return window.event.srcElement;
} else {
return e.target;
}
},
preventD: function (e) {
if (typeof srcElement != "undefined") {
window.event.returnValue = false;
} else {
e.preventDefault();
}
}
}
Now, using the following test script below works fine in Chrome and Firefox, but returns the evtTarget to be undefined in IE when I try to alert it. I have NO idea why, so any help would be greatly appreciated! See below code:
var gClick = document.getElementById("clickme");
var gCount = 0;
function mssg(e){
var evtTarget = bonsallNS.events.target(e);
alert("it worked, target: " + evtTarget);
gCount++
if (gCount > 2){
bonsallNS.events.removeEvent(gClick, "click", mssg);
}
}
function setUp(){
bonsallNS.events.addEvent(gClick, "click", mssg);
}
bonsallNS.events.addEvent(window, "load", setUp);
Like I say, everything else works except for the event source in IE!!

The variable srcElement will always be undefined unless it's defined in a higher scope. But it will never refer to event.srcElement.
You can solve this problem in two ways: Either check whether e or e.srcElement are not defined, or whether window.event and window.event.srcElement are defined.
if (typeof e === "undefined" || typeof e.srcElement === "undefined") {
// or
if (typeof window.event !== "undefined" &&
typeof window.event.srcElement !== "undefined") {
You can also shorten the whole function to:
target: function (e) {
e = e || window.event;
return e.target || e.srcElement;
}

JavaScript typeof, alert and apply

1) Why in IE 8 typeof(window["alert"]) is "object" and not function?
2) How I can call apply method on "window.alert" ? I mean that what i'm trying to do is this:
function exec(method, param)
{
//because of typeof(window["alert"]) == "object" the actual if looks like typeof(window[method]) == 'function' || method == 'alert'
if(typeof(window[method]) == 'function')
{
window[method].apply(window, [param]);
}
}
exec("alert","hello");

typeof window['alert'] is a "function"... (tested with FF)
try this code (typeof instead typeOf())
function exec(method, param)
{
if(typeof window[method] == 'function')
{
window[method].apply(window, [param]);
}
}
exec("alert","hello");

typeof window["alert"] returns "object" in Internet Explorer versions below 9, but in Firefox it returns "function" . It's a known issue I guess. Below, here's an article that mentions it :
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/typeof?redirectlocale=en-US&redirectslug=Core_JavaScript_1.5_Reference%2FOperators%2FSpecial_Operators%2Ftypeof_Operator

typeof(window["alert"]) returns "function"
you have written typeOf. This works
function exec(method, param)
{
//because of typeof(window["alert"]) == "object" the actual if looks like typeof(window[method]) == 'function' || method == 'alert'
if(typeof(window[method]) == 'function')
{
window[method].apply(window, [param]);
}
}
exec("alert","hello");