ES2023 સ્પેસિફિકેશનમાં હવે ચાર એરે મેથડ્સ—toSorted, toReversed, toSpliced અને with—આવ્યા છે જે મૂળ એરેમાં ફેરફાર (mutate) કરવાને બદલે નવા એરે રિટર્ન કરે છે. React અને અન્ય UI લાઇબ્રેરીઓ જે ઇમ્યુટેબલ સ્ટેટ (immutable state) પર આધારિત છે, તેમાં આ હેલ્પર્સ ડેવલપર્સને સ્પ્રેડ-ઓપરેટર ટ્રિક્સથી મુક્તિ આપે છે, જે લાંબા સમયથી બગ્સ અને બોઈલરપ્લેટ (boilerplate) નું કારણ બની રહી હતી.

શા માટે આ ફેરફાર મહત્વનો છે

React કોઈ કમ્પોનન્ટને રી-રેન્ડર કરવો કે નહીં તેનો નિર્ણય અગાઉના સ્ટેટ રેફરન્સની નવા રેફરન્સ સાથે સરખામણી કરીને લે છે. જો રેફરન્સ બદલાયો ન હોય, તો React માની લે છે કે કંઈ બદલાયું નથી. ક્લાસિક Array.prototype.sort મેથડ એરેને ઇન-પ્લેસ (in place) સોર્ટ કરે છે અને તે જ રેફરન્સ રિટર્ન કરે છે, તેથી setTasks(prev => prev.sort(fn)) જેવી કોલ React ને અપડેટ વિશે જાણવા દેતી નથી. UI જૂના ડેટા (stale data) પર અટકી જાય છે, જે વાસ્તવિક પ્રોજેક્ટ્સમાં વારંવાર જોવા મળતી ભૂલ છે.

ડેવલપર્સ પહેલા એરેને ક્લોન કરીને આ સમસ્યાનો ઉકેલ લાવતા હતા—સામાન્ય રીતે સ્પ્રેડ ઓપરેટરનો ઉપયોગ કરીને—જેથી સોર્ટિંગ સ્ટેપ એક નવો રેફરન્સ બનાવી શકે:

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

આ પદ્ધતિ કામ કરે છે, પરંતુ તે કોડમાં વધારો કરે છે અને ભૂલથી ભૂલી જવાની શક્યતા રહે છે. નવી ES2023 મેથડ્સ મૂળ એરેને અસ્પૃશ્ય રાખીને નવો એરે બનાવવાની સીધી અને વાંચી શકાય તેવી રીત આપે છે.

ચાર નોન-મ્યુટેટિંગ મેથડ્સ

  • toSorted(compareFn?) – sort જેવું જ કામ કરે છે પરંતુ સોર્ટેડ કોપી રિટર્ન કરે છે. મૂળ એરેમાં કોઈ ફેરફાર થતો નથી.
  • toReversed() – reverse ની જગ્યા લે છે. તે મૂળ ક્રમને જાળવી રાખીને રિવર્સ કોપી આપે છે.
  • toSpliced(start, deleteCount, ...items) – સાઇડ ઇફેક્ટ્સ વગર 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));

નવું સિન્ટેક્સ વધારાના સ્પ્રેડ ઓપરેટર્સ અથવા મેપિંગ લૂપ્સની જરૂરિયાત દૂર કરે છે, જેનાથી સ્ટેટ અપડેટ્સ વાંચવામાં સરળ અને ભૂલરહિત બને છે.

કોને ફાયદો થશે અને કોણ અચકાઈ શકે છે

ડેવલપર્સ જે React, Vue, Redux, Zustand અથવા કોઈપણ ફ્રેમવર્કનો ઉપયોગ કરે છે જે ઇમ્યુટેબલ ડેટા સ્ટ્રક્ચર્સની અપેક્ષા રાખે છે, તેમને હવે વધુ સ્પષ્ટ મોડેલ મળશે: મેથડ કોલ કરો, નવો એરે મેળવો, અને તેને સેટરને પાછો આપી દો. બોઈલરપ્લેટમાં ઘટાડો થવાથી રેન્ડર સાયકલના થોડા મિલીસેકન્ડ્સ પણ બચાવી શકાય છે, કારણ કે એન્જિન સોર્ટિંગ પહેલા ઇન્ટરમીડિયેટ કોપી બનાવવાનું ટાળે છે.

લેગસી બ્રાઉઝર્સ ધરાવતી ટીમોએ પોલીફિલ્સ (polyfills) ઉમેરવાની જરૂર પડી શકે છે. આ મેથડ્સ Safari અથવા Internet Explorer ના જૂના વર્ઝનમાં ઉપલબ્ધ નથી, તેથી જે પ્લેટફોર્મ્સને ટાર્ગેટ કરે છે તેવા પ્રોડક્શન બિલ્ડમાં ફોલબેક (fallback) સમાવવો પડશે. આનાથી બંડલ સાઈઝમાં થોડો વધારો થશે, પરંતુ વાંચનક્ષમતા (readability) માટે આ ફાયદાકારક છે.

લાઇબ્રેરી ઓથર્સ ને નવી સિગ્નેચર એક્સપોઝ કરવા માટે ટાઇપ ડેફિનેશન (દા.ત., TypeScript) અપડેટ કરવાની જરૂર પડી શકે છે. જ્યાં સુધી તે ડેફિનેશન સત્તાવાર @types પેકેજમાં ન આવે ત્યાં સુધી, ડેવલપર્સને કામચલાઉ ટાઇપ એરર્સ જોવા મળી શકે છે.

આગળ શું જોવું

  • એડોપ્શન મેટ્રિક્સ (Adoption metrics) – ESLint જેવા ટૂલ્સ ટૂંક સમયમાં એવા નિયમો ઉમેરી શકે છે જે સ્ટેટ સેટર્સમાં મ્યુટેબલ એરે કોલ્સને ફ્લેગ કરે, જેથી ડેવલપર્સ નવી મેથડ્સ તરફ વળે.
  • પરફોર્મન્સ સ્ટડીઝ – પ્રારંભિક બેન્ચમાર્ક સૂચવે છે કે નેટિવ નોન-મ્યુટેટિંગ મેથડ્સ સ્પ્રેડ-ઓપરેટર ક્લોન અને ત્યારબાદ મ્યુટેબલ ઓપરેશન કરતા ઝડપી છે, પરંતુ વાસ્તવિક ડેટા તેની અસરની પુષ્ટિ કરશે.
  • વધુ પ્રસ્તાવો – ECMAScript કમિટી ઇમ્યુટેબલ-બાય-ડિફોલ્ટ API શોધવાનું ચાલુ રાખે છે; આગામી તબક્કાઓ પર નજર રાખવાથી તે જ પેટર્ન ધરાવતા વધુ હેલ્પર્સ મળી શકે છે.

સારાંશ

નવીનતમ ECMAScript સ્પેસિફિકેશન UI ડેવલપર્સને સ્ટેટને ઇમ્યુટેબલ રાખવા માટે એક ઇન-બિલ્ટ અને સંક્ષિપ્ત રીત આપે છે, જેનાથી સ્પ્રેડ-ઓપરેટરની જટિલતા અને તેના કારણે થતા અસંખ્ય બગ્સથી બચી શકાય છે. sort, reverse, splice અને ઇન્ડેક્સ-આધારિત રિપ્લેસમેન્ટને બદલે toSorted, toReversed, toSpliced અને with નો ઉપયોગ કરીને, તમે React ના ચેન્જ ડિટેક્શનને યોગ્ય રીતે કામ કરવા દો છો અને તમારા કોડને વાંચવામાં સરળ બનાવો છો. જો તમારા ટાર્ગેટ બ્રાઉઝર્સ નવી મેથડ્સને સપોર્ટ કરે છે—અથવા તમે તેને પોલીફિલ કરવા તૈયાર છો—તો જૂની પદ્ધતિઓ છોડવાનો અને ભાષાને મુખ્ય કામ કરવા દેવાનો આ યોગ્ય સમય છે.