destructuring, spread আর rest — এক লাইনে খোলা, ছড়ানো আর জড়ো করা

১ · Destructuring কী — literal দিয়ে বানানোর উল্টো কাজ

পর্ব ১৪ আর ১৫-এ আপনি object আর array বানিয়েছেন: { name: "রহিম", district: "রাজশাহী" }, [120, 80, 250]. এই বাঁকা আর চৌকো বন্ধনীর লেখাকে বলে literal. Literal কয়েকটি আলাদা মানকে একটি বাক্সে ভরে।

কিন্তু প্রোগ্রামে উল্টো কাজটি প্রায় সমান ঘন ঘন লাগে: একটি বাক্স হাতে এসেছে — server থেকে আসা একটি অর্ডার, একটি সেটিংসের object — আর আপনার দরকার তার ভেতরের দুই-তিনটি মান, আলাদা নামে। পুরোনো উপায়ে প্রতিটির জন্য একটি লাইন:

const id = order.id;
const items = order.items;
const district = order.customer.address.district;

ES2015 (ES6) থেকে একই কাজ এক লাইনে করা যায় — একে বলে destructuring:

const { id, items, customer: { address: { district } } } = order;

তিন ডটের দুই চেহারা — আগে মূল নিয়মটি

পর্ব ১৩-এ দেখেছেন, function sum(...prices)-এ তিন ডট বাড়তি argument জড়ো করে (rest parameter), আর Math.max(...prices)-এ একটি array-কে আলাদা আলাদা argument-এ ছড়িয়ে দেয় (spread). এই পর্বে দুটোই অনেক জায়গায় দেখবেন। গুলিয়ে না ফেলার জন্য একটি নিয়ম মনে রাখুন:

“বানানোর জায়গা” মানে array literal [ ], object literal { } আর function কলের বন্ধনী — যেখানে নতুন কিছু তৈরি হচ্ছে বা argument পাঠানো হচ্ছে। “খোলার বা নেওয়ার জায়গা” মানে =-এর বাম পাশের destructuring pattern, আর function-এর parameter তালিকা। ডট একই, দিক উল্টো।

২ · Array destructuring — অবস্থান ধরে খোলা

Array-এর মানের কোনো নাম নেই, আছে শুধু অবস্থান (index). তাই array destructuring মেলায় অবস্থান দিয়ে: pattern-এর প্রথম নাম পায় প্রথম মান, দ্বিতীয় নাম দ্বিতীয় মান।

const scores = [92, 85, 78, 64];

const [first, second] = scores;        // 92, 85 — বাকিগুলো উপেক্ষিত
const [gold, , bronze] = scores;       // 92, 78 — খালি কমা = বাদ
const [a, b, c, d, e = 0] = scores;    // e পেল default 0
const [best, ...others] = scores;      // 92, [85, 78, 64]

কয়েকটি নিয়ম, যা পর্ব ১৩-এর default parameter-এর সাথে হুবহু মেলে:

• Default খাটে শুধু undefined-এ। const [x = 5] = [null]; দিলে x হয় null, ৫ নয় — ঠিক default parameter-এর মতো।
• Rest থাকবে একটিই, আর সবশেষে। const [...a, b] = arr; লিখলে SyntaxError. Rest-এর পরে কমাও দেওয়া যায় না।
• যেকোনো iterable খোলা যায়, শুধু array নয়। const [ch1, ch2] = "ঢাকা"; দেয় "ঢ" আর "া" — string-কে code point ধরে খোলা হয়, তাই দ্বিতীয়টি আকার-চিহ্ন। Set বা Map-ও খোলা যায় (পর্ব ১৮)।

অদলবদল — দুই আসনের যাত্রী বদলানো

মেট্রো রেলের একটি বুকিং অ্যাপ ভাবুন। রাফি আর নীলা পাশাপাশি দুই আসনে; নীলা জানালার পাশে বসতে চায়। দুটি variable-এর মান অদলবদল (swap) করতে পুরোনো দিনে একটি তৃতীয় অস্থায়ী variable লাগত: const temp = seatA; seatA = seatB; seatB = temp;. Destructuring দিয়ে এক লাইনে হয়। কিন্তু এক লাইনে হলেও ভেতরে কী ঘটে, ধাপে ধাপে দেখুন — নইলে মনে হতে পারে প্রথম ঘর বদলে যাওয়ার পর দ্বিতীয়টি ভুল মান পাবে।

1let seatA = "রাফি", seatB = "নীলা";2[seatA, seatB] = [seatB, seatA];3console.log(seatA, seatB);

let seatA = "রাফি", seatB = "নীলা"
[seatA, seatB] = [seatB, seatA]

৩ · Object destructuring — নাম ধরে খোলা

Object-এর property-র নাম আছে, তাই object destructuring মেলায় নাম দিয়ে, অবস্থান দিয়ে নয়। const { name, phone } = customer; লিখলে ক্রম যা-ই হোক, name variable পায় customer.name, phone পায় customer.phone. Object-এ না থাকা নাম চাইলে মান হয় undefined — কোনো error নয়।

সবচেয়ে বেশি গুলিয়ে যায় rename-এর কোলন। Object literal-এ { name: "রহিম" } মানে “বাম পাশ নাম, ডান পাশ মান”। Pattern-এ { name: customerName } মানে “বাম পাশ কোথা থেকে নেবে, ডান পাশ কোথায় রাখবে”। মনে রাখার উপায়: কোলনের ডান পাশে যা আছে, শুধু সেটিই variable হয়। এবার একটি পূর্ণ pattern ধাপে ধাপে দেখুন — server থেকে আসা একটি অর্ডারের উত্তর:

1// res = { id: 501, customer: { name: "রহিম",2//   address: { district: "রাজশাহী" } }, items: [...] }3const {4  id,5  customer: {6    name: customerName,7    phone = "নেই",8    address: { district },9  },10  coupon = "NONE",11} = res;

বাকি property জড়ো করা — rest properties

একটি পণ্যের object থেকে sku আলাদা করে নিতে চান, আর বাকি সব (রং, মাপ, যা-ই থাকুক) একসাথে আরেক জায়গায় পাঠাতে চান। তখন: const { sku, ...extra } = product;. extra একটি নতুন object, যাতে sku বাদে বাকি সব নিজস্ব (own) ও enumerable property আছে। বাস্তবে এর দুটি সাধারণ ব্যবহার:

• একটি property বাদ দেওয়া, মূলটি না বদলে। ব্যবহারকারীর তথ্য browser-এ পাঠানোর আগে পাসওয়ার্ডের hash সরাতে: const { passwordHash, ...safeUser } = user; — safeUser-এ hash নেই, আর user অক্ষত। (delete user.passwordHash মূল object-টিই বদলে দিত।)
• যা চিনি না, তা পার করে দেওয়া। একটি বোতাম বানানোর function নিজের দরকারি label আর color নিয়ে বাকি সব option (id, title, …) সরাসরি HTML element-এ বসিয়ে দেয়: function makeButton({ label, color, ...attrs }). React-এর component-এ এই ধাঁচ প্রচুর দেখবেন (পর্ব ৫৪)।

৪ · Function parameter, লুপ আর callback-এ destructuring

পর্ব ১৩-এ বলেছিলাম, তিনটির বেশি parameter হলে একটি object নিন। কেন? createOrder(2, true, false, "bKash") দেখে কেউ বলতে পারবে না কোন true-টি কী। একই কল option object দিয়ে: createOrder({ qty: 2, express: true, payment: "bKash" }) — প্রতিটি মানের পাশে তার নাম, ক্রমের কোনো ঝামেলা নেই, যেটি দরকার নেই সেটি বাদ। একে বলে options object. আর parameter-এর জায়গায় সরাসরি destructuring লিখলে function-এর প্রথম লাইনেই বোঝা যায় সে কোন কোন option চেনে:

function createOrder({ qty = 1, express = false, payment = "cash" } = {}) {
  // এখানে qty, express, payment সাধারণ variable
}
createOrder({ express: true });   // qty=1, express=true, payment="cash"
createOrder();                    // সব default

শেষের = {} কেন বাদ দেওয়া যায় না

এখানে দুই স্তরের default আছে, আর দুটির কাজ আলাদা:

1. ভেতরের default (qty = 1, …) — object এসেছে, কিন্তু তাতে কোনো একটি property নেই।
2. বাইরের default (= {}) — কোনো object-ই আসেনি। তখন parameter-এর মান undefined, আর undefined-কে destructure করা যায় না।

= {} না দিলে createOrder() ডাকলেই TypeError. ঠিক কোন বার্তা আসে, নিচের প্রথম runnable কোডে নিজেই দেখবেন। অনেক function-এর সব option ঐচ্ছিক — সেখানে কেউ খালি হাতে ডাকবেই। তাই নিয়ম: parameter-এ object destructuring করলে, আর সব property ঐচ্ছিক হলে, শেষে = {} দিন।

null আর undefined খোলা যায় না

Destructuring আসলে ভেতরে ভেতরে property পড়া — { name } = x মানে প্রায় name = x.name. আর null বা undefined-এর কোনো property নেই। তাই:

const { name } = null;
TypeError: Cannot destructure property 'name' of 'null' as it is null.

const [first] = null;
TypeError: null is not iterable

বার্তাগুলো V8-এর (Chrome, Edge, Node.js); Firefox-এর ভাষা আলাদা হলেও ধরন একই। বাস্তবে এটি ঘটে যখন API কোনো ফিল্ড null পাঠায় — যেমন নতুন গ্রাহকের address: null — আর কোডে লেখা থাকে { address: { district } }. Nested pattern-এর প্রতিটি তলা এক একটি সম্ভাব্য TypeError. বাঁচার তিন উপায়: nested অংশে default দিন (address: { district } = {} — শুধু undefined-এ খাটে), null-এর সম্ভাবনা থাকলে আগে ?? দিয়ে বদলে নিন (const address = res.address ?? {};), বা গভীর মান পড়তে পর্ব ০৮-এর optional chaining res.address?.district ব্যবহার করুন।

for…of আর callback-এ destructuring

Destructuring যেকোনো জায়গায় চলে যেখানে নতুন variable তৈরি হয়। দুটি জায়গায় এটি প্রায় অভ্যাসে পরিণত হয়েছে:

• Object-এর key আর value একসাথে ঘোরা: Object.entries(stock) দেয় [key, value] জোড়ার array; for (const [sku, qty] of Object.entries(stock)) প্রতিটি জোড়াকে সাথে সাথে দুটি নামে খোলে (পর্ব ১২-এর for…of). Map-এর ওপর for (const [key, value] of map) একই ধাঁচ (পর্ব ১৮)।
• Array method-এর callback-এ: orders.map(({ id, total }) => `${id}: ${total}`) — callback-এর parameter-এ সরাসরি destructuring. পর্ব ১৬-এর map, filter, sort-এ এটি খুব কাজের। খেয়াল করুন, arrow-এর parameter-এ destructuring থাকলে গোল বন্ধনী বাধ্যতামূলক।

এবার এই অংশ আর আগের অংশগুলোর সব কিছু একসাথে চালিয়ে দেখুন:

const order = {
  id: 501,
  customer: { name: "রহিম", address: { district: "রাজশাহী" } },
  items: [{ sku: "TEA", qty: 2 }, { sku: "BUN", qty: 3 }],
};
const { id, customer: { name: customerName, address: { district } }, items } = order;
console.log(id, customerName, district, items.length);

const [first, , third = "খালি"] = ["A1", "A2"];
let seatA = "রাফি", seatB = "নীলা";
[seatA, seatB] = [seatB, seatA];
console.log(first, third, seatA, seatB);

function createOrder({ qty = 1, express = false } = {}) {
  return `qty=${qty} express=${express}`;
}
console.log(createOrder({ express: true }), "|", createOrder());

function createOrderBad({ qty = 1 }) { return qty; }
try { createOrderBad(); } catch (e) { console.log(e.name + ": " + e.message); }

for (const [sku, qty] of Object.entries({ TEA: 2, BUN: 3 })) console.log(sku, qty);

৫ · Array spread — কপি, জোড়া, মাঝে বসানো আর রূপান্তর

এবার উল্টো দিক। Array literal [ ]-এর ভেতরে ...x লিখলে x-এর প্রতিটি মান একে একে বের হয়ে সেই জায়গায় বসে। “বানানোর জায়গা” — তাই spread.

const morning = ["চা", "পরোটা"];
const evening = ["সিঙ্গারা", "চা"];

const copy    = [...morning];                  // নতুন array, একই মান
const allDay  = [...morning, ...evening];      // জোড়া: 4টি মান
const lunch   = [...morning, "ভাত", ...evening]; // মাঝে বসানো
const letters = [..."বাংলা"];                   // [ 'ব', 'া', 'ং', 'ল', 'া' ]
const unique  = [...new Set(allDay)];          // [ 'চা', 'পরোটা', 'সিঙ্গারা' ]

Spread যেকোনো iterable নেয় — array, string, Set, Map, arguments, DOM-এর NodeList (পর্ব ৩৭)। কিন্তু সাধারণ object iterable নয়: [...{ a: 1 }] লিখলে TypeError — Node.js-এ বার্তা আসে {(intermediate value)} is not iterable. Object-এর মান array-তে চাইলে Object.values(obj) বা Object.entries(obj) দিয়ে আগে array বানিয়ে নিন।

Function কলে spread

পর্ব ১৩-এ দেখেছেন: Math.max(...prices) হলো Math.max(120, 80, 250). যে function আলাদা আলাদা argument চায় কিন্তু আপনার হাতে একটি array, সেখানে spread সেতু। Spread-এর আগে-পরে সাধারণ argument-ও দেওয়া যায়: Math.max(0, ...prices, 100). ES2015-এর আগে এই কাজ হতো Math.max.apply(null, prices) দিয়ে — পর্ব ২৪-এ apply দেখবেন।

৬ · Object spread — কপি, merge আর মূলটি না বদলে হালনাগাদ

Object literal { }-এর ভেতরেও spread চলে (ES2018 থেকে)। { ...obj } লিখলে obj-এর প্রতিটি নিজস্ব (own) enumerable property একটি নতুন object-এ কপি হয়। এর তিনটি বড় ব্যবহার:

“পরেরটি জেতে” নিয়মটিই object spread-এর হৃদয়। একটি অ্যাপের ডিফল্ট সেটিংস আর ব্যবহারকারীর নিজের পছন্দ — কোনটি কাকে ঢাকবে, তা ঠিক হয় শুধু লেখার ক্রম দিয়ে। ধাপে ধাপে দেখুন:

1const a = { theme: "light", lang: "bn", x: 0 };2const b = { theme: "dark", size: 16 };3const r = { ...a, ...b, x: 1 };4console.log(r);

মূলটি না বদলে হালনাগাদ — immutable update

একটি অনলাইন দোকানের কার্টে বনরুটির সংখ্যা ৩ থেকে ৪ করতে হবে। সহজ উপায় cart[1].qty++ — কিন্তু এতে মূল কার্টটিই বদলে যায় (mutation). যে কোড আগের কার্ট মনে রেখেছিল (যেমন “undo” বোতাম, বা পর্দা আবার আঁকা দরকার কি না যাচাই), সে বুঝতেই পারবে না কিছু বদলেছে। বিকল্প হলো immutable update: মূলটি না ছুঁয়ে একটি নতুন কার্ট বানানো, যাতে শুধু বদলানো অংশ নতুন:

const updated = cart.map((item) =>
  item.sku === "BUN" ? { ...item, qty: item.qty + 1 } : item
);

Object spread-এর তিনটি সূক্ষ্ম নিয়ম

• undefined-ও একটি মান — ঢেকে দেয়। { ...defaults, ...{ fontSize: undefined } }-এ fontSize হয় undefined; default parameter-এর মতো “undefined হলে বাদ” নিয়ম এখানে নেই। Form থেকে আসা ফাঁকা ঘর merge করার আগে undefined মানের key সরিয়ে নিন। নিচের দ্বিতীয় runnable কোডে দেখবেন।
• null, undefined spread করলে কিছু হয় না। { ...null } দেয় {}, কোনো error নয় — তাই { ...defaults, ...maybeSettings } নিরাপদ। (Array spread-এ [...null] কিন্তু TypeError.) String spread করলে প্রতিটি অক্ষর একটি সংখ্যা-key পায়: { ..."hi" } দেয় { '0': 'h', '1': 'i' }.
• শুধু নিজস্ব, enumerable property কপি হয়। Prototype থেকে পাওয়া method কপি হয় না। তাই একটি class-এর object spread করলে (পর্ব ২৬) সাধারণ object পাবেন — method হারিয়ে যায়। Getter থাকলে তার বর্তমান মান কপি হয়, getter নিজে নয়।

৭ · Shallow copy-র ফাঁদ — ভেতরের object ভাগাভাগি

এই পর্বের সবচেয়ে গুরুত্বপূর্ণ সতর্কবাণী: spread কপি করে শুধু ওপরের তলা। একে বলে shallow copy. কোনো property-র মান নিজেই একটি object বা array হলে, কপি হয় শুধু তার reference — ঠিকানা। ফলে নতুন আর পুরোনো object দুটিই একই ভেতরের object-কে দেখায়। ধাপে ধাপে দেখুন:

1const original = { name: "রহিম",2  address: { district: "রাজশাহী" } };3const copy = { ...original };4copy.name = "করিম";5copy.address.district = "খুলনা";6console.log(original.name, original.address.district);

সমাধান দুই রকম। (ক) প্রতিটি তলায় spread: { ...original, address: { ...original.address, district: "খুলনা" } } — যে পথে বদল, সেই পথের প্রতিটি object নতুন। Immutable update-এ এটাই প্রচলিত ধাঁচ। (খ) পুরো গভীর কপি: structuredClone(original) — প্রতিটি তলার নতুন কপি, একে বলে deep copy. এটি কোন কোন জিনিস কপি করতে পারে আর কোনগুলো পারে না (function, DOM node), পুরোটা পর্ব ১৯-এ। পুরোনো কৌশল JSON.parse(JSON.stringify(x))-এর দুর্বলতাও সেখানে।

এবার spread-এর সব দিক নিজে চালিয়ে দেখুন — settings merge, কার্ট হালনাগাদ, shallow copy-র ফাঁদ আর rest properties:

const defaults = { theme: "light", lang: "bn", fontSize: 16 };
const userSettings = { theme: "dark", fontSize: undefined };
console.log({ ...defaults, ...userSettings, lang: "en" });

const cart = [{ sku: "TEA", qty: 2 }, { sku: "BUN", qty: 3 }];
const updated = cart.map((item) =>
  item.sku === "BUN" ? { ...item, qty: item.qty + 1 } : item
);
console.log(cart[1].qty, updated[1].qty, cart === updated, cart[0] === updated[0]);

const original = { name: "রহিম", address: { district: "রাজশাহী" } };
const copy = { ...original };
copy.name = "করিম";
copy.address.district = "খুলনা";
console.log(original.name, original.address.district);

const prices = [120, 80, 250];
console.log(Math.max(...prices), [..."বাংলা"].length, [...new Set([3, 1, 3])]);
const { sku, ...extra } = { sku: "TEA", color: "লাল", size: "M" };
console.log(sku, extra);

৮ · Rest বনাম spread এক টেবিলে, আর কখন destructuring ক্ষতি করে

কোন জিনিস কোথায় spread করা যায় — একটি ছোট টেবিল, কারণ এখানে প্রায়ই ভুল হয়:

Map-কে array বানাতে [...map], আবার Map-এ ফেরাতে new Map(arr); object থেকে Map-এ যেতে new Map(Object.entries(obj)) — পর্ব ১৮-এ এই সেতুগুলো কাজে লাগবে।

কখন destructuring পড়া কঠিন করে

Destructuring ছোট লেখার যন্ত্র, কিন্তু ছোট মানেই পরিষ্কার নয়। নিচের লাইনটি বৈধ JavaScript:

const { data: { order: { customer: { address: { district: d = "?" } = {} } = {} } = {} } = {} } = res;

এটি কী করে, বুঝতে আপনার কত সেকেন্ড লাগল? একই কাজ পর্ব ০৮-এর অস্ত্র দিয়ে: const d = res.data?.order?.customer?.address?.district ?? "?"; — বাম থেকে ডানে পড়া যায়, আর null-ও সামলায় (destructuring-এর default সামলায় শুধু undefined). কয়েকটি ব্যবহারিক নিয়ম:

• এক বা দুই তলা পর্যন্ত destructuring ঠিক আছে; তার বেশি হলে optional chaining বা কয়েকটি আলাদা লাইন।
• Rename-এর কারণে মূল নাম হারালে পাঠক বিভ্রান্ত হন। { name: n, price: p }-এর চেয়ে { name, price } ভালো; rename করুন শুধু নামের সংঘর্ষ এড়াতে (যেমন দুটি object-এরই name আছে)।
• অনেক মানের array destructuring ([ , , , x]) এড়িয়ে চলুন। চারটি কমা গুনে কেউ পড়তে চায় না; arr[3] বা arr.at(-1) বেশি স্পষ্ট। Array destructuring সবচেয়ে ভালো ছোট, নির্দিষ্ট আকারের “tuple”-এ — [key, value], [lat, lng], React-এর [count, setCount].

৯ · AI-এর যুগে — AI-এর লেখা destructuring আর spread যাচাই

AI টুলগুলো destructuring আর spread খুব পছন্দ করে — আধুনিক দেখায়, লাইন কমে। সমস্যা হলো, এগুলোর ভুল প্রায়ই চোখে পড়ে না: কোড চলে, শুধু বিশেষ কোনো ইনপুটে (খালি কল, null ফিল্ড, nested বদল) ভাঙে। এই বিষয়ে AI-এর সাধারণ ভুলগুলো:

AI-এর লেখা কোড হাতে পেলে — যাচাইয়ের চেকলিস্ট

• প্রতিটি nested destructuring-এর প্রতিটি তলা null বা undefined হলে কী হবে, ভেবে দেখেছি
• Parameter-এ object destructuring থাকলে শেষে = {} আছে, আর function-টি argument ছাড়া ডেকে দেখেছি
• যেখানে “কপি” করা হয়েছে, সেখানে ভেতরের object বদলানো হয় কি না দেখেছি — হলে shallow copy-র ফাঁদ
• Object merge-এর ক্রম ঠিক আছে (যা জেতা উচিত, সেটি পরে), আর undefined মান কিছু মুছছে না
• Rename-এর কোলনের দিক ঠিক — বাম পাশে উৎস, ডান পাশে নতুন নাম
• বড় বা অজানা আকারের array Math.max(...arr)-এর মতো function কলে spread হচ্ছে না, আর লুপে [...acc, x] নেই