Destructuring ভাংচুর চানাচুর
মাঝেমধ্যে আমাদের এমন পরিস্থিতি আসে, যেখানে কিছু জিনিসকে ভেঙে ছোট ছোট অংশে ভাগ করে নিতে হয়। এটাই মূলত destructuring বা কোনো জিনিসকে ছোট ছোট অংশে ভেঙে ফেলার প্রক্রিয়া। যেমন, আমরা পিজ্জা খাওয়ার সময় সেটাকে একসাথে না খেয়ে ছোট স্লাইসে ভাগ করে খাই। এমনকি শসা, আপেল, পেয়ারা ও তরমুজ খাওয়ার সময় ছোট ছোট টুকরা করে খাই। তেমনি প্রোগ্রামিংয়েও আমরা অবজেক্ট বা অ্যারেকে ছোট ছোট ভাগ করে কাজ করতে পারি।
Destructuring মূলত ES6-এর সাথে জনপ্রিয় হয়ে ওঠে এবং এর মাধ্যমে আমরা সহজে অবজেক্ট বা অ্যারে থেকে প্রয়োজনীয় ভ্যালুগুলো আলাদা করতে পারি। ধর, তোর কাছে একটি অবজেক্ট আছে।
const actor = {
name: 'ananata',
age: 30,
phone: '0188232232',
money: 123132313
}এখন যদি অবজেক্টের প্রোপার্টিগুলোকে অ্যাক্সেস করে সেগুলাকে আলাদা আলাদা নামের ভেরিয়েবলে রাখতে চাস, তখন ডট নোটেশন ব্যবহার করতে পারবি।
const name = actor.name;
const age = actor.age;
const phone= actor.phone;
const money = actor.money;
console.log(name, age, phone, money)
Output:
ananata
30
0188232232
123132313প্রতিবার ডট নোটেশন ব্যবহার করতে হচ্ছে, যা কিছুটা ঝামেলার। এখানে destructuring তোর জন্য কাজটা শর্টকাট এবং সহজ করে দিবে। এর মাধ্যমে খুব সহজেই অবজেক্টের ভ্যালুগুলো আলাদা করতে পারবি।
Destructuring Syntax:
const { name, age, money, phone } = actor;এভাবে অবজেক্টের ভ্যালুগুলোকে সরাসরি পেয়ে যাবি।
console.log(name);
console.log(age);
console.log(money);
console.log(phone);
Output:
ananata
30
123132313
0188232232তুই যদি কোনো প্রোপার্টির নাম চেঞ্জ করতে চাস, সেটা করতে পারবি। জাস্ট প্রোপার্টির নামের পর কোলন চিহ্ন(:) দিয়ে তোর ইচ্ছামতো নতুন নাম দিতে পারবি। যেমন, নিচে age প্রোপার্টির নতুন নাম boyos দেয়া হইছে।
const { name, age: boyos, money, phone } = actor;
console.log(name);
console.log(boyos);
Output:
ananata
30মাঝেমধ্যে অবজেক্ট থেকে যে প্রোপার্টি ডিস্ট্রাকচারিং করতে হবে, সেই নামে অলরেডি আরেকটা ভেরিয়েবল থাকতে পারে। তখন দুইটা নাম একই হলে একটু ভেজাল হয়ে যেতে পারে। এইসব ক্ষেত্রে ভেজাল বা কনফিউশন এড়ানোর জন্য প্রোপার্টির নাম চেঞ্জ করতে পারবি জাস্ট কোলন দিয়ে, তারপর নতুন একটা নাম লিখে।
const book = { title: "1984", author: "George Orwell" };
const { title: bookTitle, author: bookAuthor } = book;
console.log(bookTitle);
console.log(bookAuthor);
Output:
1984
George Orwellঅ্যারে Destructuring
যখন অবজেক্টকে destructuring করছিলি, তখন ডানপাশে ছিল অবজেক্ট আর বামপাশে নামগুলো ছিল { } ব্র্যাকেটের মধ্যে। কারণ, অবজেক্ট লিখতে এই { } লাগে, তাই ডিস্ট্রাকচারিং করতেও { } লাগবে। একইভাবে যখন অ্যারেকে ডিস্ট্রাকচারিং করবি, তখন ডানপাশে থাকবে অ্যারে, আর বামপাশে নামগুলা থাকবে [ ] ব্র্যাকেটের মধ্যে। কারণ, একটা সিম্পল অ্যারে ডিক্লেয়ার করার জন্য [ ] এইটা লাগে। তাই ডিস্ট্রাকচারিং করার জন্য [ ] লাগবে।
const numbers = [45, 99];
const [first, second] = numbers;
console.log(first);
console.log(second);
Output:
45
99এখানে numbers অ্যারের প্রথম এবং দ্বিতীয় উপাদানকে first এবং second নামে অ্যাসাইন করা হয়েছে।
ফাংশন রিটার্ন থেকে destructuring করা
ধর, আমরা একটি ফাংশন লিখছি, যেটা দুটি ভ্যালু নিবে এবং তাদের ডাবল করে একটি অ্যারে রিটার্ন করবে।
function doubleThem(a, b) {
return [a * 2, b * 2];
}এখন আমরা এই রিটার্ন করা অ্যারেকে destructure করতে পারি।
const [prothom, ditiyo] = doubleThem(6, 9);
console.log(prothom, ditiyo);
Output:
12
18এখানে আমরা doubleThem ফাংশন থেকে রিটার্ন করা অ্যারের প্রথম এবং দ্বিতীয় ভ্যালু আলাদা করেছি এবং সেগুলোকে আলাদা করে প্রিন্ট করেছি। যেহেতু ফাংশনটি একটি অ্যারে রিটার্ন করে, তাই আমরা [ ] ব্যবহার করে এটাকে destructure করেছি।
Destructuring প্রাথমিকভাবে একটু ভেজাইল্লা মনে হতে পারে, তবে এটি একটি খুবই শক্তিশালী এবং দরকারি টেকনিক। এটি আমাদের কোডকে সিম্পল এবং ইজি করে তোলে।
Default Value
ডিস্ট্রাকচারিং কী করে? কোনো অবজেক্ট বা অ্যারের মধ্যে কোনো প্রপার্টি বা উপাদান থাকলে সেটাকে সরাসরি একটা ভেরিয়েবলে বসিয়ে দেয়। কিন্তু যদি সেই প্রোপার্টি বা উপাদান অ্যারের মধ্যে না থাকে, তাহলে কী হবে? তাহলে সেটার মান undefined হয়ে যাবে। তবে তুই যদি undefined না করে কোনো একটা ডিফল্ট মান দিতে চাস, সেটা দিতে পারবি। তাহলে যদি মান থাকে, সেই মান পেয়ে যাবি। আর যদি মান না থাকে, তাহলে undefined না পেয়ে ডিফল্ট মান পাবি।
const person = { name: "Amit", age: 25 };
const { name, phone = "N/A" } = person;
console.log(name);
console.log(phone);
Output:
Amit
N/Aযেখানে কিছু ভ্যালু মিসিং থাকতে পারে, সেখানে ডিফল্ট মান খুব কাজে লাগবে।
Advanced: ফাংশনের প্যারামিটারে Destructuring
ফাংশনের প্যারোমিটারের মধ্যেও সরাসরি destructuring করা সম্ভব। সেজন্য সব প্যারামিটারকে অবজেক্টের মধ্যে রাখবি। আর আর্গুমেন্ট পাস করার সময় অবজেক্ট হিসেবে পাঠিয়ে দিবি। তাহলে সিরিয়াল মেইনটেইন না করলেও চলবে। জাস্ট অবজেক্টের ভিতরের প্রোপার্টির নামের সাথে প্যারামিটারের নাম মিলিয়ে নিবে।
function introduce({ name, age }) {
console.log(`Name: ${name}, Age: ${age}`);
}
const user = { name: "Arohi", age: 22, hobby: "Reading" };
introduce(user);
Output: Name: Arohi, Age: 22এইটা একটু ভেজাইল্লা। আপাতত না বুঝলেও চলবে। তারপরেও একটু দুই মিনিট খেয়াল করে দেখ। introduce ফাংশনকে ডিক্লেয়ার করার সময় প্যারামিটার হিসেবে একটা অবজেক্ট আছে। আর এই ফাংশনকে কল করার সময় আর্গুমেন্ট (প্যারামিটার হিসেবে) পাঠানো হয়েছে একটা অবজেক্টকে। তাই সেই অবজেক্টের প্রোপার্টির নাম এর সাথে ফাংশনের প্যারামিটারের অবজেক্টের প্রোপার্টি ডিস্ট্রাকচারিং হয়ে যাবে।
অ্যারে প্যারামিটারে
সিমিলারভাবে অ্যারে দিয়েও ফাংশনের প্যারামিটারকে ডিস্ট্রাকচারিং করা যায়। সিমিলার কনসেপ্ট। জাস্ট অবজেক্টের জায়গায় অ্যারে।
function sum([a, b]) {
return a + b;
}
console.log(sum([5, 10]));
Output: 15Skipping Values in Array Destructuring
অ্যারের কিছু অংশ স্কিপ করতে চাইলে শুধু কমা দিয়ে সেগুলো এড়িয়ে যেতে পারিস।
const numbers = [1, 2, 3, 4, 5];
const [ , second, , fourth] = numbers;
console.log(second);
console.log(fourth);
Output:
2
4
Practice:
- অবজেক্ট থেকে brand প্রোপার্টি আলাদা কর। const product = { name: "Laptop", price: 50000, brand: "Dell" };
- Item অবজেক্ট থেকে phone এবং price প্রোপার্টি ডিস্ট্রাকচারিং কর। const item = { name: "Mobile", price: 20000, phone: "Samsung" }।
- অ্যারে থেকে প্রথম দুইটা উপাদান বের কর। const colors = ["red", "blue", "green", "yellow"];
- তিনটা সংখ্যার একটা অ্যারে থেকে `destructuring` করে সেকেন্ড সংখ্যাটা আলাদা করে second নামক ভেরিয়েবলে রাখ।
- অ্যারের প্রথম এবং শেষ উপাদানকে destructuring করে two এবং eight নামের ভেরিয়েবলে রাখ। const digits = [2, 4, 6, 8]।
- ফাংশন রিটার্ন থেকে ডিস্ট্রাকচারিং করে প্রথম এবং দ্বিতীয় ভ্যালু আলাদা কর। function multiply(a, b) { return [a * 3, b * 3]; }।
- person অবজেক্ট থেকে name এবং city আলাদা কর। আর phone না থাকলে ডিফল্ট ভ্যালু N/A সেট কর। const person = { name: "Rahim", city: "Dhaka" }।
- teacher অবজেক্ট থেকে name এবং profession-এর ভ্যালু বের কর, যেখানে profession-এর নাম alias হিসেবে job রাখ। const teacher = { name: "Maria", profession: "Teacher" }।