➕optional chaining (?., ?.[])

`obj ?. prop` syntax. 🚧 under construction -> SyntaxError: Unexpected token

JS ⟩ statement ⟩ expression ⟩ operator ⟩ left-hand side ⟩
JS ⟩ value ⟩ object ⟩ property ⟩ access ⟩ optional chaining (?.)

(operator) (⭐️ ES2020) (🌟 chaining rules | table of operators )

obj?.prop returns undefined if obj is nullish.

obj  ?. prop        // dot notation
obj  ?. [ expr ]    // bracket notation
func ?. ( args )    // conditional invocation

🈯 synonyms："conditional property access", "optional chaining"

codepen：optional chaining

// ⭐️ 1. prop: invalid identifier
// ------------------------------
undeclared ?. 1 = 'bad';  // ⛔ SyntaxError: Unexpected token
//            ^

// ⭐️ 2. obj: "undeclared"
// -------------------------------
undeclared ?. prop;       // ⛔ ReferenceError: 'undeclared' is not defined

// ⭐️ 3. obj: "nullish"
// -------------------------------
null ?. prop              // ❗ undefined

// ⭐️ 4. obj: not "nullish"
// -------------------------------
(18) ?. prop;            // ❗ undefined (no such `prop`)
(18) ?. toString(16);    // ❓ "12" (property value, could be any value)

// test object
let person = {
    
    name   : 'Tom',
    age    : 28,
    address: { street: 'Fifth Ave.', no: '23' },
    hobbies: ['TV', 'Game'],
    
    eat(food) { return 'poop' }
};
    
'------------ person ------------',

// ❗ "root" object (person) is NEVER protected

person ?. name,                 // "Tom"
//        ╰🛡️╯                
person ?. hobby,                // undefined
//        ╰🛡️─╯
person ?. address ?. street,    // "Fifth Ave."
//        ╰─🛡️──╯    ╰─🛡️─╯ 
person . address ?. district,   // undefined (✅ address: non-nullish)
//       ╰─❗──╯    ╰──🛡️──╯
person . hobby ?. [1],          // undefined (✅ hobby: nullish, protected)
//       ╰❗─╯   ╰🛡️╯ 
person . hobbies ?. [2],        // undefined (✅ hobbies: non-nullish)
//       ╰─❗──╯   ╰🛡️╯ 
person ?. eat ?. ('egg'),       // "poop"    (✅ eat: non-nullish)
//       ╰🛡️╯    ╰─🛡️──╯ 
person ?. make ?. (something),  // undefined (✅ make: direct prop, protected, short-circuiting)
//       ╰🛡️─╯    ╰───🛡️────╯


// jane
let jane = { 
    home     : null,
    boyfriend: { name: 'Joe' }
};

'------------ jane ------------',

// ❗ "root" object (jane) is NEVER protected

jane .  home,            // null (prop value)
//      ╰❗╯
jane ?. home,            // null (jane: non-nullish, = jane.home)
//      ╰🛡️╯ 

// 🛡️: "?." protect "nullish" obj and "direct" prop
// ❗: no protection, could be undeclared / nullish / error
// -----------------------------------------------------------
jane . home ?. c  ,          // undefined (✅ home: null, protected)
//     ╰❗╯   ╰🛡️╯ 
jane . home ?. ['hello'],    // undefined (✅ home: null, protected)
//     ╰❗╯   ╰───🛡️───╯ 

jane . home ?.  c .  d ,     // undefined (✅ home: null, short-circuiting)
//     ╰❗╯   ╰🛡️╯ ╰❗╯

// ╭─ UD ─╮         // UD: UnDefined
// (a.b?.c).d,      // ❌ DON'T DO THIS! (⛔ TypeError❗)
//       ^

jane . boyfriend ?. name,    // 'Joe' ( ✅ boyfriend: non-nullish)
//     ╰──❗───╯    ╰🛡️╯   
jane . boyfriend ?. money,   // undefine ( ✅ money: direct prop, protected)
//     ╰──❗───╯    ╰🛡️─╯   

jane . boyfriend ?. money . more,  // ⛔ TypeError (accessing `undefined.more`)
//     ╰──❗───╯    ╰🛡️─╯  ╰❗─╯      // (❌ more: not protected)

jane . boyfriend ?. money ?. more, // undefined ✅ (more: direct prop, protected)
//     ╰──❗───╯    ╰🛡️─╯   ╰🛡️─╯

⭐️ the variable before ?. must be declared❗️

// ╭───❗️───╮  <----- ⭐️ "root" object is NEVER protected❗️
   undeclared?.address;
// ⛔ ReferenceError: `undeclared` is not defined

jane.boyfriend?.money.more

?. only protects nullish obj and direct prop❗

// 🛡️ "?." only protects "nullish obj" and "direct prop"
// ❗ "."  provides NO protection.
// ❗ "root" object is NEVER protected.
jane . boyfriend ?. name          // ✅ boyfriend: non-nullish, ok.
//     ╰──❗───╯    ╰🛡️╯        
jane . boyfriend ?. money . more  // ✅ money: direct prop, protected.
//     ╰──❗───╯   ╰─🛡️─╯  ╰❗╯  // ❗ more: not protected, error may occur.

⭐️ use ?. for reading / deleting, but not writing❗️

user?.name           // ✅ read if exists
delete user?.name    // ✅ delete if exists.

user?.name = "John"  // ⛔ SyntaxError
// Invalid left-hand side in assignment
// this is literally `undefine = "John"`❗️

the right bracket notation [] for optional chaining

obj ?. [ expr ]     // ✅ there's a tiny "dot" ❗️ 
obj ?  [ expr ]     // ❌ wrong syntax

while optional chaining, don't use (...) in the middle to prevent "short-circuiting" from happening❗

let a = { b: null };

a.b?.c.d,        // ✅ this is OK (⭐ "short-circuiting" works.)

// ╭─ UD ─╮      // UD: undefined
   (a.b?.c).d,   // ❌ DON'T DO THIS! (⛔ TypeError❗)
//          ^

⭐ ?. protects nullish obj and direct prop, so if obj：declared, prop：identifier, then it's totally safe to call obj ?. prop.

⭐ 「不確定存不存在」的物件或屬性，才需要用 ?.

⭐ use ?. instead to guard againt obj.prop, should obj be nullish❗

⭐ use ?. followed by ?? to provide a default value.

const city = user ?. city ?? "Unknown city"
//           ╰── O.C. ──╯    ╰─ default ──╯

ℹ️ replit.com (v16.13.2 > Node 14) supports ?.

ℹ️Google Apps Script supports optional chaining.

⭐️ 注意：

當瀏覽器或 JavaScript engine 沒有此功能時，可用 obj.prop(path) 或下面的方式解決：

replit ⟩ optional chaining ( support：❌ )

let user = {};
user.address;           // undefined

// ⛔ TypeError: 
// ----------------------------------------------
user.address.street;    //    Cannot read property 'street' of undefined
//           ^^^^^^

💊 解藥：

// ⭐️ 1. using (?:) operator
// -------------------------
// • access `user.address.street`
user.address ? user.address.street : undefined,    // undefined

// • access `user.address.street.name`
user.address
    ? (user.address.street ? user.address.street.name : null)
    : null;                                    // null

// ⭐️ 2. using (&&) operator
// -------------------------
// • access `user.address.street.name`
user.address 
    && user.address.street 
    && user.address.street.name;               // undefined

replit：optional chaining (use cases)

function square1(x, print) {
    if (print) { print(x) }    // before optional chaining
    return x * x;
}

function square2(x, print) {
    print ?. (x);              // ⭐ optional chaining
    return x * x;
}

Previousbracket notation []Nextis Optional Chaining Supported?

Last updated 3 years ago

Was this helpful?