Reaching Into Nested Data With ?.

Reaching Into Nested Data With ?.

In this lesson, you ported Python’s chain of .get() calls for the customer’s phone number, and met the JavaScript operator that reads nested data safely.

• The phone lives in a customer block, and guest checkouts such as order 1042 don’t have one. The Python script reads it with order.get("customer", {}).get("phone", "no phone"): the first .get() falls back to an empty dict, and the second asks that dict for the phone and gets its default.
• JavaScript objects have no .get(), and a missing key reads as undefined, so the natural port is order.customer.phone ?? "no phone". JavaScript stops with TypeError: Cannot read properties of undefined (reading 'phone'), the stack trace points to line 3 with the caret under phone, and the log never runs.
• order.customer is a missing key, so it reads as undefined with no error. The next step asks undefined for its phone, and undefined has no properties, JavaScript’s word for an object’s keys, so reading one throws. Watch out: only the first missing level reads as undefined, and the level after it throws. The error comes before ?? runs, so the default never gets a chance.
• Python’s chain works because the first .get() hands back an empty dict, which has a .get() of its own. undefined isn’t an empty object.
• The optional chaining operator, ?., checks the value on its left. When that value is undefined or null, it stops and gives undefined for the whole chain. Otherwise, it reads the next key, as a dot does. It checks only the value straight to its left, so any later step that can be missing needs its own.
• With ?? after it, order.customer?.phone ?? "no phone" reads like Python’s chain, with one difference: Python’s {} default covers only a missing key, so a customer of None would still break the Python chain, but ?. stops on null too.
• The line prints Phone: no phone for order 1042 and Phone: +44 7700 900461 for order 1043. Order 1044’s customer block has no phone, and it prints Phone: no phone too: the customer is there, so the chain reads on, and the missing phone is the first missing level.
• Put ?. exactly where the data can be missing, and finish with ?? when you need a default.
• Watch out for adding ?. everywhere to be safe: a required field, like order.billing_address, should fail loudly where it’s read, not turn into undefined far away.
• ?. also works before brackets and before a method call, a topic for later.

Here’s the phone step in the Python script, with order 1042 trimmed to its ID:

order = {"id": 1042}

phone = order.get("customer", {}).get("phone", "no phone")
print(f"Phone: {phone}")