✨ জাভাস্ক্রিপ্ট ডিস্ট্রাকচারিং (JavaScript Destructuring) বিস্তারিত টিউটোরিয়াল
ডিস্ট্রাকচারিং (Destructuring) হলো জাভাস্ক্রিপ্টের একটি অত্যন্ত গুরুত্বপূর্ণ ফিচার যা ব্যবহার করে আপনি কোনো অ্যারে বা অবজেক্ট থেকে সহজেই মান বের করে নিয়ে ভ্যারিয়েবলে রাখতে পারেন। এটি কোডকে আরও সংক্ষিপ্ত ও ক্লিন করে তোলে। এই টিউটোরিয়ালে আমরা বিস্তারিতভাবে দেখব কিভাবে অ্যারে এবং অবজেক্ট ডিস্ট্রাকচারিং কাজ করে, বিভিন্ন উদাহরণসহ।
অ্যারে ডিস্ট্রাকচারিং (Array Destructuring)
অ্যারে ডিস্ট্রাকচারিং-এর মাধ্যমে একটি অ্যারে থেকে এক বা একাধিক মান খুব সহজেই বের করা যায়।
<script>
const numbers = [10, 20, 30];
const [a, b, c] = numbers;
console.log(a); // 10
console.log(b); // 20
console.log(c); // 30
</script>
ব্যাখ্যা: এখানে অ্যারে `numbers` থেকে প্রতিটি উপাদানকে আলাদাভাবে `a`, `b`, `c` তে ডিস্ট্রাকচার করা হয়েছে।
অবজেক্ট ডিস্ট্রাকচারিং (Object Destructuring)
অবজেক্ট ডিস্ট্রাকচারিং ব্যবহার করে অবজেক্টের প্রপার্টিগুলো ভ্যারিয়েবলে রাখা যায় একই নাম অনুসারে।
<script>
const user = {name: “Rahim”, age: 25, city: “Dhaka”};
const {name, age, city} = user;
console.log(name); // Rahim
console.log(age); // 25
console.log(city); // Dhaka
</script>
ব্যাখ্যা: এখানে অবজেক্ট `user` এর প্রপার্টিগুলো একই নামের ভ্যারিয়েবলে রাখা হয়েছে।
ফাংশনের প্যারামিটারে ডিস্ট্রাকচারিং
ফাংশনের প্যারামিটার হিসেবেও ডিস্ট্রাকচারিং ব্যবহার করা যায়, যা কোডকে আরও সহজ এবং পড়তে সুবিধাজনক করে তোলে।
<script>
function displayUser({name, age}) {
console.log(`Name: ${name}, Age: ${age}`);
}
const user = {name: “Karim”, age: 30};
displayUser(user);
</script>
ডিফল্ট ভ্যালু ব্যবহার
কখনো কোনো ভ্যালু না থাকলে ডিফল্ট ভ্যালু সেট করা যায় ডিস্ট্রাকচারিং এর মাধ্যমে।
<script>
const [x = 5, y = 10] = [1];
console.log(x); // 1
console.log(y); // 10
</script>
Nested Destructuring
Nested ডেটার ক্ষেত্রেও destructuring করা যায়।
<script>
const person = {
name: “Hasan”,
address: { city: “Chittagong”, zip: 4000 }
};
const {address: {city, zip}} = person;
console.log(city); // Chittagong
console.log(zip); // 4000
</script>
ব্যবহারিক উদাহরণ – টেবিল ফরম্যাটে
নিচের টেবিলটি দেখায় কোন ধরনের ডেটা কিভাবে ডিস্ট্রাকচারিং হয়:
| ধরন | উদাহরণ | আউটপুট |
|---|---|---|
| Array Destructuring | const [a] = [5] | a = 5 |
| Object Destructuring | const {name} = {name: “Ali”} | name = “Ali” |
✅ উপসংহার
ডিস্ট্রাকচারিং ব্যবহার করলে জাভাস্ক্রিপ্ট কোড আরও সহজ, পরিষ্কার এবং সংক্ষিপ্ত হয়। এটি একটি অত্যন্ত উপযোগী ফিচার বিশেষ করে ফাংশনের প্যারামিটার হ্যান্ডলিং, রিঅ্যাক্ট কম্পোনেন্ট, বা API থেকে ডেটা রিড করার সময়। আশা করি এই টিউটোরিয়ালটি আপনার জন্য উপকারী হয়েছে।