ES2023 స్పెసిఫికేషన్ ఇప్పుడు నాలుగు అర్రే మెథడ్స్‌ను—toSorted, toReversed, toSpliced మరియు with—అందించింది, ఇవి అసలు అర్రేను మార్చకుండా (mutate చేయకుండా) కొత్త అర్రేలను తిరిగి ఇస్తాయి. ఇమ్మ్యూటబుల్ స్టేట్ (immutable state) పై ఆధారపడే React మరియు ఇతర UI లైబ్రరీలలో, డెవలపర్లు ఇప్పటివరకు బగ్స్ మరియు బోయిలర్‌ప్లేట్‌కు (boilerplate) కారణమవుతున్న స్ప్రెడ్-ఆపరేటర్ (spread-operator) ట్రిక్స్‌కు బదులుగా వీటిని ఉపయోగించవచ్చు.

ఈ మార్పు ఎందుకు ముఖ్యం

మునుపటి స్టేట్ రిఫరెన్స్‌ను కొత్త రిఫరెన్స్‌తో పోల్చడం ద్వారా ఒక కాంపోనెంట్‌ను రీ-రెండర్ చేయాలా వద్దా అని React నిర్ణయిస్తుంది. రిఫరెన్స్ మారకపోతే, ఏమీ మారలేదని React భావిస్తుంది. క్లాసిక్ Array.prototype.sort మెథడ్ అర్రేను అదే చోట (in place) సార్ట్ చేస్తుంది మరియు అదే రిఫరెన్స్‌ను తిరిగి ఇస్తుంది, కాబట్టి setTasks(prev => prev.sort(fn)) వంటి కాల్స్ వల్ల స్టేట్ అప్‌డేట్ అయినట్లు React గుర్తించలేదు. దీనివల్ల UI పాత డేటాతోనే ఉండిపోతుంది, ఇది రియల్ ప్రాజెక్ట్‌లలో తరచుగా కనిపించే ఒక బగ్.

డెవలపర్లు ఈ సమస్యను అధిగమించడానికి మొదట అర్రేను క్లోన్ చేస్తారు—సాధారణంగా స్ప్రెడ్ ఆపరేటర్‌తో—తద్వారా సార్టింగ్ దశలో కొత్త రిఫరెన్స్ వస్తుంది:

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

ఆ పద్ధతి పనిచేస్తుంది కానీ, అది కోడ్‌లో అనవసరమైన అంశాలను (noise) పెంచుతుంది మరియు మర్చిపోయే అవకాశం కూడా ఉంది. కొత్త ES2023 మెథడ్స్ అసలు అర్రేను మార్చకుండానే నేరుగా, సులభంగా చదవగలిగే విధంగా కొత్త అర్రేను రూపొందించే మార్గాన్ని అందిస్తాయి.

మార్పులు చేయని (non-mutating) నాలుగు మెథడ్స్

  • 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) ఉండాలి. ఇది బండిల్ సైజును కొద్దిగా పెంచినప్పటికీ, కోడ్ చదవడానికి సులభంగా ఉండటం వల్ల కలిగే ప్రయోజనం దీనికి సరిపోతుంది.

లైబ్రరీ రచయితలు కొత్త సిగ్నేచర్‌లను చూపించడానికి టైప్ డెఫినిషన్లను (ఉదాహరణకు, TypeScript) అప్‌డేట్ చేయాల్సి రావచ్చు. ఆ డెఫినిషన్లు అధికారిక @types ప్యాకేజీలలో అందుబాటులోకి వచ్చే వరకు, డెవలపర్‌లు తాత్కాలిక టైప్ ఎర్రర్‌లను చూడవచ్చు.

తదుపరి ఏమి గమనించాలి

  • అడాప్షన్ మెట్రిక్స్ (Adoption metrics) – ESLint వంటి టూలింగ్ త్వరలో స్టేట్ సెట్టర్లలో మ్యూటబుల్ అర్రే కాల్స్‌ను గుర్తించే రూల్స్‌ను జోడించవచ్చు, తద్వారా డెవలపర్‌లను కొత్త మెథడ్స్ వైపు మళ్ళించవచ్చు.
  • పెర్ఫార్మెన్స్ స్టడీస్ (Performance studies) – ప్రారంభ బెంచ్‌మార్క్‌ల ప్రకారం, నేటివ్ నాన్-మ్యూటేటింగ్ మెథడ్స్, స్ప్రెడ్-ఆపరేటర్ క్లోన్ మరియు మ్యూటబుల్ ఆపరేషన్ కంటే వేగంగా పనిచేస్తాయి, కానీ వాస్తవ ప్రపంచ డేటా దీని ప్రభావాన్ని ధృవీకరిస్తుంది.
  • తదుపరి ప్రతిపాదనలు (Further proposals) – ECMAScript కమిటీ ఇమ్మ్యూటబుల్-బై-డిఫాల్ట్ (immutable-by-default) APIల గురించి పరిశోధిస్తూనే ఉంది; రాబోయే దశలను గమనించడం ద్వారా ఇదే తరహాలో మరిన్ని హెల్పర్లను మనం చూడవచ్చు.

ముగింపు (Takeaway)

తాజా ECMAScript స్పెసిఫికేషన్, అసంఖ్యాకమైన బగ్స్‌కు కారణమైన స్ప్రెడ్-ఆపరేటర్ జిమ్నాస్టిక్స్‌ (gymnastics) లేకుండానే స్టేట్‌ను ఇమ్మ్యూటబుల్‌గా ఉంచడానికి UI డెవలపర్‌లకు ఒక ఇన్‌బిల్ట్, సంక్షిప్త మార్గాన్ని అందిస్తుంది. sort, reverse, splice మరియు ఇండెక్స్ ఆధారిత రీప్లేస్‌మెంట్లకు బదులుగా toSorted, toReversed, toSpliced మరియు withలను ఉపయోగించడం ద్వారా, మీరు React యొక్క చేంజ్ డిటెక్షన్ (change detection) సరిగ్గా పనిచేసేలా చేయవచ్చు మరియు మీ కోడ్‌ను చదవడానికి సులభతరం చేయవచ్చు. మీ టార్గెట్ బ్రౌజర్‌లు ఈ కొత్త మెథడ్స్‌కు మద్దతు ఇస్తే—లేదా మీరు వాటిని పాలీఫిల్ చేయాలనుకుంటే—పాత పద్ధతులను వదిలివేసి, భాషనే (language) ఆ పనిని చేయనివ్వడానికి ఇది సరైన సమయం.