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) वाला तरीका, उस कलेक्शन की कॉपी दिखाता है जिस पर इसे कॉल किया गया है. इसमें index को आपके दिए गए नए value पर सेट किया जाता है.

यहां उम्र का एक कलेक्शन दिखाया गया है. आपको ऐरे की नई कॉपी बनानी है. साथ ही, दूसरी उम्र को 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)

यहां Codepen का एक उदाहरण दिया गया है. इसमें बताया गया है कि 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 के मुताबिक, ये तीनों तरीके अपने काउंटरपार्ट के कॉपी करने वाले वर्शन हैं. इन तरीकों का इस्तेमाल उन जगहों पर भी किया जा सकता है जहां बदलाव नहीं किया जा सकता या जहां बदलाव न करना बेहतर होता है.

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