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

আমরা অ্যারের উপর বিভিন্নভাবে লুপ চালাতে পারি। ট্র্যাডিশনাল for দিয়ে বা এগুলা ইউজ করেও লুপ চালাতে পারি। কিন্তু আমাদের এমন সিচুয়েশান আসতে পারে যেখানে কোনো অবজেক্ট এর উপর অ্যারের মতোই লুপ চালানো লাগতে পারে। ধরি নিচের অবজেক্টটিঃ

var obj = {Bangladesh: ‘Dhaka’, India: ‘Delhi’, Nepal: ‘Kathmandu’, Afganistan: ‘Kabul’, Thailand: ‘Bangkok’}

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

আমি এখন সব দেশের ক্যাপিটাল গুলো প্রিন্ট করতে চাচ্ছি। এখন এর জন্যে আমরা Object এর মেথডগুলো দেখতে পারি। এখানে প্রত্যেকটা বানানো অবজেক্ট এরই Object কন্সট্রাকটর থাকে।

আমরা চাইলে obj.constructor ও ইউজ করতে পারি আবার ডিরেক্ট Object কন্সট্রাকটর ও ইউজ করতে পারি। এখন এই কন্সট্রাকটরের ভিতরে কিছু মেথড আছে যেগুলো আমরা দেখতে পারিঃ

এখানে দুইটা মেথড খুঁজে পাবেন keys আর values নামে। এগুলাই আমরা ইউজ করবো ব্যাসিকালি আজকে।

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

Object.keys(obj);

এখন রিটার্ণ করা অ্যারেটাকে ভ্যারিয়েবলে স্টোর করে রাখতে পারি পরবর্তিতে ব্যবহার করার জন্যে

var capitals = Object.keys(obj);

এবার যেহেতু এখানে capitals আসলে একটা অ্যারে, তাই এখানে যেকোনোভাবেই লুপ চালাতে পারবেন।

capitals.map(function(capital) {
    console.log('Capital is: ' + capital);
})

এখন পুরোটা কাজ একেবারে এভাবেও করা যাবেঃ

Object.values(obj).map(function(capital) {
    console.log('Capital is: ' + capital);
})

আর ES6 সিনট্যাক্স ইউজ করলেঃ

Object.values(obj).map(capital => console.log(`Capital is ${capital}`));

আউটপুট সেইম আগের মতোই আসবে।

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

Object.keys(obj);

এবার এই নতুন অ্যারেকে কোথাও স্টোর করে রাখতে পারি পরবর্তিতে ইউজ করার জন্যে।

var countries = Object.keys(obj);

এবার আসলে আইডিয়াটা বুঝে ফেলেছেন। এখান থেকেও map() দিয়ে আমরা কাজ করতে পারবোঃ

countries.map(function(country) {
    console.log('Country Name: ' + country);
})

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

countries.map(function(country) {
    console.log('Capital of ' + country + ' is: ' + obj[country]);
})

তবে এখানে আমাদের অবশ্যই ব্রাকেট নোটেশান ইউজ করতে হবে। এখন এটাকেও পুরো একেবারে করতে চাইলেঃ

Object.keys(obj).map(function(country) {
    console.log('Capital of ' + country + ' is: ' + obj[country]);
})

আর অবশ্যই ES6 সিনট্যাক্স ইউজ করে আরো সুন্দর করে ফেলতে পারবেনঃ

Object.keys(obj).map(country => console.log(`Capital of ${country} is: ${obj[country]}`));

আউটপুট সেইমই আসবে। কিন্তু দেখতে আরো ছোটো, সুন্দর এবং মিনিংফুল মনে হচ্ছে।

আজকে এইটুকুই। আশা করি অন্যদিন আরো অন্যকোনো টপিক নিয়ে লিখবো। সেমিস্টার ফাইনালের কারণে লেখা একটু আস্তে আস্তে আগাচ্ছে। তবে আরো অনেক কিছু নিয়ে লিখার প্ল্যান আছে। আমি যা জানি সবই শেয়ার করবো আস্তে আস্তে। সে পর্যন্ত আমার জন্য দোয়া করবেন।


আমার এই লেখা পূর্বে আমার ব্লগে প্রকাশিত হয়েছে। চাইলে আমার ব্লগ থেকে ঘুরে আসতে পারেন। ব্লগ থেকে সাবস্ক্রাইব করলে আমি নিজে থেকেই আমার নতুন লেখাগুলো আপনার ইমেইলে প্রতি শুক্রবার সকালে পাঠিয়ে দিবো। ভালো থাকবেন। হ্যাপী প্রোগ্রামিং!

Comments

comments