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

Jad Joubran

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

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

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

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

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

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 বরাদ্দ করেন, তখন JavaScript অ্যারেটি অনুলিপি করে না বরং অন্য অ্যারের একটি রেফারেন্স তৈরি করে। সুতরাং, একটিতে যেকোনো পরিবর্তন অন্যটিকেও প্রভাবিত করবে কারণ তারা উভয়ই একই অ্যারের দিকে নির্দেশ করছে।

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

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

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

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

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)

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

যেহেতু .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() পদ্ধতিটি মূল অ্যারেকে পরিবর্তন না করে অ্যারের একটি একক উপাদান আপডেট করা সহজ করে তোলে।