Javascript - how to avoid multiple if condition checks when checking if object has a property?

Question

How can I avoid such long if conditions?

if (typeof window.checkoutConfig.shipping !== "undefined") {
    if (typeof window.checkoutConfig.shipping.rules !== "undefined") {
        if (typeof window.checkoutConfig.shipping.rules.express !== "undefined") {
            if (typeof window.checkoutConfig.shipping.rules.express.express_note !== "undefined") {
                this.expressNote(window.checkoutConfig.shipping.rules.express.express_note || "");
            }
        }
    }
}

Is there a method which I can use instead, for example (pseudo code): isset(window.checkoutConfig.shipping.rules.express.express_note).

Gaetan C. · Answer 1 · 2020-10-27T11:34:47.953

1

Take a look at the optional chaining operator.

It will allow you to write:

window.checkoutConfig.shipping?.rules?.express?.express_note

As mentionned in the comments, you may want to use babel to make it compatible with older browsers.

var a = {};
a?.b?.c

will be compiled as:

var _a$b;
var a = {};
a == null ? void 0 : (_a$b = a.b) == null ? void 0 : _a$b.c;

edited Oct 27 '20 at 11:34

answered Oct 27 '20 at 11:26

Gaetan C.

1,742
13
21

C'mon I was about to answer with this but you beat me to it – Oct 27 '20 at 11:27
1

This only protects against `null` and `undefined` values - logic that depends on `typeof` of `instanceof` still needs more complicated guard logic. – Dai Oct 27 '20 at 11:27
3

Worth noting that you'd have a bad time if you are trying to support browsers older than 2020. – php_nub_qq Oct 27 '20 at 11:29
Is there also an alternative which is supported by older browsers? – Black Oct 27 '20 at 11:31
Of course you can use babel to make to compatible with older browsers – Gaetan C. Oct 27 '20 at 11:32
@GaetanC., nice, i did not know about babel. Thank you – Black Oct 27 '20 at 11:41

score 1 · Accepted Answer · answered Oct 27 '20 at 11:31

1

You could just try.

try {
  this.expressNote(window.checkoutConfig.shipping.rules.express.express_note || "");
} catch (e) {
  // meh
}

answered Oct 27 '20 at 11:31

php_nub_qq

15,199
21
74
144

score 0 · Answer 3 · answered Oct 27 '20 at 11:28

ES2020 introduced optional chaining, to prevent errors like Cannot read property of undefined. Just add a ? before each optional property: window.checkOutConfig.shipping?.rules?.express?.express_note will return undefined if the property does not exist but the property's value if it does.

Javascript - how to avoid multiple if condition checks when checking if object has a property?

3 Answers3

Linked