> ## Documentation Index
> Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt
> Use this file to discover all available pages before exploring further.
# JavaScript 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
```javascript theme={"dark"}
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
```javascript theme={"dark"}
// 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.
```javascript theme={"dark"}
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
```
Tired of Poor JavaScript Skills? Fix That With Deep Grasping!
Learn More
