জাভাস্ক্রিপ্ট অবজেক্ট ডিস্ট্রাকচারিং

Photo from codeburst.io

ES6 এর যে ফিচারগুলো আমি সবচেয়ে বেশি ইউজ করি, তার মধ্যে অবজেক্ট ডিস্ট্রাকচারিং বেশ ওপরের দিকেই থাকবে। নামটা খটমটে হলেও জিনিসটা জোশ! সোজা বাংলায় একটা অবজেক্ট থেকে তার এক বা একাধিক প্রপার্টিকে ভ্যারিয়েবল হিসেবে বের করে নেয়াই অবজেক্ট ডিস্ট্রাকচারিং অ্যাসাইনমেন্ট।

প্রোগ্রামিং যেহেতু সবসময়ই কথার চেয়ে এক্সামপলে ভাল বোঝা যায়, তো আমরা এক্সামপলে চলে যাই।

তো এক্সামপলটায় আমরা যা দেখতে পাচ্ছি। যখন আমরা const {a, b} = obj লিখছি, তখন a নামে একটা ভ্যারিয়েবল তৈরি হচ্ছে এবং obj.a এর ভ্যালু সেই ভ্যারিয়েবলে অ্যাসাইন হচ্ছে। একই ভাবে, b ভ্যারিয়েবলে অ্যাসাইন হচ্ছে obj.b এর ভ্যালু।

কিন্তু, এমন ইউজকেস অনেক বেশি আসবে যেখানে আমরা obj.a এর ভ্যালু a নামের ভ্যারিয়েবলে অ্যাসাইন না করে, অন্য নামের ভ্যারিয়েবলে অ্যাসাইন করতে চাই। যেমন user.id কে আমরা id নামের ভ্যারিয়েবলে অ্যাসাইন না করে userId নামের ভ্যারিয়েবলে অ্যাসাইন করতে চাই। সেটা নিচের মত করে করে নিলেই হবে।

ওপরের এক্সামপলটাতেই দেখা যাচ্ছে, user.id এর ভ্যালু আসলে userId নামে একটা ভ্যারিয়েবলে স্টোর হচ্ছে। এবং আমরা চাইলে ভ্যারিয়েবলের নাম বদলানো, এবং না বদলানো একসাথে রাখতে পারি। যেমনটা আমরা username কে না বদলে সেই নামেই রেখে দিয়েছি। একই সাথে অনেকে ভাবতে পারে হয়তো id নামে একটা ভ্যারিয়েবল তৈরি হয়ে সেটার ভ্যালু userId তে অ্যাসাইন হয়। সেটা যে হয় না, সেটা বোঝা যায় id নামের ভ্যারিয়েবলে অ্যাকসেস করতে গেলে এরর থ্রো হয়।

একটা জিনিস মাথায় রাখতে হবে, আমরা যখন নরমাল অবজেক্ট ডিক্লেয়ার করি, তখন {key: value} আকারে লিখি। কিন্তু, এই অবজেক্ট ডিস্ট্রাকচারিংয়ের সময়ে আমরা আসলে {value: key} আকারে লিখি। যেমন {id: userId} এর ক্ষেত্রে id তে ভ্যালুটা আছে আর সেটাকে আমরা userId তে অ্যাসাইন করছি। পরবর্তীতে আমরা তাকে userId নামেই অ্যাকসেস করছি।

এখন সিচুয়েশনটা যদি এমন হয় যে, আমরা যে প্রোপার্টিটা ডিস্ট্রাকচার করতে চাইছি, অবজেক্টে সেটা নাও থাকতে পারে? এমন সিচুয়েশনে আমরা চাইলে একটা ডিফল্ট ভ্যালুও পাস করে দিতে পারি।

এখানে আমরা প্রথমে canFly এর ডিফল্ট ভ্যালু হিসেবে false পাস করেছি। যেহেতু user এর canFly নামের কোন প্রোপার্টি নেই, তাই সেখানে ডিফল্ট ভ্যালু হিসেবে false অ্যাসাইন হয়েছে। পরের লাইনে আমরা user এর canFly প্রোপার্টির ভ্যালু canFly2 নামের ভ্যারিয়েবলে ডিস্ট্রাকচার করেছি, কিন্তু কোন ডিফল্ট ভ্যালু দিইনি। তাই canFly2 এর ভ্যালু undefined অর্থাৎ, আমরা যদি এমন কোন প্রোপার্টি ডিস্ট্রাকচার করার চেষ্টা করি যেটা আসলে অবজেক্টে নেই, তাহলে ভ্যালু হিসেবে undefined পাওয়া যাবে। ব্যাপারটা লজিক্যাল। কারণ, আমরা user.canFly লিখলেও তার ভ্যালু হিসেবে undefined ই পেতাম। সব শেষে canFly প্রোপার্টিকে thanosCanFly ভ্যারিয়েবলে ডিস্ট্রাকচার করা হয়েছে এবং ডিফল্ট ভ্যালু হিসেবে false দেয়া হয়েছে। তাই, thanosCanFly এর ভ্যালু false।

ডিস্ট্রাকচারিংয়ের আরেকটা মজার ইউজকেস হচ্ছে রেস্ট অ্যাসাইনমেন্ট। আমরা তো চাইলে যে কোন প্রোপার্টিকে ডিস্ট্রাকচার করতে পারিই, চাইলে যে প্রোপার্টিগুলোকে ডিস্ট্রাকচার করিনি সেগুলোকে নতুন আরেকটা অবজেক্টে অ্যাসাইন করতে পারি। নিচের এক্সামপলটা দেখি।

আমরা email প্রোপার্টিকে ডিস্ট্রাকচার করেছি, তাই সেটা userEmail ভ্যারিয়েবলে আছে। আর user অবজেক্টের বাকি অংশ নতুন অবজেক্টে হিসেবে অ্যাসাইন হয়েছে restUser অবজেক্টে।

আবার মাঝে মাঝে এমন সিচুয়েশন আসতে পারে যেখানে আমাদের user এর কোন প্রোপার্টির প্রোপার্টিতে(নেস্টেড প্রোপার্টি) অ্যাকসেস করতে হবে। যেমন হয়তো user এর একটা প্রোপার্টি আছে settings নামে। আমরা settings এর shouldSendNotification ভ্যারিয়েবলে অ্যাকসেস করতে চাই। তার জন্যে নিচের এক্সামপলটা দেখি।

প্রথমে আমরা stones প্রোপার্টির time প্রোপার্টিকে ডিস্ট্রাকচার করে নিয়েছি। পরে আরও ভেতরে গিয়ে time প্রোপার্টির achieved প্রোপার্টিকে isTimeStoneAchieved নামে এবং color প্রোপার্টিকে timeStoneColor নামে ডিস্ট্রাকচার করেছি।

অবজেক্ট ডিস্ট্রাকচারিংয়ের আরেকটা স্পেশাল কেস হচ্ছে অ্যারে ডিস্ট্রাকচারিং। আমরা যদি অবজেক্ট ডিস্ট্রাকচারিং বুঝে যাই, তাহলে অ্যারে ডিস্ট্রাকচারিং আসলে আমদের কাছে ডালভাত।

আশা করি ওপরের এক্সামপলটা বুঝিয়ে দিতে হবে না। কিন্তু, এটা বুঝতে গিয়ে মাথায় যে প্রশ্নটা আসা উচিৎ সেটা হচ্ছে, অবজেক্টের ক্ষেত্রে তো আমরা যেই খুশি সেই প্রোপার্টি ডিস্ট্রাকচার করতে পারি। কিন্তু, অ্যারেতে আমাকে তৃতীয় ভ্যালুর জন্য প্রথম আর দ্বিতীয় ভ্যালুকেও ডিস্ট্রাকচার করতে হবে? উত্তরটা হচ্ছে না। নিচের এক্সামপলটা দেখি।

অর্থাৎ, যদি আমরা অ্যারের কোন ভ্যালুকে ডিস্ট্রাকচার করতে না চাই, সিম্পলি একটা কমা দিয়ে সেটাকে স্কিপ করে চলে যেতে পারি। কিন্তু, এই তিন চারটা ভ্যালুর ক্ষেত্রে না হয় সেটা করা গেল। কিন্তু, যখন আমার অ্যারেতে ইলিমেন্ট থাকবে এক হাজারটা আর আমরা 955 নাম্বার ইলিমেন্টে অ্যাকসেস করতে চাই? তখন নিশ্চয়ই আমরা 954টা কমা দেব না! তাহলে?

তাহলে কী করব সেটা বুঝতে আমাদের একটা পুরোনো জিনিস মনে করতে হবে। জাভাস্ক্রিপ্টে প্রতিটা অ্যারে আসলে একটা অবজেক্ট। আর অ্যারের ইনডেক্সগুলো আসলে অবজেক্টের key। এটুকু মনে পড়লেই মেন্টস ছাড়াই আমাদের মাথায় ফট করে এক হাজার ওয়াটের বুদ্ধির বাত্তি জ্বলে উঠবে যে, আমরা অবজেক্ট ডিস্ট্রাকচারিং ইউজ করেই অ্যারে ডিস্ট্রাকচারিং করতে পারি।

যদি মাথায় বুদ্ধির বাত্তি সত্যিই জ্বলে ওঠে, তাহলে ওপরের এক্সামপলটা বুঝতে সমস্যা হওয়ার কথা না। আমরা এখানে অ্যারের ইনডেক্সকে key হিসেবে ব্যবহার করে ডিস্ট্রাকচার করেছি। তবে, এখানে একটা জিনিস মাথায় রাখতে হবে। অবজেক্ট ডিস্ট্রাকচারিংয়ের ক্ষেত্রে আমাদের ভ্যারিয়েবলের নাম না দিলেও চলত। যেমন const {id} = user এর ক্ষেত্রে যেহেতু আমরা নতুন কোন ভ্যারিয়েবলের নাম দিইনি, তাই id নামেই একটা ভ্যারিয়েবল তৈরি করতে হবে। কিন্তু, 2 বা 3 যেহেতু কোন ভ্যালিড ভ্যারিয়েবলের নাম না, তাই আমাদের ডিস্ট্রাকচারিংয়ের সময়ে নতুন নাম দিতেই হবে।

এভাবে আমরা চাইলে অ্যারের ইনডেক্স ক্যালকুলেট করেও ডিস্ট্রাকচার করতে পারি। নিচের এক্সামপলটা দেখি।

এখানে যেটা মাথায় রাখতে হবে আমরা যদি অবজেক্টের key হিসেবে কোন ভ্যারিয়েবল ইউজ করি, তাহলে সেটা [] এর মধ্যে রাখতে হয়। যেমন const user = {email: 'email.google.com'}, username = 'email' লিখলে user[username] এর আউটপুট হবে 'email.google.com'।

যদিও আলাদা কোন ফিচার না, তবে অ্যারে ডিস্ট্রাকচারিংয়ের আরেকটা মজার ইউজ কেস হচ্ছে variable swap। ধরা যাক, l‌et a = 1, b = 2 এখন আমরা যদি লিখি [a, b] = [b, a] তাহলে a এর ভ্যালু হবে 2 আর b এর ভ্যালু হবে 1। আমরা ডিস্ট্রাকচারিং ব্যবহার করে একটা ফাংশন থেকে একাধিক ভ্যালুউ রিটার্ন করতে পারি। ধরা যাক getCoordinates() ফাংশনটা একটা অ্যারে রিটার্ন করে যার প্রথম ভ্যালু x আর দ্বিতীয় ভ্যালু y কোঅর্ডিনেট। তাহলে আমরা লিখতে পারি const [x, y] = getCoordinates()।

আর নেস্টেড ডিস্ট্রাকচারিং, ডিফল্ট ভ্যালু, রেস্ট অ্যাসাইনমেন্ট তো অবশ্যই অ্যারে ডিস্ট্রাকচারিংয়েও করা যায়। আমরা চাইলে অবজেক্ট ডিস্ট্রাকচারিং আর অ্যারে ডিস্ট্রাকচারিং একই সাথে ব্যবহার করতে পারি। নিচের এক্সামপলটা দেখি।

ওপরের সবটুকু যদি সত্যিই বুঝে পড়া হয়, তাহলে শেষটাও বুঝতে সমস্যা হওয়ার কথা না। আশা করি, শেষটাও ভাল করেই বোঝা গেছে। কারণ, শেষ ভাল যার সব ভাল তার। আর যদি কেউ মনে করেন, ডিস্ট্রাকচারিংয়ের আরও কোন ইউজ কেস উল্লেখ করা দরকার ছিল, তাহলে কমেন্টে জানান।

হ্যাপি জাভাস্ক্রিপ্টিং!