জাভাস্ক্রিপ্টে ডেটা অ্যাক্সেস এবং ম্যানিপুলেশন একটি গুরুত্বপূর্ণ স্কিল। ES6-এর সাথে, ডেটা অ্যাক্সেসকে আরও সিম্পল এবং সহজ করার জন্য অ্যারে এবং অবজেক্ট Destructuring নামক একটি শক্তিশালী feature এসেছে। আজ আমরা এই Destructuring নিয়েই আলোচনা করবো।
জাভাস্ক্রিপ্টে ডিস্ট্রাকচারিং কি?
ডিস্ট্রাকচারিং হলো একটি ES6 বৈশিষ্ট্য যা আপনাকে অ্যারে এবং অবজেক্টের উপাদানগুলিকে সরাসরি ভেরিয়েবলে extract করতে দেয়। এটি সাধারণ অ্যারে ইনডেক্সিং এবং অবজেক্ট প্রোপার্টি অ্যাক্সেসের চেয়ে স্বচ্ছ এবং কম এরর
যুক্ত ।
কোডে ডিস্ট্রাকচারিং এর গুরুত্ব:
i. Clean code: ডিস্ট্রাকচারিং কোডকে আরও clean এবং বোঝার জন্য সহজ করে তোলে।
ii. Less error: ডিস্ট্রাকচারিং দুর্ঘটনাবশত ভুল প্রোপার্টি অ্যাক্সেস করার সম্ভাবনা কমিয়ে দেয়।
iii. Less code: ডিস্ট্রাকচারিং কোডকে সংক্ষিপ্ত করতে পারে, বিশেষ করে যখন আপনি একাধিক মান অ্যাক্সেস করছেন।
iv. Reduce repetition: ডিস্ট্রাকচারিং ডেটা অ্যাক্সেসের জন্য একই কোড বারবার লেখার প্রয়োজনীয়তা হ্রাস করে।
Array Destructuring কি?
Array Destructuring হলো জাভাস্ক্রিপ্টে একটি ES6 বৈশিষ্ট্য যা আপনাকে একটি অ্যারের element গুলিকে সরাসরি ভেরিয়েবলে extract করতে দেয়। এটি সাধারণ অ্যারে ইনডেক্সিংয়ের চেয়ে clean এবং কম ত্রুটিপূর্ণ।
Array Destructuring এর সিনট্যাক্স:
const [first, second, ...rest] = array;
এই কোডে, array থেকে প্রথম দুটি উপাদান first এবং second ভেরিয়েবলে extract করা হয়েছে। ...rest ব্যবহার করে, অবশিষ্ট উপাদানগুলি rest নামক একটি অ্যারেতে সংরক্ষণ করা হয়েছে।
Array Destructuring এর ব্যবহার:
অ্যারের উপাদানগুলিকে ভেরিয়েবলে extract করতে:
const numbers = [1, 2, 3];
const [first, second] = numbers; // first = 1, second = 2
console.log(`first= ${first}, second = ${second}`) //first= 1, second = 2
অ্যারে থেকে নির্দিষ্ট উপাদান বাদ দিতে:
const numbers = [1, 2, 3, 4];
const [first, , third] = numbers; // first = 1, third = 3 (skips second element)
console.log(`first= ${first}, third = ${third}`)//first= 1, third = 3
অ্যারের উপাদানগুলিকে নতুন নাম দিতে:
const numbers = [1, 2, 3];
const [ one, two ] = numbers; // one = 1, two = 2
console.log(`One= ${one}, two = ${two}`)//One= 1, two = 2
অ্যারের অবশিষ্ট উপাদানগুলি পেতে:
const numbers = [1, 2, 3,4,5];
const [ , , ...bakiGulo ] = numbers; // one = 1, two = 2
console.log(`baki gulo= ${bakiGulo}`)//baki gulo= 3,4,5
ডিফল্ট মান ব্যবহার করে undefined মান হ্যান্ডেল করা:
const numbers = [1];
const [first, second = "Unknown"] = numbers; // first = 1, second = "janina" (if second is not present)
console.log(`first= ${first}, second = ${second}`)//first= 1, second = janina
নেস্টেড অ্যারের মধ্যে ডিস্ট্রাকচারিং:
const nestedArray = [[1, 2], [3, 4]];
const [first, second] = nestedArray; // first = [1, 2], second = [3, 4]
console.log(`first= ${first}, second = ${second}`)//first= 1,2, second = 3,4
const [firstArr, [third, fourth]] = nestedArray; // first = 1, third = 3, fourth = 4
console.log( `firstArray= ${firstArr}, third = ${third}, fourth= ${fourth}`)//firstArray= 1,2, third = 3, fourth= 4
Object Destructuring কি?
Object Destructuring হলো জাভাস্ক্রিপ্টের একটি ES6 বৈশিষ্ট্য যা আপনাকে একটি অবজেক্টের প্রোপার্টিগুলিকে সরাসরি ভেরিয়েবলে এক্সট্রাক্ট করতে দেয়। এটি সাধারণ ডট নোটেশন ব্যবহার করে প্রোপার্টি অ্যাক্সেস করার চেয়ে clean এবং কম ত্রুটিপূর্ণ।
Object Destructuring এর সিনট্যাক্স:
const { name, age } = object;
এই কোডে, object থেকে name এবং age প্রোপার্টিগুলিকে name এবং age ভেরিয়েবলে এক্সট্রাক্ট করা হয়েছে।
অবজেক্ট ডিস্ট্রাকচারিং এর ব্যবহার:
অবজেক্টের প্রোপার্টিগুলিকে ভেরিয়েবলে এক্সট্রাক্ট করতে:
const person = { name: "John", age: 30 };
const { name, age } = person; // name = "John", age = 30
console.log(`Name: ${name}, age: ${age}`)
অবজেক্ট থেকে নির্দিষ্ট প্রোপার্টি বাদ দিতে:
const person = { name: "Sherlock Holmes", age: 30, address: "221 B Baker Street" };
const { name, age } = person; // address is not extracted here
console.log(`Name: ${name}, age: ${age}`)// name = "John", age = 30
অবজেক্টের প্রোপার্টিগুলিকে নতুন নাম দিতে:
const person = { name: "Sherlock Holmes", age: 30, address: "221 B Bekar Street" };
const { name:writerName, age:writerAge } = person;
console.log(`Writer Name: ${writerName}, Writer age: ${writerAge}`)
Writer Name: Sherlock Holmes, Writer age: 30
ডিফল্ট মান ব্যবহার করে undefined মান হ্যান্ডেল করা:
const person = { name: "Sherlock" };
const { age = "janina" } = person; // age = "janina" (if age is not present)
console.log(`Age: ${age}`) //Age: janina
নেস্টেড অবজেক্টের মধ্যে ডিস্ট্রাকচারিং:
const nestedObject = {
person: { name: "John", age: 30 },
address: { city: "New York", state: "NY" },
};
const { person: { name, age }, address:{city, state} } = nestedObject; // name = "John", age = 30
console.log(`Name: ${name} Age: ${age}, address: ${city}, ${state}`)//Name: John Age: 30, address: New York, NY
Array / Object ডিস্ট্রাকচারিংয়ের benifits:
Easy Data Access: কমপ্লেক্স অ্যারে স্ট্রাকচারের মধ্যে থেকেও নির্দিষ্ট মানগুলি অ্যাক্সেস করা সহজ করে তোলে।
Set default value: যদি কোনো উপাদান না থাকে তাহলে ডিফল্ট মান সেট করা যায়, যা এরর এড়াতে সাহায্য করে।
অ্যারে এবং অবজেক্ট ডিস্ট্রাকচারিং এর মধ্যে পার্থক্য:
1. Access Element:
Array Destructuring: অ্যারের ইনডেক্স অনুযায়ী এলিমেন্ট অ্যাক্সেস করা হয়।
যেমন:
const numbers = [1, 2, 3];
const [ firstNumber ]= numbers;
Object Destructuring: অবজেক্টের প্রোপার্টি নাম অনুযায়ী এলিমেন্ট অ্যাক্সেস করা হয়।
যেমন:
const person = { name: "John", age: 30 };
const {name} = person;
2. Order:
Array Destructuring: অ্যারেতে element অর্ডার গুরুত্বপূর্ণ। যে ক্রমে/সিরিয়াল আপনি ভেরিয়েবলে আনবেন সেই ক্রমেই অ্যারের উপাদানগুলি মিলিয়ে নেওয়া হবে।
Object Destructuring: অবজেক্টে প্রোপার্টির অর্ডার গুরুত্বপূর্ণ নয়। আপনি যে কোনো ক্রমে প্রোপার্টিগুলিকে ভেরিয়েবলে আনতে পারেন।
3. Default Value:
অ্যারে এবং অবজেক্ট ডিস্ট্রাকচারিং: উভয় ক্ষেত্রেই ডিফল্ট মান ব্যবহার করা যায় যদি কোনো উপাদান বা প্রোপার্টি অনুপস্থিত থাকে।
4. ব্যবহারের ক্ষেত্র:
Array Destructuring: সাধারণত অ্যারের প্রথম কয়েকটি এলিমেন্ট বা নির্দিষ্ট ইনডেক্সের ভ্যালু আনার জন্যে ব্যবহৃত হয়।
Object Destructuring: সাধারণত অবজেক্টের একাধিক প্রোপার্টি একসাথে আনার জন্যে ব্যবহৃত হয়।
এই ছিল অ্যারে এবং অবজেক্ট Destructuring নিয়ে আজকের আলোচনা।
Happy coding 🎉🎉
Top comments (0)