নালিশ দিচ্ছে Nullish Coalescing
তোর যদি মোবাইল ফোন ছিনতাই হয়ে যায়, তাইলে তুই কি সেই ফোনের ভিতরে যেইসব ছবি আছে, সেগুলা পাবি? না, পাবি না। কারণ, মোবাইল ফোন থেকে ছবি পেতে হলে মোবাইল ফোন থাকতে হবে। তাই মোবাইল না থাকার পরেও ছবি পাইতেছি না কেন, সেটা নিয়ে নালিশ করে কোনো লাভ হবে না।
যখন কোনো একটা অবজেক্টে প্রোপার্টি থাকে না, সেটাকে সে খুবই ভদ্রভাবে undefined বলে দেয়। কিন্তু সেই undefined হয়ে যাওয়া জিনিসটাকে তুই যদি আবার অবজেক্ট হিসেবে মনে করে সেটা থেকে আরও কিছু একটা বের করে নিয়ে আসতে চাস, তখন হয়ে যায় বিপত্তি। কারণ, যেটা নাই, সেটার ভিতরে থেকে কিছু পাবে কীভাবে? যেমনটা মোবাইল না থাকলে সেটার ভিতর থেকে ছবি নিয়ে আসতে পারবি না। একইভাবে কোনো একটা প্রোপার্টি না থাকলে সেটার ভিতর থেকে অন্য কিছু নিয়ে আসতে পারবি না।
নিচে সিম্পল একটা user অবজেক্ট আছে, সেটার মধ্যে name নামে একটা প্রোপার্টি আছে। আমরা সিম্পলভাবে এই name প্রোপার্টির মান পেতেই পারি। আবার একইভাবে যদি profile প্রোপার্টির মান এক্সেস করতে যাবি। সেটার মান দিবে undefined। কারণ, user অবজেক্টে profile নামে কোনো প্রোপার্টি নাই। এই যে প্রোফাইল প্রোপার্টি নাই, তারপরেও জোর করে এই নাই জিনিসের মধ্যে email খুঁজতে গেলে এরর দিয়ে বসবে।
const user = { name: 'Jakkas' };
console.log(user.name);
console.log(user.profile);
console.log(user.profile.email);
Output:
Jakkas
undefined
Cannot read properties of undefined (reading 'email')এই এরর ম্যাসেজ থেকে স্পষ্ট বুঝা যাচ্ছে না। সেখানে বলতেছে, Cannot read properties of undefined অর্থাৎ undefined-এর কোনো প্রোপার্টি পড়া যাচ্ছে না। হয়তো এরর ম্যাসেজটা এমন হলে বুঝতে সুবিধা হতো– Cannot read email of profile because profile is undefined।
Optional Chaining
কোনো একটা প্রোপার্টি undefined হয়ে যাওয়ার পর তার ভিতরের প্রোপার্টি পড়তে গেলে যে এরর দেয়, সেটা থেকে রক্ষা পেতে চাইলে একটা অপশনাল চেইনিং ইউজ করতে পারবি। সেটা আর কিছুই না। জাস্ট প্রোপার্টির নাম লেখার আগে যে ডট চিহ্ন দিচ্ছস, সেটার আগে একটা প্রশ্নবোধক চিহ্ন দিয়ে দিবি। তাহলে জাভাস্ক্রিপ্ট বুঝে ফেলবে, এই প্রোপার্টি থাকতেও পারে আবার নাও থাকতে পারে। থাকলে সামনে এগুবে, না থাকলে সেখানেই স্টপ হয়ে যাবে। তখন আর এরর দিবে না।
নিচে নতুন আরেকটা user অবজেক্ট আছে। সেটাতে name প্রোপার্টির পাশাপাশি address প্রোপার্টি আছে। সেই address প্রোপার্টির মান আরেকটা অবজেক্ট। সেই অবজেক্টের মধ্যে city name আরেকটা প্রোপার্টি আছে। তাহলে স্বাভাবিকভাবেই আমরা user.addres.city-এর মান পেয়ে যাব কোনো এরর ছাড়াই। আর এর মধ্যে অপশনাল chaining ইউজ করলে কোনো সমস্যা হবে না। কারণ, মান থাকলে অপশনাল চেইন কিছুই করবে না, সরাসরি মান দিয়ে দিবে।
অন্যদিকে user অবজেক্টের মধ্যে profile নাই। আর প্রোফাইল না থাকার কারণে সেটার ভিতরে email থাকার প্রশ্নই আসে না এবং সেটা খুঁজতে গেলে এরর দিয়ে দিবে। তবে আমরা যদি অপশনাল চেইনিং ইউজ করি, তাহলে আর এরর দিবে না। ভদ্রভাবে undefined বলে দিবে। এইটাই অপশনাল চেইনিংয়ের মজা।
const user = { name: 'Rahim', address: { city: 'Dhaka' } };
console.log(user?.address?.city);
console.log(user?.profile?.email);
Output:
Dhaka
undefinedNullish Coalescing (??)
নালিশ করার জন্য দুইটা প্রশ্নবোধক চিহ্ন দিয়ে দিতে হবে। তখন Nullish Coalescing হবে। এই ডাবল প্রশ্ন ?? হচ্ছে এমন একটা অপারেটর, যা null বা undefined হলে একটা default value রিটার্ন করে।
Nullish বলতে বুঝায় null বা undefined হতে পারে। এইটা খুবই স্পেসিফিক একটা জিনিস।
আর Coalescing একটা দাঁত ভেঙে ফেলার মতো শব্দ। এইটার মানে হচ্ছে একসাথ করা এবং একসঙ্গে মিলিয়ে কিছু একটা করা। এইখানে প্রোগ্রামিংয়ে nullish coalescing দিয়ে সঠিক মান থাকলে সেটাকে দিচ্ছে, আর null বা undefined হলে ডিফল্ট মান দিচ্ছে, সেটাকে বুঝাচ্ছে।
তুই ভাবতে পারস, এইটা তো আমি if-else দিয়ে করতে পারি। পারবি, যদি স্পেসিফিকলি null আর undefined চেক করে মান সেট করস। তবে কখনো falsy কোনো মান যেমন, 0, "", বা false হলে ডিফল্ট রিটার্ন করলে সেটা ভুল হবে। কারণ 0, "", বা false এইগুলা ডাটায় থাকতে পারে। তাই Nullish Coalescing অনেক বেশি প্রাক্টিক্যালভাবে শুধু null বা undefined-কে চেক করে ডিফল্ট মান দেয়।
একইভাবে তুই শর্টকাটে OR অপারেটর ( || ) দিয়ে যখন userAge চেক করে ডিফল্ট মান চেক করতে পারস, তবে এইখানেও সেইম প্রব্লেম, সব falsy ভ্যালুর জন্য ডিফল্ট মান ধরায় দিবে। অথচ 0, false বা এম্পটি স্ট্রিং ('') সঠিক মান হতে পারে। তখন কিন্তু মান 18 সেট করা ঠিক হবে না।
let userAge = 0;
let age = userAge || 18;
console.log(age);
Output: 18Nullish Coalescing শুধু null বা undefined-এর জন্যই শুধু default ভ্যালু সেট করে, অন্য কোনো Falsy ভ্যালু থাকলে সেটাকে মান আছে বলে ধরে নেয়। যেমন:
const userAge = 0;
const age = userAge ?? 18;
console.log(age);
Output: 0একইভাবে দেখতে পারস, null বা undefined হলে কী হবে।
const userName = null;
const name = userName ?? "Anonymous";
console.log(name);
Output: Anonymousএখানে ?? নিশ্চিত করে যে, userName যদি null বা undefined হয়, তবেই "Anonymous" রিটার্ন করবে।
জোড়ায় জোড়ায় সেইফটি
Optional Chaining আর Nullish Coalescing একসাথে ইউজ করলে এরর খাওয়ার চান্স কমে যায়।
const user = {
name: 'Rahim',
address: { city: 'Dhaka' }
};
const city = user?.address?.city ?? "City not available";
console.log(city);
Output: Dhaka
const postalCode = user?.address?.postalCode ?? "Postal code not available";
console.log(postalCode);
Output: Postal code not availableএখানে user?.address?.postalCode চেক করছে যে, postalCode property আছে কি না। যদি না থাকে, তাহলে "Postal code not available" সেট করছে।
এইভাবেই Optional Chaining আর Nullish Coalescing তোর ডেটা অ্যাক্সেসের লাইফকে সহজ করে দেয়!
Practice:
- let x = null;-এর ক্ষেত্রে x ??= 75 ব্যবহার করলে আউটপুট কী হবে?
- একটা product অবজেক্টে stock নামের প্রোপার্টি নাই; Nullish Coalescing দিয়ে stock-এর ডিফল্ট মান 0 সেট কর।
- productDetails অবজেক্টে discount ভেরিয়েবলের মান falsy কোনো কিছু হলে সেটার মান 10 সেট করার কোড লেখ।
- Optional Chaining দিয়ে vehicle অবজেক্টে engine নামের প্রোপার্টি চেক কর এবং ডিফল্ট মান 'Engine info missing' যোগ কর।
- Optional Chaining দিয়ে restaurant অবজেক্টে menu নামে প্রোপার্টি রিড কর এবং সেটা না থাকলে 'Menu not available' রিটার্ন কর।
- profile অবজেক্টে social অবজেক্টে twitter নামের প্রোপার্টি চেক কর Optional Chaining দিয়ে। twitter না থাকলে 'Twitter handle not available' প্রিন্ট কর।