ইএস৬ ডি-স্ট্রাকচারিং (Destructuring) - একটি স্মার্ট টেকনিক

আমরা প্রায় সবাই চাই যেকোনো কাজ কে একটু সহজে এবং কম সময়ে স্মার্ট ভাবে করতে । যাতে সময়টাও একটু সেইভ হয় সাথে কাজটাও বেশি করা যায়।জাভাস্ক্রিপ্ট এর ইএস৬ এ ডি-স্ট্রাকচারিং (Destructuring) নামে একটি টেকনিকের আবির্ভাব হয় ।যেইটা মূলত কাজ করে জাভাস্ক্রিপ্টের Array এবং Object ডাটা স্ট্রাকচারের সাথে ।

অ্যারে এবং অবজেক্ট এর সাথে কি কাজ করে ?

আমরা জানি যে, অ্যারে এবং অবজেক্ট এর ভেতর বিভিন্ন ভ্যালু বা এলিমেন্ট থাকে । আর সেসব ভ্যালু বা এলিমেন্ট সংক্ষিপ্ত উপায়ে আলাদা আলাদা করে বের করে আনার কাজটাই ডি-স্ট্রাকচারিং (Destructuring) এর সাহায্যে করা হয়। অর্থাৎ, ডি-স্ট্রাকচারিং (Destructuring) এর মূল কাজ হচ্ছে অ্যারে এবং অবজেক্ট এর মতো ডাটা স্ট্রাকচার থেকে ডাটা আলাদা আলাদা করে বের করে আনা।

তো চলুন আজাইরা ইন্ট্রো গল্প বাদ দিয়ে, ডি-স্ট্রাকচারিং (Destructuring) কেনো একটি স্মার্ট টেকনিক তা নিয়ে আলোচনা করা যাক । প্রথমে আমরা অ্যারেরসাথে ডি-স্ট্রাকচারিং (Destructuring) ইমপ্লিমেন্ট করবো ।

নিচে একটা অ্যারে নেওয়া হইলো :

const student = ["Shakil Babu", 112906, "Computer"]

এখন যদি আমরা উপরোক্ত অ্যারে থেকে আইটেম গুলো বের করতে চাই তাহলে কিভাবে করবো ? অবশ্যই সচারচর যেভাবে অ্যারের আইটেম বের করে থাকি যেমন নিচে লক্ষ্য করুন :

const name = student[0];
console.log(name)
// Shakil Babu

const roll = student[1];
console.log(roll);
// 112906

const department = student[2];
console.log(department);
// Computer

এভাবেই তো আইটেম গুলো বের করবো তাই নাহ ?

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

এইসব বিরক্তিকর কাজ যাতে খুব কম সময়ে করা যায় এবং প্রোগ্রামে কোডও ক্লিন থাকে সেইজন্যই মূলত ডি-স্ট্রাকচারিং (Destructuring) । চলেন উপরোক্ত সেইম কাজটাই জাভাস্ক্রিপ্ট ইএস৬ এ করা যাক :

const student = ["Shakil Babu", 112906, "Computer"]
const [name, roll, department] = student ;

কি মজা! এক লাইনেই কাজটা খতম ভাবা যায় ?

দেখছেন ডি-স্ট্রাকচারিং (Destructuring) মামার কি ক্ষমতা । উপরোক্ত অ্যারেতে লক্ষ্য করলে দেখবেন যে, অ্যারেতে তিনটি আইটেম আছে যার প্রথম আইটেম শিক্ষার্থীর নাম, দ্বিতীয়টা রোল এবং শেষেরটা ডিপার্টমেন্ট । তাই ডি-স্ট্রাকচারিং (Destructuring) করার সময় name, roll, department নামে ভ্যারিয়েবল নিয়েছি যাতে আইটেম গুলোকে বুঝতে সহজ হয়।

এখানে name, roll এবং department ভিন্ন ভিন্ন তিনটা ভ্যারিয়েবল। এবং এরা ঠিক অ্যারেতে থাকা ডাটাগুলোর পজিশন মতো যার যার ভ্যালু নিয়ে নিয়েছে। ইন্ডেক্স জিরো পজিশনে থাকা ভ্যারিয়েবল নেইম অ্যারেতে ইন্ডেক্স জিরো পজিশনে থাকা ভ্যালুটাই নিবে। তাহলে name="Shakil Babu", roll=112906 এবং department="Computer" হবে তাই নাহ ? হ্যাঁ তাই ।

এরপরেও যদি আপনার বিশ্বাস না হয়, মনের কোথাও যদি আকু-বাকু করে উঠে তাহলে চলুন চেক করে দেখা যাক :

console.log(name); // Shakil Babu
console.log(roll); // 112906
console.log(department); // Computer

এইবার বিশ্বাস করেছেন তো ?

যাই হোক, অনেক সময় কিন্তু আমরা একটি অ্যারের সবগুলো আইটেম নিয়ে কাজ করি নাহ মানে কাজ করার দরকার পরে নাহ । ধরি, একটি numbers নামে অ্যারেতে (1,2,3,4,5,6) = 6 টি আইটেম আছে আমাদের উক্ত অ্যারে থেকে (1,4,6) ভ্যালু বা আইটেমের প্রয়োজন তাহলে আমরা জাভাস্ক্রিপ্ট ইএস৫ এ নিচের মতো করে করতে পারি

const numbers = [1,2,3,4,5,6];
const one = numbers[0];
// 1
const four = numbers[3];
// 4
const six = numbers[5];
// 6

চলুন এখন এই একই কাজ আমরা জাভাস্ক্রিপ্ট ইএস৬ এ ডি-স্ট্রাকচারিং (Destructuring) এর সাহায্যে করি :

const numbers = [1,2,3,4,5,6];
const [one,,,four,,six] = numbers;
console.log(one, four, six);
// 1 4 6

এই কাজটাও আমরা এক লাইনেই করে ফেললাম । যেহেতু, numbers অ্যারে থেকে আমাদের (1,4,6) ভ্যালু দরকার তাই এই ভ্যালু গুলো অ্যারের যে যে ইন্ডেক্সে আছে সেই সেই ইন্ডেক্সে ভ্যারিয়েবল নাম দিয়ে এক্সেস করা হয়েছে।আর যেসব ভ্যালু গুলো দরকার নাহ সেসব ভ্যালু গুলোকে (,) কমা দ্বারা স্কিপ করা হয়েছে যাকে আইটেম স্কিপিং বলা হয় ।

কমপ্লেক্স বা মাল্টিডাইমেনশনাল অ্যারে ডি-স্ট্রাকচারিং (Destructuring) :

একটি অ্যারের ভেতর এক বা একাধিক অ্যারে থাকলে তখন তাকে মাল্টিডাইমেনশনাল অ্যারে বলে। তো চলেন একটা মাল্টিডাইমেনশনাল অ্যারে কিভাবে ডি-স্ট্রাকচার করতে হয় তা শিখে ফেলি :-

// array
const numbers = [1,2,3,[4,5,6,[7,8,9]],10];

// Destructuring
const [one,two,three,[four, five, six,[seven, eight, nine]],ten] = numbers;
console.log(nine);
// 9

আচ্ছা আপনারা কি একটা বিষয় খেয়াল করেছেন ? আমরা অ্যারে নেওয়ার সময় যেভাবে ভ্যালু বা আইটেম নিই ডি-স্ট্রাকচার করার সময়ও কিন্তু সেইভাবে ভ্যারিয়েবল নিই । উপরোক্ত মাল্টিডাইমেনশনাল অ্যারে লক্ষ্যকরুন আমরা যেভাবে আইটেম গুলো নিয়েছি [1,2,3,[4,5,6,[7,8,9]],10] । ঠিক সেইভাবেই [one,two,three,[four, five, six,[seven, eight, nine]],ten] ভ্যারিয়েবলও নিয়েছি কি মজা! আশা করি বুঝতে পেরেছেন ।

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

অবজেক্ট এর সাথে ডি-স্ট্রাকচারিং (Destructuring) :-

অ্যারের থেকে অবজেক্টে আরও সহজে ডি-স্ট্রাকচার করা যায় । কারণ, অবজেক্ট কিন্তু কী-ভ্যালু পেয়ার মানে ভ্যালুর পাশাপাশি কী(Key)ও থাকে । তাই এখানে ডিস্ট্রাকচারিং অনেকটাই ফ্লেক্সিবল এবং সহজ। চলুন আগে ইএস৫ স্টাইলে ভ্যালুগুলো পৃথক পৃথক ভাবে বের করি :-

const person = {
    name:'Shakil Babu',
    age:20,
    department:'Computer'
}

const name = person.name;
const age = person.age ;
const department = person.department;

এখন, উপরোক্ত person অবজেক্ট থেকে ভ্যালুগুলো পৃথক পৃথক ভাবে name ,age ও department তে স্টোর হবে ।

console.log(name); // Shakil Babu
console.log(age); // 20
console.log(department); // Computer

যেহেতু অবজেক্ট ডাটা স্ট্রাকচারের (কী) থাকে, তাই ইএস৬ এ ডি-স্ট্রাকচার করার সময় আমরা সেই (কী) এর নামটাই ইউজ করতে পারি :-

const person = {
    name:'Shakil Babu',
    age:20,
    department:'Computer'
}

const {name, age, department} = person ;

তাইলে এখন name, age ও department কী থেকে সেইম নামেই তিনটা ভিন্ন ভিন্ন ভ্যারিয়েবল হয়ে গেলো। যেগুলো তাদের ভ্যালুগুলোই ধরে রাখে :-

console.log(name); // Shakil Babu
console.log(age); // 20
console.log(department); // Computer

অবজেক্ট আইটেম স্কিপিং :-

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

const person = {
    name:'Shakil Babu',
    age:20,
    department:'Computer'
}

const {name, age} = person ;

এখানে, আমার department এর ভ্যালুর দরকার নাই তাই department অর্থাৎ (কী) টাকে লিখি নাই মানে স্কিপ করেছি।

কমপ্লেক্স Object ডি-স্ট্রাকচারিং (Destructuring) :-

যদি একটি অবজেক্টের ভেতর এক বা একাধিক অবজেক্ট থাকে তাহলে তাহলে সেইটা কিভাবে ডিস্ট্রাকচার করা যায় তা নিচে দেওয়া হলো :

const person = {
    name:'Shakil Babu',
    age:20,
    department:'Computer',
    desc:{
        height:'5.5 inch',
        weight:'55 kg'
    }
}

// Destructuring
const {name, age, department, desc:{height, weight}} = person ;

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

const person = {
    name:'Shakil Babu',
    age:20,
    department:'Computer',
    desc:{
        height:'5.5 inch',
        weight:'55 kg',
        favThings:{
            colors:['blue', 'red', 'black']
        }
    }
}

উপরোক্ত অবজেক্ট থেকে আমাদের যদি (red) ভ্যালু বের করতে বলা হয় । তাহলে আমরা কিভাবে বের করতে পারি ?

একটু খেয়াল করুন, প্রথমে অর্থাৎ মেইন অবজেক্ট হলো person । যার ভেতর desc নামে আরেকটা অবজেক্ট এবং desc অবজেক্টের ভেতরও favThings নামে আরও একটা অবজেক্ট আছে । এবং ফাইনালি, favThings অবজেক্টের ভেতর colors নামে একটা অ্যারে আছে যার ১ নাম্বার ইন্ডেক্সে আমাদের কাঙ্খিত (red) ভ্যালু আছে ।

যেহেতু, আমাদের শুধু (red) ভ্যালু লাগবে তাই অন্য ভ্যালু ডিস্ট্রাকচার করবো নাহ। তো, চলুন দেখা যাক :

const {desc:{favThings:{colors:[,red]}}} = person;
console.log(red);
// red

আশা করি বুঝতে পারছেন যে, কিভাবে কাঙ্খিত (red) ভ্যালু পাওয়া গেলো।যদি এখনও মনে খটকা লাগে তাহলে এই আরটিকেলটি পুনরায় পড়ার অনুরোধ রইলো । আপনার জন্য শুভকামনা ।

যদি কোনো প্রকার ভূল করে থাকি তাহলে ক্ষমার দৃষ্টিতে দেখবেন, আর ভূল গুলো ধরিয়ে দিবেন ।

ধন্যবাদ সবাইকে ।