जावास्क्रिप्ट में दो ऑब्जेक्ट को कैसे मर्ज करें: 5 सर्वश्रेष्ठ तरीके

परिचय: क्यों ऑब्जेक्ट का विलय हर JavaScript डेवलपर का दर्द है

कल्पना करें: आप एक एप्लिकेशन पर काम कर रहे हैं, और आपको दो अलग-अलग स्रोतों से डेटा मर्ज करना है। उदाहरण के लिए, आपके पास डेटाबेस से उपयोगकर्ता का बेसिक कॉन्फ़िगरेशन है और फ्रंटएंड से आई सेटिंग्स हैं। आप उन्हें बिना दर्द और परेशानी के कैसे जोड़ेंगे? यही सवाल — «How can I merge properties of two JavaScript objects?» — ने Stack Overflow पर हज़ारों व्यूज़ जुटाए। और यह सही भी है: जावास्क्रिप्ट में ऑब्जेक्ट का विलय कई खतरों को छिपाए हुए है।

इस लेख में, हम JS में ऑब्जेक्ट मर्ज करने के सभी लोकप्रिय तरीकों पर चर्चा करेंगे: क्लासिक Object.assign() से लेकर आधुनिक spread-ऑपरेटर तक। आप सीखेंगे कि नेस्टेड संरचनाओं को डीप कॉपी कैसे करें, मूल डेटा में बदलाव से कैसे बचें, और अपने कार्य के लिए सही विधि कैसे चुनें। चलिए शुरू करते हैं!

समस्या: «दो ऑब्जेक्ट के गुणों को मर्ज करने» का क्या अर्थ है?

जब हम «merge objects JavaScript» कहते हैं, तो हमारा मतलब एक नया ऑब्जेक्ट बनाना है जिसमें मूल ऑब्जेक्ट के सभी गुण हों। यदि समान कुंजियाँ मिलती हैं, तो दूसरे ऑब्जेक्ट का मान पहले के मान को «ओवरराइट» कर देता है।

मान लीजिए, दो ऑब्जेक्ट हैं:

const user = {\n  name: 'अन्ना',\n  age: 28,\n  city: 'मॉस्को'\n};\n\nconst updates = {\n  age: 29,\n  job: 'डेवलपर'\n};

JS ऑब्जेक्ट के विलय के बाद हम यह प्राप्त करना चाहते हैं:

{\n  name: 'अन्ना',\n  age: 29,       // अपडेटेड वैल्यू\n  city: 'मॉस्को',\n  job: 'डेवलपर'  // नया गुण\n}

यह आसान लगता है। लेकिन शैतान विवरण में छिपा है: नेस्टेड ऑब्जेक्ट, ऐरे, मूल का म्यूटेशन और प्रदर्शन।

विधि 1: Object.assign() — पुराना अच्छा क्लासिक

Object.assign() विधि जावास्क्रिप्ट में ऑब्जेक्ट मर्ज करने का सबसे पुराना और सिद्ध तरीका है। यह एक या अधिक स्रोत ऑब्जेक्ट से स्वयं के गणनीय गुणों को लक्ष्य ऑब्जेक्ट में कॉपी करता है।

सिंटैक्स

Object.assign(target, ...sources)

महत्वपूर्ण: पहला आर्गुमेंट लक्ष्य ऑब्जेक्ट है, जिसे संशोधित किया जाएगा। बाद के सभी गुणों के स्रोत हैं।

विलय का उदाहरण

const user = { name: 'अन्ना', age: 28 };\nconst updates = { age: 29, job: 'डेवलपर' };\n\nconst merged = Object.assign({}, user, updates);\nconsole.log(merged);\n// { name: 'अन्ना', age: 29, job: 'डेवलपर' }

ध्यान दें: हम target के रूप में एक खाली ऑब्जेक्ट {} पास कर रहे हैं। यह सुनिश्चित करता है कि मूल ऑब्जेक्ट म्यूटेट न हों — JS ऑब्जेक्ट क्लोनिंग सही ढंग से की जाती है।

खतरा: शैलो कॉपी

Object.assign() केवल शैलो कॉपी (shallow copy) करता है। यदि आपके पास नेस्टेड ऑब्जेक्ट हैं, तो वे रेफरेंस द्वारा कॉपी होंगे:

const obj1 = { data: { value: 10 } };\nconst obj2 = { info: 'test' };\n\nconst merged = Object.assign({}, obj1, obj2);\nmerged.data.value = 999;\nconsole.log(obj1.data.value); // 999 — मूल ऑब्जेक्ट का म्यूटेशन!

डीप मर्ज के लिए अन्य दृष्टिकोणों की आवश्यकता होगी, जिनके बारे में हम नीचे चर्चा करेंगे।

विधि 2: Spread-ऑपरेटर — ES6 की सुंदरता

ES6 के आगमन के साथ, spread-ऑपरेटर JavaScript (तीन बिंदु ...) ऑब्जेक्ट के गुणों को मर्ज करने का सबसे लोकप्रिय तरीका बन गया। यह संक्षिप्त, पढ़ने में आसान है और इसमें विधि को कॉल करने की आवश्यकता नहीं है।

सिंटैक्स

const merged = { ...obj1, ...obj2 };

उदाहरण

const defaults = { theme: 'light', lang: 'ru', showSidebar: true };\nconst userPrefs = { theme: 'dark', fontSize: 16 };\n\nconst settings = { ...defaults, ...userPrefs };\nconsole.log(settings);\n// { theme: 'dark', lang: 'ru', showSidebar: true, font