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

Question

For example, in iOS Swift, I can do something like this:

if (self.user?.company?.pic?.phoneNumber != null) { doSomething() }

Without the need t

Answer 1

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

Answer 2

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