ES2023 ಸ್ಪೆಸಿಫಿಕೇಶನ್ ಈಗ ನಾಲ್ಕು ಅರೇ ಮೆಥಡ್‌ಗಳನ್ನು—toSorted, toReversed, toSpliced ಮತ್ತು with—ಒದಗಿಸುತ್ತದೆ. ಇವು ಮೂಲ ಅರೇಯನ್ನು ಬದಲಾಯಿಸುವ ಬದಲು (mutating) ಹೊಸ ಅರೇಗಳನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತವೆ. ಇಮ್ಯುಟಬಲ್ ಸ್ಟೇಟ್ (immutable state) ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುವ React ಮತ್ತು ಇತರ UI ಲೈಬ್ರರಿಗಳಲ್ಲಿ, ಈ ಹೆಲ್ಪರ್‌ಗಳು ಬಹಳ ದಿನಗಳಿಂದ ಬಗ್‌ಗಳು ಮತ್ತು ಬಾಯ್ಲರ್‌ಪ್ಲೇಟ್‌ಗೆ (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 ಮೆಥಡ್‌ಗಳು ಮೂಲವನ್ನು ಬದಲಾಯಿಸದೆ ಹೊಸ ಅರೇಯನ್ನು ರಚಿಸಲು ನೇರವಾದ ಮತ್ತು ಸುಲಭವಾಗಿ ಓದಬಹುದಾದ ಮಾರ್ಗವನ್ನು ನೀಡುತ್ತವೆ.

ನಾಲ್ಕು ನಾನ್-ಮ್ಯುಟೇಟಿಂಗ್ (non-mutating) ಮೆಥಡ್‌ಗಳು

  • toSorted(compareFn?) – sort ನಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಆದರೆ ಸಾರ್ಟ್ ಮಾಡಿದ ಪ್ರತಿ (copy) ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ಮೂಲ ಅರೇನಲ್ಲಿ ಯಾವುದೇ ಬದಲಾವಣೆ ಆಗುವುದಿಲ್ಲ.
  • 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));

ಹೊಸ ಸಿಂಟ್ಯಾಕ್ಸ್ (syntax) ಹೆಚ್ಚುವರಿ ಸ್ಪ್ರೆಡ್ ಆಪರೇಟರ್‌ಗಳು ಅಥವಾ ಮ್ಯಾಪಿಂಗ್ ಲೂಪ್‌ಗಳ ಅಗತ್ಯವನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ, ಇದರಿಂದ ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಓದುವುದು ಸುಲಭವಾಗುತ್ತದೆ ಮತ್ತು ತಪ್ಪುಗಳು ಕಡಿಮೆಯಾಗುತ್ತವೆ.

ಯಾರು ಪ್ರಯೋಜನ ಪಡೆಯುತ್ತಾರೆ ಮತ್ತು ಯಾರು ಹಿಂಜರಿಯಬಹುದು

ಡೆವಲಪರ್‌ಗಳು React, Vue, Redux, Zustand ಅಥವಾ ಇಮ್ಯುಟಬಲ್ ಡೇಟಾ ಸ್ಟ್ರಕ್ಚರ್‌ಗಳನ್ನು ನಿರೀಕ್ಷಿಸುವ ಯಾವುದೇ ಫ್ರೇಮ್‌ವರ್ಕ್ ಬಳಸುತ್ತಿದ್ದರೆ, ಅವರಿಗೆ ಸ್ಪಷ್ಟವಾದ ಮಾಡೆಲ್ ಸಿಗುತ್ತದೆ: ಮೆಥಡ್ ಅನ್ನು ಕರೆಯಿರಿ, ಹೊಸ ಅರೇ ಪಡೆಯಿರಿ ಮತ್ತು ಅದನ್ನು ಸೆಟರ್‌ಗೆ (setter) ನೀಡಿ. ಬಾಯ್ಲರ್‌ಪ್ಲೇಟ್ ಕಡಿತವು ರೆಂಡರ್ ಸೈಕಲ್‌ಗಳ ಸಮಯವನ್ನು ಕೂಡ ಉಳಿಸಬಹುದು, ಏಕೆಂದರೆ ಇಂಜಿನ್ ಸಾರ್ಟಿಂಗ್ ಮಾಡುವ ಮೊದಲು ಮಧ್ಯಂತರ ಪ್ರತಿ (intermediate copy) ರಚಿಸುವುದನ್ನು ತಪ್ಪಿಸುತ್ತದೆ.

ಲೆಗಸಿ ಬ್ರೌಸರ್ ಹೊಂದಿರುವ ತಂಡಗಳು ಪಾಲಿಫಿಲ್ಸ್ (polyfills) ಬಳಸಬೇಕಾಗಬಹುದು. ಈ ಮೆಥಡ್‌ಗಳು Safari ಅಥವಾ Internet Explorer ನ ಹಳೆಯ ಆವೃತ್ತಿಗಳಲ್ಲಿ ಲಭ್ಯವಿಲ್ಲ, ಆದ್ದರಿಂದ ಆ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗಳನ್ನು ಗುರಿಯಾಗಿಸಿಕೊಂಡಿರುವ ಪ್ರೊಡಕ್ಷನ್ ಬಿಲ್ಡ್‌ನಲ್ಲಿ ಫಾಲ್‌ಬ್ಯಾಕ್ (fallback) ಇರಲೇಬೇಕು. ಇದು ಬಂಡಲ್ ಗಾತ್ರವನ್ನು ಸ್ವಲ್ಪ ಹೆಚ್ಚಿಸಬಹುದು, ಆದರೆ ಓದುವಿಕೆಗೆ ಸಿಗುವ ಅನುಕೂಲಕ್ಕಾಗಿ ಇದು ಮಾಡಬಹುದಾದ ವ್ಯವಹಾರವಾಗಿದೆ.

ಲೈಬ್ರರಿ ತಯಾರಕರು ಹೊಸ ಸಿಗ್ನೇಚರ್‌ಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ಟೈಪ್ ಡಿಫಿನಿಷನ್‌ಗಳನ್ನು (ಉದಾಹರಣೆಗೆ, TypeScript) ಅಪ್‌ಡೇಟ್ ಮಾಡಬೇಕಾಗಬಹುದು. ಆ ಡಿಫಿನಿಷನ್‌ಗಳು ಅಧಿಕೃತ @types ಪ್ಯಾಕೇಜ್‌ಗಳಲ್ಲಿ ಬರುವವರೆಗೆ, ಡೆವಲಪರ್‌ಗಳು ತಾತ್ಕಾಲಿಕ ಟೈಪ್ ಎರರ್‌ಗಳನ್ನು ನೋಡಬಹುದು.

ಮುಂದೆ ಏನನ್ನು ಗಮನಿಸಬೇಕು

  • ಅಡಾಪ್ಶನ್ ಮೆಟ್ರಿಕ್ಸ್ (Adoption metrics) – ESLint ನಂತಹ ಟೂಲ್‌ಗಳು ಶೀಘ್ರದಲ್ಲೇ ಸ್ಟೇಟ್ ಸೆಟರ್‌ಗಳಲ್ಲಿ ಮ್ಯುಟಬಲ್ ಅರೇ ಕರೆಗಳನ್ನು ಗುರುತಿಸುವ ನಿಯಮಗಳನ್ನು ಸೇರಿಸಬಹುದು, ಇದು ಡೆವಲಪರ್‌ಗಳನ್ನು ಹೊಸ ಮೆಥಡ್‌ಗಳ ಕಡೆಗೆ ಪ್ರೇರೇಪಿಸುತ್ತದೆ.
  • ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಸ್ಟಡಿಗಳು (Performance studies) – ಆರಂಭಿಕ ಬೆಂಚ್‌ಮಾರ್ಕ್‌ಗಳು ನೈಸರ್ಗಿಕವಾಗಿ ಸಿಗುವ (native) ನಾನ್-ಮ್ಯುಟೇಟಿಂಗ್ ಮೆಥಡ್‌ಗಳು ಸ್ಪ್ರೆಡ್-ಆಪರೇಟರ್ ಕ್ಲೋನ್ ಮತ್ತು ಮ್ಯುಟಬಲ್ ಆಪರೇಷನ್ ಮಾಡುವುದಕ್ಕಿಂತ ವೇಗವಾಗಿವೆ ಎಂದು ಸೂಚಿಸುತ್ತವೆ, ಆದರೆ ನೈಜ ಡೇಟಾ ಇದರ ಪರಿಣಾಮವನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
  • ಮುಂದಿನ ಪ್ರಪೋಸಲ್‌ಗಳು (Further proposals) – ECMAScript ಸಮಿತಿಯು ಇಮ್ಯುಟಬಲ್-ಬೈ-ಡಿಫಾಲ್ಟ್ (immutable-by-default) API ಗಳನ್ನು ಅನ್ವೇಷಿಸುವುದನ್ನು ಮುಂದುವರಿಸಿದೆ; ಮುಂಬರುವ ಹಂತಗಳ ಮೇಲೆ ಕಣ್ಣಿಡುವುದು ಇದೇ ಮಾದರಿಯ ಹೆಚ್ಚಿನ ಹೆಲ್ಪರ್‌ಗಳನ್ನು ಬಹಿರಂಗಪಡಿಸಬಹುದು.

ಸಾರಾಂಶ

ಇತ್ತೀಚಿನ ECMAScript ಸ್ಪೆಸಿಫಿಕೇಶನ್ UI ಡೆವಲಪರ್‌ಗಳಿಗೆ ಸ್ಪ್ರೆಡ್-ಆಪರೇಟರ್ ಜಿಮ್ನಾಸ್ಟಿಕ್ಸ್ ಇಲ್ಲದೆ ಸ್ಟೇಟ್ ಅನ್ನು ಇಮ್ಯುಟಬಲ್ ಆಗಿಡಲು ಒಂದು ಅಂತರ್ಗತ ಮತ್ತು ಸಂಕ್ಷಿಪ್ತ ಮಾರ್ಗವನ್ನು ನೀಡುತ್ತದೆ. sort, reverse, splice ಮತ್ತು ಇಂಡೆಕ್ಸ್-ಆಧಾರಿತ ಬದಲಾವಣೆಗಳ ಬದಲಿಗೆ toSorted, toReversed, toSpliced ಮತ್ತು with ಅನ್ನು ಬಳಸುವ ಮೂಲಕ, ನೀವು React ನ ಚೇಂಜ್ ಡಿಟೆಕ್ಷನ್ ಅನ್ನು ಉದ್ದೇಶಿತವಾಗಿ ಕೆಲಸ ಮಾಡಲು ಬಿಡಬಹುದು ಮತ್ತು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಸುಲಭವಾಗಿ ಓದಬಲ್ಲದನ್ನಾಗಿ ಮಾಡಬಹುದು. ನಿಮ್ಮ ಟಾರ್ಗೆಟ್ ಬ್ರೌಸರ್ಗಳು ಹೊಸ ಮೆಥಡ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸಿದರೆ—ಅಥವಾ ನೀವು ಅವುಗಳಿಗೆ ಪಾಲಿಫಿಲ್ ಬಳಸಲು ಸಿದ್ಧರಿದ್ದರೆ—ಹಳೆಯ ಪ್ಯಾಟರ್ನ್‌ಗಳನ್ನು ನಿಲ್ಲಿಸಿ ಮತ್ತು ಭಾಷೆಯನ್ನೇ ಈ ಕೆಲಸ ಮಾಡಲು ಬಿಡಲು ಇದು ಸರಿಯಾದ ಸಮಯ.