DEV Community

Cover image for JavaScript Optional Chaining(?.)
Md. Rony
Md. Rony

Posted on

JavaScript Optional Chaining(?.)

Optional Chaining কি?

Optional Chaining (?.) হল জাভাস্ক্রিপ্টের একটি ফিচার যা আপনাকে একটি ডিপলি নেস্টেড অবজেক্ট প্রপার্টি নিরাপদে অ্যাক্সেস করতে দেয়, যেটির প্রতিটি রেফারেন্স null বা undefined কিনা তা স্পষ্টভাবে চেক না করেই। যদি কোনো রেফারেন্স null বা undefined হয়, তাহলে optional chaining অপারেটর (?.) পরবর্তী প্রপারটি access বন্ধ করে দেয় এবং undefined রিটার্ন করে, কোনো ত্রুটি না করে।

এই ফিচারটি ECMAScript 2020 (ES11) এ যুক্ত হয়েছে এবং এটি এমন অবজেক্টগুলির সাথে কাজ করার সময় একটি পরিষ্কার এবং সংক্ষিপ্ত উপায় প্রদান করে যেগুলির মধ্যে কিছু প্রপার্টি অনুপস্থিত বা undefined হতে পারে।

Optional Chaining কেন ব্যবহার করবেন?

১. ত্রুটি এড়ায়: এটি আপনাকে undefined বা null অবজেক্টের প্রপার্টি অ্যাক্সেস করতে গিয়ে runtime ত্রুটি থেকে রক্ষা করে।

২. পরিষ্কার কোড: একাধিক চেক (যেমন if স্টেটমেন্ট বা লজিক্যাল AND অপারেটর &&) এর প্রয়োজনীয়তা দূর করে কোডকে সরল করে।

৩. রিডেবিলিটি উন্নত করে: এটি কোডকে আরও পড়ার উপযোগী এবং রক্ষণাবেক্ষণের জন্য সহজ করে তোলে।

৪. ফাংশন এবং অ্যারের সাথে কাজ করে: কেবল অবজেক্ট নয়, এটি ফাংশন বা অ্যারে এক্সিস্ট করে কিনা তা চেক করতেও ব্যবহৃত হয়।

Optional Chaining এর উদাহরণ:

ধরুন, আপনার একটি নেস্টেড অবজেক্ট আছে এবং আপনি ডিপলি নেস্টেড প্রপার্টি নিরাপদে অ্যাক্সেস করতে চান:

const user = {
  name: "Alice",
  address: {
    city: "Wonderland",
    zip: "12345"
  }
};

// নেস্টেড প্রপার্টি নিরাপদে অ্যাক্সেস করা
console.log(user.address?.city); // Output: Wonderland
console.log(user.address?.street); // Output: undefined (ত্রুটি ছাড়াই)

// আরও ডিপ প্রপার্টি অ্যাক্সেস করার চেষ্টা করা যা নেই
console.log(user.contact?.phone); // Output: undefined (কোনো ত্রুটি নেই)

Enter fullscreen mode Exit fullscreen mode

এই উদাহরণে, ?. ব্যবহার করে address অবজেক্টের ভেতরে থাকা city প্রপার্টিটি নিরাপদে অ্যাক্সেস করা হয়েছে। যদি address না থাকতো, তাহলে এটি কোনো ত্রুটি না করে undefined রিটার্ন করতো।

ফাংশন কলের উদাহরণ:

আপনি ফাংশনের সাথেও optional chaining ব্যবহার করতে পারেন, ফাংশনটি এক্সিস্ট করে কিনা তা চেক করার জন্য:

const person = {
  greet: function () {
    console.log("Hello!");
  }
};

// ফাংশনটি নিরাপদে কল করা
person.greet?.(); // Output: Hello!

// এমন একটি ফাংশন কল করার চেষ্টা করা যা নেই
person.sayGoodbye?.(); // কোনো আউটপুট নেই, নিরাপদে কিছুই করে না

Enter fullscreen mode Exit fullscreen mode

অ্যারের উদাহরণ:
Optional chaining অ্যারের সাথে কাজ করার সময়ও উপকারী হতে পারে:

const fruits = ["apple", "banana"];
console.log(fruits?.[0]); // Output: apple
console.log(fruits?.[10]); // Output: undefined (ত্রুটি ছাড়াই)

Enter fullscreen mode Exit fullscreen mode

Optional Chaining এর সুবিধা ও অসুবিধা

সুবিধা:

১. পরিষ্কার সিনট্যাক্স:

  • null বা undefined মানের জন্য চেক করার কোডের পরিমাণ কমায়।

২. ত্রুটি প্রতিরোধ:

  • ডিপ প্রপার্টি যা এক্সিস্ট নাও করতে পারে তা অ্যাক্সেস করার সময় runtime ত্রুটি এড়ায়।

৩. কোড রিডেবিলিটি উন্নত করে:

  • Verbose চেকের প্রয়োজনীয়তা দূর করে কোডকে আরও পড়ার উপযোগী করে।

৪. নেস্টেড চেক কমায়:

  • একাধিক স্তরের if স্টেটমেন্ট বা লজিক্যাল && চেক কমায়।

৫. একাধিক টাইপের সাথে কাজ করে:

  • অবজেক্ট, অ্যারে এবং ফাংশন কলের সাথে ব্যবহার করা যায়।

অসুবিধা:

১. সীমিত ব্রাউজার সাপোর্ট:

  • Optional chaining একটি নতুন ফিচার (ES2020-এ পরিচিত) এবং এটি সব পুরনো ব্রাউজারে পুরোপুরি সাপোর্ট করে না। উদাহরণস্বরূপ, Internet Explorer এটি সাপোর্ট করে না। তবে, আপনি Babel-এর মতো একটি ট্রান্সপাইলার ব্যবহার করে মডার্ন জাভাস্ক্রিপ্টকে ব্যাকওয়ার্ড-কোম্প্যাটিবল কোডে কনভার্ট করতে পারেন।

২. সম্ভাব্য ভুল ব্যবহার:

  • Optional chaining ত্রুটি হ্যান্ডলিংয়ে অলসতার দিকে নিয়ে যেতে পারে। অতিরিক্ত ব্যবহারে এটি বুঝতে কঠিন করে তুলতে পারে কোন জায়গায় মিসিং প্রপার্টি আশা করা হয়েছিল, যা সম্ভাব্য বাগ বা ডিজাইন ইস্যু লুকিয়ে রাখতে পারে।

৩. পারফরম্যান্স ওভারহেড:

  • যদিও optional chaining রিডেবিলিটি উন্নত করে, এটি পারফরম্যান্সে সামান্য ওভারহেড যোগ করতে পারে, বিশেষ করে পারফরম্যান্স-সংবেদনশীল অংশগুলিতে অতিরিক্ত ব্যবহারে।

উপসংহার:

Optional chaining (?.) একটি শক্তিশালী এবং সুবিধাজনক টুল যা ডেভেলপারদের null বা undefined রেফারেন্স সম্পর্কিত ত্রুটি থেকে রক্ষা করে পরিষ্কার, নিরাপদ এবং আরও রিডেবল কোড লিখতে সহায়তা করে। এটি কোডকে সরল করে একাধিক চেকের প্রয়োজনীয়তা কমিয়ে এবং সম্ভাব্য মিসিং প্রপার্টি বা মেথডগুলো নিরাপদে হ্যান্ডল করার একটি অভিন্ন উপায় প্রদান করে। তবে, যেকোনো টুলের মতো এটি প্রয়োজনের অতিরিক্ত ব্যবহার করা উচিত নয় যাতে সম্ভাব্য বাগ বা পারফরম্যান্স ওভারহেড এড়ানো যায়।

Top comments (6)

Collapse
 
rezaul profile image
rezaul karim

জাজাকাল্লাহ খইরান

Collapse
 
md_abdulfahad_8f0822fb99 profile image
Md Abdul Fahad

Thanks..
More such documentation is required.

Collapse
 
khabbab_hossen profile image
MD.KHABBAB HOSSEN • Edited

ব্লগটা অনেক সুন্দর ছিল। পড়ে অনেক ভাল লাগল। অনেক অনেক ধন্যবাদ স্যার। এমন পরিষ্কার ব্লগ সব সময় আমাদের মত নতুনদের জন্য চাই। যেনো আমরা দক্ষ হতে পারি। ❤️

Collapse
 
milon7114 profile image
MD MILON MIA

Thanks for your concept and clear documentation.

Collapse
 
siam_mahamud_cfb9adab1fcd profile image
Siam Mahamud

জাযাকাল্লাহু খায়রান

Collapse
 
md_shahinalam_eb6046c6f5 profile image
Md Shahin Alam

Mass Allah