← Back to postsCoding Notes
BanglaPublished May 3, 2025Updated May 3, 20251 min read

জাভাস্ক্রিপ্টে "?" এর তিনটি ব্যবহার

Tips

জাভাস্ক্রিপ্টে "?" এর তিনটি ব্যবহার আছে-

  • Ternary operator
  • Optional chaining
  • Nullish coalescing
js
const user1 = {
  name: 'Sami',
  profile: {
    bio: ''
  }
};

const user2 = {
  name: 'Test'
};

// ✅ 1. Using Optional Chaining (Safe)
const safeAccess = user1.profile?.bio;
console.log('✅ Optional Chaining (safeAccess):', safeAccess); // '' (no error)

// ❌ 2. Not Using Optional Chaining (Causes Error)
// const unsafeAccess = user2.profile.bio;
// console.log('❌ No Optional Chaining (unsafeAccess):', unsafeAccess); // ❌ Error

// ✅ 3. Using Nullish Coalescing
const bioWithFallback = user1.profile.bio ?? 'No bio available';
console.log('✅ Nullish Coalescing (bioWithFallback):', bioWithFallback); // '' (empty string preserved)

// ❌ 4. Not Using Nullish Coalescing (Using || gives wrong fallback)
const wrongFallback = user1.profile.bio || 'No bio available';
console.log('❌ Without Nullish Coalescing (wrongFallback):', wrongFallback); // 'No bio available' (wrong!)

// ✅ 5. Using Ternary Operator (Easy Example)
const bioStatus = user1.profile?.bio ? 'Bio is available' : 'No bio available';
console.log('✅ Ternary Operator (bioStatus):', bioStatus); // 'No bio available'

𝐓𝐞𝐫𝐧𝐚𝐫𝐲 𝐨𝐩𝐞𝐫𝐚𝐭𝐨𝐫 বেশ কমন, অন্যান্য ল্যাংগুয়েজও এর ব্যবহার লক্ষ্য করা যায়। shorthand if-else আর এর structure এরকম। condition ? Val1 : val2

𝐎𝐩𝐭𝐢𝐨𝐧𝐚𝐥 𝐜𝐡𝐚𝐢𝐧𝐢𝐧𝐠: আগে আমি ভাবতাম Optional chaining শুধু টাইপস্ক্রিপ্টের ফিচার। কিন্ত এটি একইসাথে modern JavaScript (ES2020+) এবং TypeScript (since version 3.7) এর ফিচার। এটির structure অনেকটা এরকম "obj?.Prop?.Subprop". আমরা যদি subprop এ এক্সেস করতে চাই অবশ্যই আমাদের শিউর হয়ে নিতে হবে আদৌ prop আছে কিনা object এ। আমরা যদি চেক না করেই কোনো nested property এক্সেস করতে যাই তাহলে এরর আসতে পারে কারণ parent property নাও থাকতে পারে।

𝐍𝐮𝐥𝐥𝐢𝐬𝐡 𝐜𝐨𝐚𝐥𝐞𝐬𝐜𝐢𝐧𝐠 (??) এটির structure অনেকটা এরকম- "val ?? DefaultVal"। null অথবা undefined না পেলে val রিটার্ন করবে। এই উদাহরণে, ?? (Nullish Coalescing) অপারেটরটির ব্যবহার দেখা যাক। এটি '', 0, বা false এর মতো ভেলুগুলোকে অপরিবর্তিত রাখে। তবে ?? ব্যবহারের ফলে, কেবল একটি ডিফল্ট মান পাওয়া যায় যখন আসল মান null বা undefined হবে। অন্যদিকে, || (OR) অপারেটর ব্যবহার করলে '' (empty string), 0, বা false এর মতো ভেল্যুগুলোকে falsy হিসেবে গণ্য হয় এবং এগুলোর পরিবর্তে ডিফল্ট মান দেখাবে।