Array.prototype.with এর সাথে অপরিবর্তনীয় অ্যারে আপডেট

Jad Joubran

উদযাপন: এই ওয়েব বৈশিষ্ট্যটি এখন তিনটি প্রধান ব্রাউজার ইঞ্জিনেই উপলব্ধ!

ব্রাউজারগুলি সম্প্রতি একটি নতুন ইন্টারঅপারেবল পদ্ধতি অর্জন করেছে যা আপনি অ্যারেতে কল করতে পারেন: Array.prototype.with() ।

Browser Support

• 110
• 110
• 115
• 16

Source

এই প্রবন্ধে এই পদ্ধতিটি কীভাবে কাজ করে এবং মূল অ্যারে পরিবর্তন না করে কীভাবে এটি ব্যবহার করে একটি অ্যারে আপডেট করা যায় তা অন্বেষণ করা হয়েছে।

Array.prototype.with(index, value) এর ভূমিকা

Array.prototype.with(index, value) পদ্ধতিটি আপনার প্রদত্ত নতুন value index সেট করে যে অ্যারেটি তৈরি করা হয়েছে তার একটি অনুলিপি ফেরত দেয়।

নিচের উদাহরণটি বয়সের একটি অ্যারে দেখায়। আপনি দ্বিতীয় বয়স ১৫ থেকে ১৬ তে পরিবর্তন করে অ্যারের একটি নতুন কপি তৈরি করতে চান:

const ages = [10, 15, 20, 25];

const newAges = ages.with(1, 16);
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)

কোডটি ভেঙে ফেললে:: ages.with(...) মূল অ্যারে পরিবর্তন না করেই ages ভেরিয়েবলের একটি কপি ফেরত আসে। ages.with(1, …) দ্বিতীয় আইটেমটি ( index = 1 ) প্রতিস্থাপন করে। ages.with(1, 16) দ্বিতীয় আইটেমটিকে 16 এ বরাদ্দ করে।

এইভাবে আপনি একটি পরিবর্তন সহ অ্যারের একটি নতুন কপি তৈরি করতে সক্ষম হয়েছেন।

মূল অ্যারেটি অপরিবর্তিত রাখার জন্য এটি বেশ কার্যকর, এবং এই নিবন্ধটি এর জন্য কিছু ব্যবহারের ক্ষেত্রে আলোচনা করবে। তবে, আপাতত, ব্র্যাকেট নোটেশন ব্যবহার করলে কী হত তা একবার দেখে নিন:

const ages = [10, 15, 20, 25];

const newAges = ages;
newAges[1] = 16;
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 16, 20, 25] (Also changed 🙁)

আপনি দেখতে পাচ্ছেন, এই উদাহরণে ages ভেরিয়েবলটিও পরিবর্তন করা হয়েছে। কারণ যখন আপনি ages = newAges বরাদ্দ করেন, তখন জাভাস্ক্রিপ্ট অ্যারেটি কপি করে না বরং অন্য অ্যারেতে একটি রেফারেন্স তৈরি করে। সুতরাং, একটিতে যেকোনো পরিবর্তন অন্যটির উপরও প্রভাব ফেলবে কারণ উভয়ই একই অ্যারেকে নির্দেশ করছে।

Array.prototype.with() এবং অপরিবর্তনীয়তা

অনেক ফ্রন্টএন্ড লাইব্রেরি এবং ফ্রেমওয়ার্কের কেন্দ্রবিন্দুতে অপরিবর্তনীয়তা রয়েছে, কয়েকটির নাম বলতে গেলে: রিঅ্যাক্ট (এবং রিডাক্স), এবং ভ্যু।

এছাড়াও, অন্যান্য লাইব্রেরি এবং ফ্রেমওয়ার্কগুলিতে অগত্যা অপরিবর্তনীয়তার প্রয়োজন হয় না তবে আরও ভাল পারফরম্যান্সের জন্য এটিকে উৎসাহিত করে: অ্যাঙ্গুলার এবং লিট

তাই, ডেভেলপারদের প্রায়শই অন্যান্য পদ্ধতি ব্যবহার করতে হত যা অ্যারের কপি ফেরত দিত যা কোড পঠনযোগ্যতাকে ক্ষুন্ন করত:

const ages = [10, 15, 20, 25];

const newAges = ages.map((age, index) => {
    if (index === 1) {
         return 16;
    }
    return age;
});

console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (Remains unchanged)

React-এ .with() useState-এর সাথে একত্রে ব্যবহার করে আইটেমের একটি অ্যারে অপরিবর্তনীয়ভাবে আপডেট করার জন্য কীভাবে কোডপেন ব্যবহার করা যেতে পারে তার একটি উদাহরণ এখানে দেওয়া হল:

যেহেতু .with() পদ্ধতিটি অ্যারের একটি অনুলিপি ফেরত দেয়, তাই আপনি একাধিক .with() কল বা এমনকি অন্যান্য অ্যারে পদ্ধতিগুলিকে চেইন করতে পারেন। নিম্নলিখিত উদাহরণটি অ্যারে থেকে দ্বিতীয় এবং তৃতীয় বয়স বৃদ্ধি করার বিষয়টি প্রদর্শন করে:

const ages = [10, 15, 20, 25];

const newAges = ages.with(1, ages[1] + 1).with(2, ages[2] + 1)

console.log(newAges); // [10, 16, 21, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)

অন্যান্য নতুন অপরিবর্তনীয় পদ্ধতি

সম্প্রতি আরও তিনটি পদ্ধতি আন্তঃকার্যকর হয়ে উঠেছে:

• Array.prototype.toReversed() যা মূল অ্যারে পরিবর্তন না করেই অ্যারেকে বিপরীত করে।
• Array.prototype.toSorted() যা মূল অ্যারে পরিবর্তন না করেই অ্যারেকে সাজায়।
• Array.prototype.toSpliced() যা .splice() এর মতো কাজ করে কিন্তু মূল অ্যারে পরিবর্তন না করে।

MDN এর মতে, এই তিনটি পদ্ধতি তাদের প্রতিরূপের অনুলিপি সংস্করণ। এই পদ্ধতিগুলি এমন ক্ষেত্রেও ব্যবহার করা যেতে পারে যেখানে অপরিবর্তনীয়তা প্রত্যাশিত বা পছন্দনীয়।

উপসংহারে, এই নিবন্ধে উপস্থাপিত চারটি পদ্ধতির একটি ব্যবহার করে জাভাস্ক্রিপ্টে অপরিবর্তনীয় আপডেটগুলি আরও সহজে অর্জন করা যেতে পারে। বিশেষ করে, .with() পদ্ধতিটি মূল অ্যারে পরিবর্তন না করে অ্যারের একটি একক উপাদান আপডেট করা সহজ করে তোলে।