ES2023 स्पेसिफिकेशनमध्ये आता चार ॲरे मेथड्स—toSorted, toReversed, toSpliced आणि with—आणल्या गेल्या आहेत—ज्या मूळ ॲरेमध्ये बदल (mutate) करण्याऐवजी नवीन ॲरे परत करतात. React आणि इतर UI लायब्ररीजमध्ये, ज्या इम्युटेबल स्टेटवर (immutable state) अवलंबून असतात, हे हेल्पर्स डेव्हलपर्सना स्प्रेड-ऑपरेटरच्या (spread-operator) अशा युक्त्या बदलण्यास मदत करतात ज्या अनेकदा बग्स आणि बोयलरप्लेट कोडचे (boilerplate code) कारण ठरत असत.

हा बदल का महत्त्वाचा आहे

React एखादा घटक (component) पुन्हा रेंडर करायचा की नाही, याचा निर्णय मागील स्टेट रेफरन्स (state reference) आणि नवीन रेफरन्स यांची तुलना करून घेते. जर रेफरन्स बदललेला नसेल, तर React असे मानून चालते की काहीही बदललेले नाही. क्लासिक Array.prototype.sort मेथड ॲरेमध्येच बदल करते आणि तोच रेफरन्स परत करते, त्यामुळे setTasks(prev => prev.sort(fn)) सारखी कॉल केल्यास React ला अपडेट समजण्यास अडचण येते. यामुळे UI जुन्या (stale) डेटावरच अडकून राहते, हा असा बग आहे जो प्रत्यक्ष प्रोजेक्ट्समध्ये वारंवार दिसून येतो.

डेव्हलपर्सनी या समस्येवर उपाय म्हणून प्रथम ॲरेची क्लोन करण्याची पद्धत वापरली आहे—सहसा स्प्रेड ऑपरेटरचा वापर करून—जेणेकरून सॉर्टिंग स्टेपमध्ये नवीन रेफरन्स तयार होईल:

setTasks(prev => [...prev].sort((a, b) => b.priority - a.priority));

ही पद्धत काम करते, पण यामुळे कोडमध्ये अनावश्यक गर्दी (noise) वाढते आणि ती विसरणेही सोपे असते. नवीन ES2023 मेथड्स मूळ ॲरेला न बदलता थेट आणि वाचनीय पद्धतीने नवीन ॲरे तयार करण्याचा मार्ग देतात.

चार नॉन-म्युटेटिंग (non-mutating) मेथड्स

  • toSorted(compareFn?) – हे sort प्रमाणेच काम करते परंतु सॉर्ट केलेली कॉपी परत करते. मूळ ॲरेमध्ये कोणताही बदल होत नाही.
  • toReversed() – हे reverse ची जागा घेते. हे मूळ क्रम कायम ठेवून उलट (reversed) केलेली कॉपी देते.
  • toSpliced(start, deleteCount, ...items) – हे साईड इफेक्ट्सशिवाय (side effects) splice प्रमाणे काम करते. परत आलेला ॲरे नवीन इन्सर्शन किंवा रिमूव्हल दर्शवतो, पण मूळ ॲरे तसाच राहतो.
  • with(index, value) – हे index वरील घटक value ने बदलून नवीन ॲरे परत करते. हे map किंवा स्प्रेड-ऑपरेटर वापरून घटक बदलण्याच्या सामान्य पद्धतीला पर्याय देते.

या चारही मेथड्स ECMAScript मानकाचा भाग आहेत आणि सध्याच्या प्रमुख ब्राउझर्स आणि Node.js 20 मध्ये उपलब्ध आहेत.

आता कोड कसा दिसेल

लिस्ट सॉर्ट करणे

// Before
setTasks(prev => [...prev].sort((a, b) => b.priority - a.priority));

// After
setTasks(prev => prev.toSorted((a, b) => b.priority - a.priority));

एक घटक अपडेट करणे

// Before
setItems(prev =>
  prev.map((item, i) => (i === idx ? newItem : item))
);

// After
setItems(prev => prev.with(idx, newItem));

ॲरे रिव्हर्स करणे

setLogs(prev => prev.toReversed());

घटक काढून टाकणे

setTags(prev => prev.toSpliced(removeIdx, 1));

नवीन सिंटॅक्समुळे अतिरिक्त स्प्रेड ऑपरेटर्स किंवा मॅपिंग लूप्सची गरज उरत नाही, ज्यामुळे स्टेट अपडेट्स वाचायला सोपे आणि त्रुटीमुक्त (less error-prone) होतात.

कोणाला फायदा होईल आणि कोणाला विचार करावा लागेल

डेव्हलपर्स जे React, Vue, Redux, Zustand किंवा इम्युटेबल डेटा स्ट्रक्चर्स वापरणाऱ्या कोणत्याही फ्रेमवर्कचा वापर करतात, त्यांना एक स्पष्ट मेंटल मॉडेल मिळेल: मेथड कॉल करा, नवीन ॲरे मिळवा आणि तो सेटरला (setter) द्या. बोयलरप्लेट कोडमधील कपातीमुळे रेंडर सायकलमध्ये काही मिलिसेकंदची बचत देखील होऊ शकते, कारण इंजिन सॉर्टिंगपूर्वी मध्यवर्ती कॉपी तयार करणे टाळते.

लेगसी ब्राउझर्स (legacy browsers) वापरणाऱ्या टीम्सना पॉलीफिल्स (polyfills) समाविष्ट करावे लागू शकतात. या मेथड्स Safari किंवा Internet Explorer च्या जुन्या आवृत्त्यांमध्ये उपलब्ध नाहीत, त्यामुळे त्या प्लॅटफॉर्म्सना लक्ष्य करणाऱ्या प्रोडक्शन बिल्डमध्ये फॉलबॅक (fallback) समाविष्ट करणे आवश्यक आहे. यामुळे बंडल साईजमध्ये थोडी वाढ होईल, परंतु वाचनीयतेच्या फायद्यासाठी हा बदल फायदेशीर ठरू शकतो.

लायब्ररी ऑथर्सना नवीन सिग्नेचर्स एक्सपोज करण्यासाठी टाईप डेफिनिशन्स (उदा. TypeScript) अपडेट करावे लागू शकतात. जोपर्यंत हे डेफिनिशन्स अधिकृत @types पॅकेजेसमध्ये येत नाहीत, तोपर्यंत डेव्हलपर्सना तात्पुरत्या टाईप एरर्स (type errors) दिसू शकतात.

पुढे काय पाहावे

  • अडॉप्शन मेट्रिक्स (Adoption metrics) – ESLint सारखी टूल्स लवकरच असे नियम जोडू शकतात जे स्टेट सेटर्समधील म्युटेबल ॲरे कॉल्सना फ्लॅग करतील, ज्यामुळे डेव्हलपर्सना नवीन मेथड्स वापरण्यास प्रोत्साहन मिळेल.
  • परफॉर्मन्स स्टडीज (Performance studies) – सुरुवातीच्या बेंचमार्क्सनुसार, नेटिव्ह नॉन-म्युटेटिंग मेथड्स स्प्रेड-ऑपरेटर क्लोन आणि त्यानंतरच्या म्युटेबल ऑपरेशनपेक्षा जलद आहेत, परंतु प्रत्यक्ष वापराचा डेटा याचा परिणाम निश्चित करेल.
  • पुढील प्रस्ताव (Further proposals) – ECMAScript कमिटी 'इम्युटेबल-बाय-डिफॉल्ट' APIs शोधणे सुरू ठेवत आहे; आगामी टप्प्यांवर लक्ष ठेवल्यास अशाच पॅटर्नमधील अधिक हेल्पर्स पाहायला मिळू शकतात.

सारांश

नवीनतम ECMAScript स्पेसिफिकेशन UI डेव्हलपर्सना स्प्रेड-ऑपरेटरच्या कसरत न करता स्टेट इम्युटेबल ठेवण्यासाठी एक इन-बिल्ट आणि संक्षिप्त मार्ग देते, ज्यामुळे अनेक बग्स निर्माण होत असत. sort, reverse, splice आणि इंडेक्स-आधारित रिप्लेसमेंटच्या जागी toSorted, toReversed, toSpliced आणि with वापरून, तुम्ही React च्या चेंज डिटेक्शनला (change detection) अपेक्षित पद्धतीने काम करू देता आणि तुमचा कोड वाचनीय बनवता. जर तुमचे टार्गेट ब्राउझर्स या नवीन मेथड्सना सपोर्ट करत असतील—किंवा तुम्ही त्यांना पॉलीफिल करण्यास तयार असाल—तर जुन्या पद्धती सोडून देण्याची आणि भाषेला (language) मुख्य काम करू देण्याची हीच वेळ आहे.