➕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"
// -------------------------------

⭐️ 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❗

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

the right for optional chaining

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

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

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

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

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

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

ℹ️ supports optional chaining.

⭐️ 注意：

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

replit ⟩ ( support：❌ )

💊 解藥：

👉 obj . prop / obj [ prop ] (non-optional chaining).
👉 condition ? a : b
✅ use obj ?. prop default to provide default value.
🩹 use instead if ?. not supported.
ℹ️ / punctuators are used in this operator.

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 2 years ago

Was this helpful?

// ⭐️ 1. prop: invalid identifier // ------------------------------ undeclared ?. 1 = 'bad'; // ⛔ SyntaxError: Unexpected token // ^ // ⭐️ 2. obj: "undeclared" // ------------------------------- undeclared ?. prop; // ⛔ ReferenceError: 'undeclared' is not defined // ⭐️ 3. obj: "nullish" // -------------------------------

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