Advance JavaScript শিখুন বাংলায় (পর্ব ৪) — Destructuring (Array ও Object) শিখুন

আগের পর্বে আমরা this কীওয়ার্ড নিয়ে গভীরে গিয়েছিলাম। এই পর্বে আমরা দেখব একটা সিনট্যাক্স যেটা প্রতিদিনের কোডকে অনেক সংক্ষিপ্ত আর পরিষ্কার করে তোলে — Destructuring, অ্যারে আর অবজেক্ট থেকে সহজে ভ্যারিয়েবল "বের করে নেওয়ার" আধুনিক পদ্ধতি।

সমস্যাটা কী?

Destructuring আসার আগে অবজেক্ট বা অ্যারে থেকে একাধিক মান বের করতে এভাবে লিখতে হতো:

const user = { name: "আরিফ", age: 28, city: "ঢাকা" };

// ❌ পুরনো পদ্ধতি — বারবার user. লিখতে হচ্ছে
const name = user.name;
const age = user.age;
const city = user.city;

Object Destructuring

একই কাজ Destructuring দিয়ে এক লাইনে করা যায় — কী-নামগুলো ভ্যারিয়েবল নাম হিসেবে ব্যবহার হয়:

const user = { name: "আরিফ", age: 28, city: "ঢাকা" };

// ✅ Destructuring দিয়ে
const { name, age, city } = user;

console.log(name); // আরিফ
console.log(age); // 28
console.log(city); // ঢাকা

ভিন্ন নামে রাখা (Renaming)

মূল কী-নাম না রেখে অন্য নামে ভ্যারিয়েবল বানাতে চাইলে : ব্যবহার করা হয়:

const user = { name: "আরিফ", age: 28 };

const { name: userName, age: userAge } = user;

console.log(userName); // আরিফ
console.log(name); // ❌ ReferenceError — name বলে কিছু নেই আর

ডিফল্ট মান

প্রপার্টি না থাকলে একটা ডিফল্ট মান ব্যবহার করা যায়:

const settings = { theme: "dark" };

const { theme, fontSize = 16, language = "bn" } = settings;

console.log(theme); // dark (আছে বলে সেটাই ব্যবহার হলো)
console.log(fontSize); // 16 (ছিল না, তাই ডিফল্ট মান ব্যবহার হলো)
console.log(language); // bn (ছিল না, ডিফল্ট)

Nested Destructuring — ভেতরের অবজেক্ট থেকেও

অবজেক্টের ভেতরে অবজেক্ট থাকলেও একধাপে বের করা যায়:

const user = {
  name: "আরিফ",
  address: {
    city: "ঢাকা",
    zip: "1200"
  }
};

const {
  name,
  address: { city, zip }
} = user;

console.log(name); // আরিফ
console.log(city); // ঢাকা
console.log(zip); // 1200
console.log(address); // ❌ ReferenceError — address নিজে ডিক্লেয়ার হয়নি, শুধু তার ভেতরেরটা

Array Destructuring

অ্যারেতে অবস্থান (position) অনুযায়ী মান বের করা হয়, কী-নাম না লেগে:

const colors = ["লাল", "সবুজ", "নীল"];

const [first, second, third] = colors;

console.log(first); // লাল
console.log(second); // সবুজ
console.log(third); // নীল

কোনো একটা মান বাদ দিতে চাইলে কমা খালি রেখে দেওয়া যায়:

const [first, , third] = colors; // দ্বিতীয়টা বাদ

console.log(first); // লাল
console.log(third); // নীল

সবচেয়ে জনপ্রিয় ব্যবহার — ভ্যারিয়েবল সোয়াপ

দুটো ভ্যারিয়েবলের মান বদলাবদলি করতে আগে একটা "temp" ভ্যারিয়েবল লাগত, এখন এক লাইনেই হয়ে যায়:

let a = 1;
let b = 2;

// ❌ পুরনো পদ্ধতি
let temp = a;
a = b;
b = temp;

// ✅ Destructuring দিয়ে
[a, b] = [b, a];

console.log(a, b); // 2, 1

ফাংশন প্যারামিটারে Destructuring

একটা ফাংশনে অনেকগুলো অপশন পাস করতে হলে অবজেক্ট প্যারামিটার সহ Destructuring খুব কাজে লাগে — আর্গুমেন্টের ক্রম মনে রাখতে হয় না।

// ❌ পুরনো পদ্ধতি — অনেকগুলো প্যারামিটার, ক্রম মনে রাখতে হয়
function createUser(name, age, city, isAdmin) {
  // ...
}
createUser("আরিফ", 28, "ঢাকা", false); // ক্রম ভুল হলে বাগ!

// ✅ Destructuring দিয়ে — নাম দিয়ে পাস করা যায়, ক্রম কোনো ব্যাপার না
function createUserBetter({ name, age, city, isAdmin = false }) {
  console.log(`${name}, ${age}, ${city}, admin: ${isAdmin}`);
}

createUserBetter({ city: "ঢাকা", name: "আরিফ", age: 28 });
// ক্রম যাই হোক, ঠিকমতো কাজ করবে — আর isAdmin না দিলেও ডিফল্ট false হবে

লাইভ ডেমো — অবজেক্ট থেকে ফর্ম ডেটা বের করা

নিচের ফর্ম পূরণ করে বাটনে চাপো — Destructuring দিয়ে একটা অবজেক্ট থেকে সবকিছু একসাথে বের করে দেখানো হবে।

একটা সম্পূর্ণ উদাহরণ — API রেসপন্স থেকে ডেটা বের করা

বাস্তব প্রজেক্টে (যেমন Mobile Khujo বা Pathok Ghor-এ) API থেকে আসা জটিল অবজেক্ট থেকে দরকারি তথ্য বের করতে Destructuring খুব উপকারী:

// ধরো এটা Firebase থেকে আসা একটা বইয়ের ডেটা
const bookData = {
  id: "book123",
  title: "সোনার তরী",
  author: {
    name: "রবীন্দ্রনাথ ঠাকুর",
    id: "author001"
  },
  tags: ["কবিতা", "ক্লাসিক", "বাংলা"],
  stats: {
    views: 1520,
    downloads: 340
  }
};

// এক লাইনে দরকারি সব তথ্য বের করা
const {
  title,
  author: { name: authorName },
  tags: [primaryTag],
  stats: { views }
} = bookData;

console.log(title); // সোনার তরী
console.log(authorName); // রবীন্দ্রনাথ ঠাকুর
console.log(primaryTag); // কবিতা (প্রথম ট্যাগ)
console.log(views); // 1520

এখানে একটা লাইনেই — লেখকের নাম (nested object থেকে), প্রথম ট্যাগ (array থেকে), আর ভিউ কাউন্ট (আরেকটা nested object থেকে) — সবকিছু বের করে ফেলা হয়েছে।

নিজে চেষ্টা করো

Exercise:

1. একটা product অবজেক্ট বানাও (নাম, দাম, স্টক), তারপর Destructuring দিয়ে সব ভ্যারিয়েবলে বের করো, দামের জন্য ডিফল্ট মান দাও।
2. একটা অ্যারে [10, 20, 30, 40, 50] থেকে প্রথম আর শেষ মান Array Destructuring দিয়ে বের করো (তৃতীয় হিন্ট: ...rest দিয়ে বাকিটা)।
3. দুটো ভ্যারিয়েবল সোয়াপ করার Exercise করো, দেখো temp ভ্যারিয়েবল ছাড়াই কীভাবে হয়।
4. উপরের createUserBetter ফাংশনটা নিজে লিখো, তারপর বিভিন্ন ক্রমে আর্গুমেন্ট পাস করে দেখো ফলাফল একই থাকে কিনা।

পরের পর্বে যা থাকছে

পরের পর্বে আমরা শিখব Spread ও Rest Operator — ... এই তিনটা বিন্দুর দুই ভিন্ন কিন্তু সম্পর্কিত ব্যবহার, যা Destructuring-এর সাথে হাত ধরাধরি করে কাজ করে।