Array.prototype.with के साथ इम्यूटेबल अरे अपडेट

Jad Joubran

ब्राउज़र ने हाल ही में इंटरऑपरेबल का एक नया तरीका जोड़ा है. इसे कलेक्शन पर कॉल किया जा सकता है: 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() और नहीं बदले जा सकने वाले आंकड़े

इम्यूटेबिलिटी, कई फ़्रंटएंड लाइब्रेरी और फ़्रेमवर्क का सबसे अहम हिस्सा है. इनमें से कुछ हैं: React (और Redux), और Vue

ज़रूरी नहीं है कि अन्य लाइब्रेरी और फ़्रेमवर्क में, म्यूटेबिलिटी की ज़रूरत न पड़े. हालांकि, इससे बेहतर परफ़ॉर्मेंस के लिए इसे बढ़ावा मिलता है: Angular और Lit

इसलिए, डेवलपर को अक्सर ऐसे अन्य तरीकों का इस्तेमाल करना पड़ता था जिनसे अरे की कॉपी मिलती हों जिससे कोड को आसानी से पढ़ा जा सके:

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)

यहां कोडपन का एक उदाहरण दिया गया है कि आइटम के कलेक्शन को बिना किसी बदलाव के अपडेट करने के लिए, इमोजी का इस्तेमाल करने के साथ-साथ 'रिऐक्ट' में .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() की तरह काम करता है, लेकिन ओरिजनल अरे में बदलाव किए बिना.

ये तीन तरीके हैं, एमडीएन के मुताबिक, उनके काउंटर पार्ट को कॉपी करने वाले वर्शन. इन तरीकों का इस्तेमाल वहां भी किया जा सकता है जहां नहीं बदले जा सकने की संभावना होती है या इसे प्राथमिकता दी जाती है.

आखिर में, इस लेख में बताए गए चार तरीकों में से किसी एक का इस्तेमाल करके, JavaScript में ऐसे अपडेट ज़्यादा आसानी से हासिल किए जा सकते हैं जिन्हें बदला नहीं जा सकता. खास तौर पर, .with() वाला तरीका, ओरिजनल अरे में बदलाव किए बिना, अरे के किसी एक एलिमेंट को अपडेट करना आसान बनाता है.