JavaScript में डीप कॉपी: ऑब्जेक्ट क्लोन करने के 5 बेहतरीन तरीके

शुरुआती लोगों के लिए ऑनलाइन Python प्रशिक्षक

Python आसानी से सीखें बिना सिद्धांत के बोझ के। स्वचालित जांच के साथ व्यावहारिक कार्य हल करें और ब्राउज़र में सीधे कोड लिखें।

पाठ्यक्रम शुरू करें

परिचय: सामान्य कॉपी क्यों काम नहीं करती?

\n\n

कल्पना करें: आप एक ऐप बना रहे हैं जो यूज़र के जटिल कॉन्फ़िगरेशन को प्रोसेस करता है। आप const newConfig = oldConfig करते हैं, कुछ फ़ील्ड बदलते हैं — और अचानक असली ऑब्जेक्ट भी बदल जाता है। यह दर्द जाना-पहचाना है? 👋

\n\n

JavaScript में ऑब्जेक्ट रेफरेंस से पास होते हैं। इसका मतलब है कि साधारण असाइनमेंट नया ऑब्जेक्ट नहीं बनाता, बल्कि पुराने का पॉइंटर कॉपी करता है। यही वजह है कि Stack Overflow पर हज़ारों डेवलपर्स पूछते हैं: "JavaScript में ऑब्जेक्ट को डीप क्लोन करने का सबसे कारगर तरीका क्या है?"।

\n\n

इस आर्टिकल में हम डीप कॉपी के सभी लोकप्रिय तरीकों, उनके फ़ायदे, नुकसान और परफॉरमेंस पर चर्चा करेंगे। आप जानेंगे कि 2024 के लिए कौन सा तरीका सबसे बेहतर है, और अपना खुद का भरोसेमंद deep clone कैसे लिखें।

\n\n

डीप कॉपी की ज़रूरत क्यों है?

\n\n

डीप कॉपी (deep clone) ऑब्जेक्ट की पूरी तरह से स्वतंत्र प्रतिलिपि बनाता है, जिसमें सभी नेस्टेड स्ट्रक्चर शामिल होते हैं। शैलो कॉपी (shallow copy) के विपरीत, जहाँ नेस्टेड ऑब्जेक्ट साझा रहते हैं।

\n\n

यहाँ कुछ सामान्य परिदृश्य हैं जहाँ इसकी ज़रूरत होती है:

\n
    \n
  • Redux / Zustand के साथ काम: स्टेट को म्यूटेट नहीं कर सकते, कॉपी बनानी होती है।
  • \n
  • डेटा सीरियलाइज़ेशन सर्वर पर भेजने के लिए।
  • \n
  • कैश या कॉन्फ़िगरेशन जिन्हें बदला नहीं जा सकता।
  • \n
  • यूनिट टेस्ट: ताकि मूल डेटा प्रभावित न हो।
  • \n
\n\n

लेकिन यह इतना आसान नहीं है। अगर आप फंक्शन, undefined, Symbol या साइक्लिक रेफरेंस वाले ऑब्जेक्ट को कॉपी करने की कोशिश करते हैं — तो कई तरीके फेल हो जाते हैं या डेटा खो देते हैं। आइए हर तरीके को विस्तार से समझते हैं।

\n\n

तरीका 1: JSON.parse(JSON.stringify(obj)) — पुराना लेकिन काम का

\n\n

शुरुआती डेवलपर्स के बीच यह सबसे लोकप्रिय तरीका है। यह सरल और लिखने में तेज़ है:

\n\n
const original = {\n    name: "अन्ना",\n    age: 25,\n    address: { city: "मॉस्को", zip: 101000 },\n    hobbies: ["पढ़ना", "दौड़ना"]\n};\n\nconst clone = JSON.parse(JSON.stringify(original));\n\nclone.address.city = "सेंट पीटर्सबर्ग";\nconsole.log(original.address.city); // "मॉस्को" — ✅ कॉपी स्वतंत्र है!\n
\n\n

फ़ायदे:

\n
    \n
  • 🔥 बहुत सरल सिंटैक्स।
  • \n
  • 🔥 ज़्यादातर सामान्य मामलों में काम करता है।
  • \n
\n\n

नुकसान (गंभीर!):

\n
    \n
  • ❌ फंक्शन खो देता है — वे undefined में बदल जाते हैं।
  • \n
  • ❌ undefined खो देता है — undefined वैल्यू वाले फ़ील्ड गायब हो जाते हैं।
  • \n
  • ❌ Symbol खो देता है — सिंबल कीज़ गायब हो जाती हैं।
  • \n
  • ❌ साइक्लिक रेफरेंस पर काम नहीं करता — TypeError एरर देता है।
  • \n
  • ❌ डेट्स के साथ समस्या — Date स्ट्रिंग में बदल जाता है।
  • \n
  • ❌ Map, Set, RegExp के साथ समस्या — ये खाली ऑब्जेक्ट बन जाते हैं।
  • \n
\n\n

निष्कर्ष: केवल उन डेटा के लिए उपयुक्त है जो JSON में सीरियलाइज़ हो सकते हैं (स्ट्रिंग, नंबर, ऐरे, सरल ऑब्जेक्ट)।

\n\n

तरीका 2: Structured Clone API — आधुनिक मानक (2024)

\n\n

2022 से JavaScript में नेटिव डीप कॉपी का तरीका आया — structuredClone। यह सभी आधुनिक ब्राउज़रों और Node.js 17+ में उपलब्ध है।

\n\n
const clone = structuredClone(original);\n\nclone.address.city = "कज़ान";\nconsole.log(original.address.city); // "मॉस्को" — ✅\n
\n\n

structuredClone क्या कर सकता है:

\n
    \n
  • ✅ साइक्लिक रेफरेंस — काम करता है!
  • \n
  • ✅ डेट्स — Date टाइप बरकरार रखता है।
  • \n
  • ✅ Map और Set — सही ढंग से कॉपी करता है।
  • \n
  • ✅ RegExp — यह भी काम करता है।
  • \n
  • ✅ ArrayBuffer और Ty

ब्लॉग

पुस्तक अनुशंसाएँ