Optional Function Call

The ?.() operator is the function call variant of the optional chaining operator. It allows a function or method to be invoked only if the reference to that function evaluates to a non-nullish value (neither null nor undefined). If the reference is nullish, the expression short-circuits and evaluates to undefined instead of throwing a TypeError.

Syntax

functionReference?.(arg1, arg2)
object.methodReference?.(arg1, arg2)

Execution Mechanics

1. Nullish Validation: The operator evaluates the left-hand side (LHS) expression. If the LHS is strictly null or undefined, the invocation is aborted, and the entire expression returns undefined.
2. Absence of Type Checking: The ?.() operator does not verify that the LHS is actually a function. It only verifies that it is not nullish. If the LHS evaluates to a truthy or falsy non-function value (e.g., 42, true, {}, or ""), the engine will attempt to invoke it, resulting in a TypeError: ... is not a function.
3. Short-Circuit Evaluation: If the LHS is nullish, the JavaScript engine halts evaluation of the current expression immediately. Consequently, any expressions passed as arguments inside the parentheses are never evaluated.
4. Context Preservation: When used for method invocation (object.method?.()), the this context is preserved and correctly bound to object. This ensures the method executes with the same context as a standard object.method() call, avoiding the loss of this that occurs in detached function calls where the Reference Record is lost, such as when using the comma operator ((0, object.method)?.()) or assigning the method to a separate variable (let fn = object.method; fn?.()).

Syntax Restrictions

The optional chaining operator cannot be applied to certain invocation patterns. Doing so violates language grammar and throws a SyntaxError:

• Constructor Invocation: Cannot be used with the new keyword (new Constructor?.()).
• Tagged Template Literals: Cannot be used to optionally invoke a template tag (tag?.`template`).

Behavioral Examples

// 1. Nullish reference: Short-circuits to undefined
let callback = null;
let result = callback?.(10, 20); 
// result === undefined

// 2. Valid function reference: Executes normally
let multiply = (a, b) => a * b;
let product = multiply?.(5, 4); 
// product === 20

// 3. Short-circuiting prevents argument evaluation
let counter = 0;
let missingFunction = undefined;
missingFunction?.(counter++); 
// counter === 0 (the increment expression is never reached)

// 4. Non-function, non-nullish reference: Throws TypeError
let notAFunction = "string";
notAFunction?.(); 
// TypeError: notAFunction is not a function

// 5. Context preservation: 'this' remains bound to the object
const obj = {
    value: 42,
    getValue() { return this.value; }
};
let val = obj.getValue?.(); 
// val === 42

Method Chaining and Short-Circuit Propagation

When chaining property access and method calls, a single ?. short-circuits the entirety of the subsequent expression chain.

If an object might be nullish, placing the optional chaining operator on the object reference (nullObj?.method()) is correct and sufficient. The initial ?. prevents both the property access (.method) and the invocation (()) from executing.

let nullObj = null;

// Correct: The first ?. short-circuits the entire property access and function call
nullObj?.method(); // Returns undefined

// Redundant: The second ?. is unnecessary unless `method` itself 
// might be nullish when `nullObj` is successfully resolved.
nullObj?.method?.(); // Returns undefined

Master JavaScript with Deep Grasping Methodology!

Learn More