Interview question
What are optional chaining (?.) and nullish coalescing (??) operators? Optional chaining (?.) और nullish coalescing (??) operators क्या हैं?
Answer
Both operators were introduced to safely handle null/undefined values without verbose manual checks.
| Operator | Purpose |
|---|---|
| ?. (optional chaining) | Safely accesses nested properties, returns undefined instead of throwing if a link is null/undefined |
| ?? (nullish coalescing) | Returns the right-hand value only if the left is null or undefined (not other falsy values) |
// Without optional chaining - verbose and error-prone
const user = { address: { city: 'NYC' } };
const city1 = user && user.address && user.address.city;
// With optional chaining
const city2 = user?.address?.city;
console.log(city2); // NYC
// Safe when a property doesn't exist
const zip = user?.address?.zip?.code;
console.log(zip); // undefined - no error thrown
// Optional chaining with function calls
const obj = { greet: () => 'Hello' };
console.log(obj.greet?.()); // Hello
console.log(obj.sayBye?.()); // undefined - method doesn't exist, no error
// Optional chaining with array access
const arr = { items: [1, 2, 3] };
console.log(arr.items?.[0]); // 1
console.log(arr.missing?.[0]); // undefined
// NULLISH COALESCING - only null/undefined trigger the fallback
const count = 0;
console.log(count || 10); // 10 - WRONG, 0 is falsy so || triggers fallback
console.log(count ?? 10); // 0 - CORRECT, 0 is not null/undefined
const emptyString = '';
console.log(emptyString || 'default'); // 'default' - falsy triggers ||
console.log(emptyString ?? 'default'); // '' - '' is not nullish
// Combining both operators
const settings = { theme: null };
const theme = settings?.theme ?? 'light'; // light, because theme is explicitly null
console.log(theme);दोनों operators null/undefined values को safely handle करने के लिए introduce किए गए थे, बिना verbose manual checks के।
| Operator | उद्देश्य |
|---|---|
| ?. (optional chaining) | Nested properties को safely access करता है |
| ?? (nullish coalescing) | Sिर्फ null/undefined होने पर right value देता है |
// Optional chaining के बिना
const user = { address: { city: 'NYC' } };
const city1 = user && user.address && user.address.city;
// Optional chaining के साथ
const city2 = user?.address?.city;
console.log(city2); // NYC
const zip = user?.address?.zip?.code;
console.log(zip); // undefined, error नहीं
// Function calls के साथ
const obj = { greet: () => 'Hello' };
console.log(obj.greet?.()); // Hello
console.log(obj.sayBye?.()); // undefined
// Array access के साथ
const arr = { items: [1, 2, 3] };
console.log(arr.items?.[0]); // 1
// NULLISH COALESCING
const count = 0;
console.log(count || 10); // 10 - गलत
console.log(count ?? 10); // 0 - सही
const emptyString = '';
console.log(emptyString || 'default'); // 'default'
console.log(emptyString ?? 'default'); // ''
// साथ combine करना
const settings = { theme: null };
const theme = settings?.theme ?? 'light';
console.log(theme); // lightWas this answer clear?