Q16. What is destructuring in JavaScript? Explain with array and object examples.
Array ও object থেকে একসাথে আলাদা ভেরিয়েবলে মান বের করার সুন্দর পদ্ধতি।
Destructuring মানে কোনো array বা object থেকে ভেতরের মানগুলো একসাথে ধরে আলাদা আলাদা ভেরিয়েবলে বের করে নেওয়া। ES6-এ এসেছে এবং লাইনে লাইনে index বা key বের করার কাজ অনেক ছোট করে দেয়।
// array — বাঁ পাশে ধন্ডার বন্ধনী
const [first, second, third] = [10, 20, 30];
console.log(first, second, third); // 10 20 30
// object — বাঁ পাশে লাল বন্ধনী
const { name, age } = { name: "Rahim", age: 25 };
console.log(name, age); // "Rahim" 25মূল কথা হলো, variable-এর নাম ডান পাশের key বা অবস্থানের সাথে মেলানো হচ্ছে। Array-তে মেলানো হয় অবস্থান দিয়ে আর object-এ key দিয়ে।
দুই ধরনেই নতুন নামে সেট করা, ডিফল্ট মান দেওয়া আর বাকিগুলো বের করার সুবিধা আছে।
// নাম বদলানো
const { name: userName } = { name: "Rahim" };
console.log(userName); // "Rahim"
// ডিফল্ট মান
const { role = "user" } = {};
console.log(role); // "user"
// বাকিগুলো বের করা (rest)
const [a, ...others] = [1, 2, 3, 4];
console.log(a, others); // 1 [2, 3, 4]
// skip করা — ফাঁকা জায়গা রাখতে হয়
const [, second] = ["x", "y", "z"];
console.log(second); // "y"Nested object ও array-এও কাজ করে, এবং swap করার জন্য এটি সবচেয়ে স্বাভাবিক উপায়।
// nested
const {
user: { name, address: { city } },
} = {
user: { name: "Rahim", address: { city: "Dhaka" } },
};
console.log(name, city); // "Rahim" "Dhaka"
// swap — অতিরিক্ত ভেরিয়েবল ছাড়াই
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1ফাংশনের প্যারামিটারেও destructuring ব্যবহার হয়, তাই ওপনএক্সলে কোনো property ব্যবহার না করলেও obj.x লিখতে হয় না।
function greet({ name, age = 0 }) {
return name + " (" + age + ")";
}
console.log(greet({ name: "Rahim", age: 25 })); // "Rahim (25)"
// map-এর সাথে খুব প্রাকৃতিক
const users = [{ name: "Rahim" }, { name: "Karim" }];
console.log(
users.map(({ name }) => name)
); // ["Rahim", "Karim"]API থেকে আসা বড় object থেকে দুই-একটা প্রপার্টি দরকার হলে, বা map-এর ভিতরে কাজ করলে destructuring কোড অনেক পরিষ্কার করে দেয়।