JavaScript Array Prototype Constructor: कस्टम मेथड्स जोड़ें

Array.prototype पर प्रॉपर्टीज या मेथड्स जोड़ने से वे सभी एरे इंस्टेंस पर उपलब्ध हो जाते हैं। यह शक्तिशाली है लेकिन सावधानी से उपयोग करना चाहिए (नाम टकराव का जोखिम)।

उदाहरण: वैकल्पिक अपरकेस/लोअरकेस

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> 
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; } 
    .sample { font-size: 20px; font-weight: 500; } 
    button { padding: 10px 20px; background: #6f42c1; color: white; border: none; border-radius: 4px; cursor: pointer; } 
</style> </head> <body> 
<h1>Array Prototype Constructor: कस्टम मेथड</h1> 
<div class="sample"></div> 
<button class="Btn">कस्टम फंक्शन चलाएं</button> 
<h3>स्ट्रिंग को वैकल्पिक अपरकेस/लोअरकेस में बदलें</h3> 
<script> 
    // Array.prototype पर कस्टम मेथड जोड़ें
    Array.prototype.upperLower = function() { 
        for (let i = 0; i < this.length; i++) { 
            if (i % 2 === 0) { 
                this[i] = this[i].toUpperCase(); 
            } else { 
                this[i] = this[i].toLowerCase(); 
            } 
        } 
    }; 
    
    const fillEle = document.querySelector(".sample"); 
    let arr = ["H", "E", "L", "L", "O"]; 
    fillEle.innerHTML = "मूल: " + arr.join(""); 
    
    arr.upperLower(); 
    
    document.querySelector(".Btn").addEventListener("click", () => { 
        fillEle.innerHTML = "परिणाम: " + arr.join(""); 
    }); 
</script> </body> </html>

आउटपुट

मूल: HELLO

क्लिक के बाद: HeLlO

सर्वोत्तम अभ्यास और चेतावनियां

✅ करें:

• पॉलीफिल्स के लिए उपयोग करें (पुराने ब्राउज़र सपोर्ट)
• यूनिवर्सल यूटिलिटी मेथड्स के लिए
• Object.defineProperty का उपयोग करके enumerable: false सेट करें

❌ न करें:

• सामान्य नामों का उपयोग (जैसे map, filter, find)
• लाइब्रेरी कोड में (नाम टकराव का जोखिम)
• प्रदर्शन-महत्वपूर्ण कोड में (प्रोटोटाइप चेन लुकअप)

सुरक्षित पैटर्न: Object.defineProperty

Object.defineProperty(Array.prototype, "upperLower", {
    value: function() {
        return this.map((item, i) => i % 2 === 0 ? item.toUpperCase() : item.toLowerCase());
    },
    writable: true,
    configurable: true,
    enumerable: false // for...in लूप में नहीं दिखेगा
});

आधुनिक विकल्प: स्टैंडअलोन फंक्शन्स

// प्रोटोटाइप प्रदूषण के बजाय
const upperLower = arr => arr.map((item, i) => i % 2 === 0 ? item.toUpperCase() : item.toLowerCase());

// उपयोग
upperLower(["H", "E", "L", "L", "O"]); // ["H", "e", "L", "l", "O"]

यह दृष्टिकोण अधिक सुरक्षित, टेस्टेबल, और ट्री-शेकेबल है।