Optional chaining in JavaScript In Hindi | JS Optional chaining In Hindi

If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.

JS Optional Chaining

Normally JavaScript में जब हम किसी Object के अंदर available किसी undeifned object की किसी भी ऐसी property / function को access करते हैं जो define नहीं है तो हमें Error मिलती है। जैसे -

Copy
let bike = {
  name : 'Yamah R15M',
  details : {
    color : 'Black'
  }
};
console.log(bike.model.color);

Uncaught TypeError: group.model is undefined

अब example में defined bike Object में कोई model नाम का object नहीं है , इसीलिए इसकी color property को access करने पर आपको error दिखी।

JS Optional Chaining Operator

JavaScript में optional chaining operator का main purpose , किसी Object के अंदर available किसी दुसरे object की undefined property या function को बिना Error Through किये access करना है।

Optional Chaining Operator Syntax

इसे normally ?. से represent किया जाता है , और इसे कुल 3 तरह से use किया जाता है तो obviously इसके 3 syntax कुछ इस प्रकार हैं -

obj.val?.prop
obj.val?.[expr]
obj.func?.(args)

ध्यान रहे जब ?. से पहले की value (left value) null या undefined है तभी ?. के बाद की value (right side) evaluate होती है , जिसकी वजह से error आने की वजाय undefined मिलता है।

JS Optional Chaining Operator

जैसे ऊपर दिए गए same example को अगर आप optional chaining operator के through करेंगे तो output में आपको undefined मिलेगा।

Copy
let group = {
  name : 'Yamah R15M',
  details : {
    color : 'Black'
  }
};
console.log(group.model?.color); // Output : undefined

Optional chaining with function call

ठीक property की तरह ही आप इसे किसी undefined method को call करते time भी use कर सकते हैं , जैसे -

Copy
let group = {
  name : 'Yamah R15M',
};
console.log(group.showName?.()); // Output : undefined

आप function में defined parameters के according function call करते time ?. के बाद में use किये गए parenthesis ?.(value1, value2) में values भी pass कर सकते हैं।

I Hope, आपको अब तक ये समझ आ गया होगा कि Optional Chaining Operator क्या है और इसे क्यों use किया जाना चाहिए , आगे इसके कुछ और different syntax के examples देखेंगे।

***

Optional chaining with expressions

तो अभी तक आपने property और function call के साथ Optional Chaining Operator को use किया अब एक expression वाला example भी समझ लेते हैं।

इसे normally Array के use किया जाता है , जिसमे हम brackets [] में index pass करते हैं।

Copy
function showValue(arr) {
  console.log(arr?.[5]);
}

showValue([4,3,5,2]);  // Output : undefined

// now, don't pass any array
showValue(); // Output : undefined

Combining with the nullish coalescing operator

इसका सबसे ज्यादा use Nullish Coalescing Operator के साथ किया जाता है , जिसका main reason हैं कि Optional Chaining Operator , undefined return करता है अगर left side की value null या undefined हुई।

Nullish Coalescing Operator के साथ use करने पर हम एक default value return करा सकते हैं।

Copy
let group = {
  name : 'Yamah R15M',
  details : {
    color : 'Black'
  }
};

let res = group.model?.color ?? "Not Found !";
console.log(res); // Output : Not Found !

इसके अलावा default value set करने के लिए आप OR (||) operator का use भी कर सकते हैं।

For Example

Copy
let res = group.model?.color || "Not Found !";
console.log(res); // Output : Not Found !

i Hope, अब आप JavaScript में Optional Chaining Operator के बारे में clear हो गए होंगे।