प्रदर्शन तुलना: JavaScript में For Loop बनाम forEach बनाम Map

JavaScript सरणियों पर पुनरावृति (iterate) करने के कई तरीके प्रदान करता है, प्रत्येक की अपनी वाक्य-विन्यास, कार्यक्षमता और, सबसे महत्वपूर्ण बात, प्रदर्शन विशेषताएँ होती हैं। for लूप, forEach, और map के बीच के अंतर को समझना कुशल और अनुकूलित जावास्क्रिप्ट कोड लिखने के लिए महत्वपूर्ण है, खासकर बड़े डेटासेट या प्रदर्शन-महत्वपूर्ण अनुप्रयोगों से निपटने के दौरान। यह लेख एक व्यापक प्रदर्शन तुलना प्रदान करता है, जिसमें प्रत्येक विधि की सूक्ष्मताओं की पड़ताल की गई है और यह मार्गदर्शन प्रदान किया गया है कि कब किसका उपयोग करना है।

परिचय: JavaScript में पुनरावृति

सरणियों पर पुनरावृति प्रोग्रामिंग में एक मौलिक कार्य है। जावास्क्रिप्ट इसे प्राप्त करने के लिए विभिन्न विधियाँ प्रदान करता है, प्रत्येक को विशिष्ट उद्देश्यों के लिए डिज़ाइन किया गया है। हम तीन सामान्य विधियों पर ध्यान केंद्रित करेंगे:

• for लूप: पुनरावृति का पारंपरिक और यकीनन सबसे बुनियादी तरीका।
• forEach: एक उच्च-क्रम फ़ंक्शन जिसे एक सरणी में तत्वों पर पुनरावृति करने और प्रत्येक तत्व के लिए प्रदान किए गए फ़ंक्शन को निष्पादित करने के लिए डिज़ाइन किया गया है।
• map: एक और उच्च-क्रम फ़ंक्शन जो कॉलिंग सरणी में प्रत्येक तत्व पर प्रदान किए गए फ़ंक्शन को कॉल करने के परिणामों के साथ एक नई सरणी बनाता है।

सही पुनरावृति विधि का चयन आपके कोड के प्रदर्शन को महत्वपूर्ण रूप से प्रभावित कर सकता है। आइए प्रत्येक विधि पर गौर करें और उनकी प्रदर्शन विशेषताओं का विश्लेषण करें।

for लूप: पारंपरिक दृष्टिकोण

for लूप जावास्क्रिप्ट और कई अन्य प्रोग्रामिंग भाषाओं में सबसे बुनियादी और व्यापक रूप से समझी जाने वाली पुनरावृति संरचना है। यह पुनरावृति प्रक्रिया पर स्पष्ट नियंत्रण प्रदान करता है।

वाक्य-विन्यास और उपयोग

for लूप का वाक्य-विन्यास सीधा है:

            
for (let i = 0; i < array.length; i++) {
  // Code to be executed for each element
  console.log(array[i]);
}

            

              
                Copy
              
            
          

यहां घटकों का एक विवरण दिया गया है:

• आरंभ (let i = 0): एक काउंटर वेरिएबल (i) को 0 पर आरंभ करता है। यह लूप की शुरुआत में केवल एक बार निष्पादित होता है।
• शर्त (i < array.length): वह शर्त निर्दिष्ट करता है जो लूप को जारी रखने के लिए सही होनी चाहिए। लूप तब तक जारी रहता है जब तक i सरणी की लंबाई से कम है।
• वृद्धि (i++): प्रत्येक पुनरावृति के बाद काउंटर वेरिएबल (i) को बढ़ाता है।

प्रदर्शन विशेषताएँ

for लूप को आमतौर पर जावास्क्रिप्ट में सबसे तेज़ पुनरावृति विधि माना जाता है। यह सबसे कम ओवरहेड प्रदान करता है क्योंकि यह सीधे काउंटर में हेरफेर करता है और उनके सूचकांक का उपयोग करके सरणी तत्वों तक पहुंचता है।

मुख्य फायदे:

• गति: कम ओवरहेड के कारण आमतौर पर सबसे तेज़।
• नियंत्रण: पुनरावृति प्रक्रिया पर पूर्ण नियंत्रण प्रदान करता है, जिसमें तत्वों को छोड़ना या लूप से बाहर निकलना शामिल है।
• ब्राउज़र संगतता: पुराने ब्राउज़रों सहित सभी जावास्क्रिप्ट वातावरण में काम करता है।

उदाहरण: दुनिया भर से ऑर्डर संसाधित करना

कल्पना कीजिए कि आप विभिन्न देशों से ऑर्डर की एक सूची संसाधित कर रहे हैं। आपको कर उद्देश्यों के लिए कुछ देशों से ऑर्डर को अलग तरीके से संभालने की आवश्यकता हो सकती है।

            
const orders = [
  { id: 1, country: 'USA', amount: 100 },
  { id: 2, country: 'Canada', amount: 50 },
  { id: 3, country: 'UK', amount: 75 },
  { id: 4, country: 'Germany', amount: 120 },
  { id: 5, country: 'USA', amount: 80 }
];

function processOrders(orders) {
  for (let i = 0; i < orders.length; i++) {
    const order = orders[i];
    if (order.country === 'USA') {
      console.log(`Processing USA order ${order.id} with amount ${order.amount}`);
      // Apply USA-specific tax logic
    } else {
      console.log(`Processing order ${order.id} with amount ${order.amount}`);
    }
  }
}

processOrders(orders);

            

              
                Copy
              
            
          

forEach: पुनरावृति के लिए एक कार्यात्मक दृष्टिकोण

forEach सरणियों पर उपलब्ध एक उच्च-क्रम फ़ंक्शन है जो पुनरावृति के लिए अधिक संक्षिप्त और कार्यात्मक तरीका प्रदान करता है। यह प्रत्येक सरणी तत्व के लिए प्रदान किए गए फ़ंक्शन को एक बार निष्पादित करता है।

वाक्य-विन्यास और उपयोग

forEach का वाक्य-विन्यास इस प्रकार है:

            
array.forEach(function(element, index, array) {
  // Code to be executed for each element
  console.log(element, index, array);
});

            

              
                Copy
              
            
          

कॉलबैक फ़ंक्शन तीन तर्क प्राप्त करता है:

• element: सरणी में संसाधित किया जा रहा वर्तमान तत्व।
• index (वैकल्पिक): सरणी में वर्तमान तत्व का सूचकांक।
• array (वैकल्पिक): जिस सरणी पर forEach को कॉल किया गया था।

प्रदर्शन विशेषताएँ

forEach आमतौर पर for लूप से धीमा होता है। ऐसा इसलिए है क्योंकि forEach में प्रत्येक तत्व के लिए एक फ़ंक्शन को कॉल करने का ओवरहेड शामिल होता है, जो निष्पादन समय में वृद्धि करता है। हालाँकि, छोटे सरणियों के लिए अंतर नगण्य हो सकता है।

मुख्य फायदे:

• पठनीयता: for लूप की तुलना में अधिक संक्षिप्त और पठनीय वाक्य-विन्यास प्रदान करता है।
• कार्यात्मक प्रोग्रामिंग: कार्यात्मक प्रोग्रामिंग प्रतिमानों के साथ अच्छी तरह से फिट बैठता है।

मुख्य नुकसान:

• धीमा प्रदर्शन: आमतौर पर for लूप से धीमा।
• ब्रेक या कंटीन्यू नहीं कर सकता: आप लूप के निष्पादन को नियंत्रित करने के लिए break या continue कथनों का उपयोग नहीं कर सकते। पुनरावृति को रोकने के लिए, आपको एक अपवाद फेंकना होगा या फ़ंक्शन से वापस आना होगा (जो केवल वर्तमान पुनरावृति को छोड़ देता है)।

उदाहरण: विभिन्न क्षेत्रों से तिथियों को प्रारूपित करना

कल्पना कीजिए कि आपके पास मानक प्रारूप में तिथियों की एक सरणी है और उन्हें विभिन्न क्षेत्रीय प्राथमिकताओं के अनुसार प्रारूपित करने की आवश्यकता है।

            
const dates = [
  '2024-01-15',
  '2023-12-24',
  '2024-02-01'
];

function formatDate(dateString, locale) {
  const date = new Date(dateString);
  return date.toLocaleDateString(locale);
}

function formatDates(dates, locale) {
  dates.forEach(dateString => {
    const formattedDate = formatDate(dateString, locale);
    console.log(`Formatted date (${locale}): ${formattedDate}`);
  });
}

formatDates(dates, 'en-US'); // US format
formatDates(dates, 'en-GB'); // UK format
formatDates(dates, 'de-DE'); // German format

            

              
                Copy
              
            
          

map: सरणियों का रूपांतरण

map एक और उच्च-क्रम फ़ंक्शन है जिसे सरणियों को रूपांतरित करने के लिए डिज़ाइन किया गया है। यह मूल सरणी के प्रत्येक तत्व पर एक प्रदान किए गए फ़ंक्शन को लागू करके एक नई सरणी बनाता है।

वाक्य-विन्यास और उपयोग

map का वाक्य-विन्यास forEach के समान है:

            
const newArray = array.map(function(element, index, array) {
  // Code to transform each element
  return transformedElement;
});

            

              
                Copy
              
            
          

कॉलबैक फ़ंक्शन forEach (element, index, और array) के समान तीन तर्क भी प्राप्त करता है, लेकिन इसे एक मान लौटाना चाहिए, जो नई सरणी में संगत तत्व होगा।

प्रदर्शन विशेषताएँ

forEach के समान, फ़ंक्शन कॉल ओवरहेड के कारण map आमतौर पर for लूप से धीमा होता है। इसके अतिरिक्त, map एक नई सरणी बनाता है, जो अधिक मेमोरी का उपभोग कर सकता है। हालाँकि, उन ऑपरेशनों के लिए जिन्हें एक सरणी को रूपांतरित करने की आवश्यकता होती है, map मैन्युअल रूप से for लूप के साथ एक नई सरणी बनाने की तुलना में अधिक कुशल हो सकता है।

मुख्य फायदे:

• रूपांतरण: रूपांतरित तत्वों के साथ एक नई सरणी बनाता है, जिससे यह डेटा हेरफेर के लिए आदर्श बन जाता है।
• अपरिवर्तनीयता: मूल सरणी को संशोधित नहीं करता है, अपरिवर्तनीयता को बढ़ावा देता है।
• चेनिंग: जटिल डेटा प्रोसेसिंग के लिए अन्य सरणी विधियों के साथ आसानी से जोड़ा जा सकता है।

मुख्य नुकसान:

• धीमा प्रदर्शन: आमतौर पर for लूप से धीमा।
• मेमोरी खपत: एक नई सरणी बनाता है, जिससे मेमोरी का उपयोग बढ़ सकता है।

उदाहरण: विभिन्न देशों से मुद्राओं को USD में परिवर्तित करना

मान लीजिए आपके पास विभिन्न मुद्राओं में लेनदेन की एक सरणी है और रिपोर्टिंग उद्देश्यों के लिए उन सभी को USD में बदलने की आवश्यकता है।

            
const transactions = [
  { id: 1, currency: 'EUR', amount: 100 },
  { id: 2, currency: 'GBP', amount: 50 },
  { id: 3, currency: 'JPY', amount: 7500 },
  { id: 4, currency: 'CAD', amount: 120 }
];

const exchangeRates = {
  'EUR': 1.10, // Example exchange rate
  'GBP': 1.25,
  'JPY': 0.007,
  'CAD': 0.75
};

function convertToUSD(transaction) {
  const rate = exchangeRates[transaction.currency];
  if (rate) {
    return transaction.amount * rate;
  } else {
    return null; // Indicate conversion failure
  }
}

const usdAmounts = transactions.map(transaction => convertToUSD(transaction));

console.log(usdAmounts);

            

              
                Copy
              
            
          

प्रदर्शन बेंचमार्किंग

इन विधियों के प्रदर्शन की वस्तुनिष्ठ तुलना करने के लिए, हम जावास्क्रिप्ट में console.time() और console.timeEnd() जैसे बेंचमार्किंग टूल या समर्पित बेंचमार्किंग लाइब्रेरी का उपयोग कर सकते हैं। यहाँ एक मूल उदाहरण दिया गया है:

            
const arraySize = 100000;
const largeArray = Array.from({ length: arraySize }, (_, i) => i + 1);

// For loop
console.time('For loop');
for (let i = 0; i < largeArray.length; i++) {
  // Do something
  largeArray[i] * 2;
}
console.timeEnd('For loop');

// forEach
console.time('forEach');
largeArray.forEach(element => {
  // Do something
  element * 2;
});
console.timeEnd('forEach');

// Map
console.time('Map');
largeArray.map(element => {
  // Do something
  return element * 2;
});
console.timeEnd('Map');

            

              
                Copy
              
            
          

अपेक्षित परिणाम:

अधिकांश मामलों में, आपको निम्नलिखित प्रदर्शन क्रम (सबसे तेज़ से सबसे धीमा) दिखाई देगा:

1. for लूप
2. forEach
3. map

महत्वपूर्ण विचार:

• सरणी का आकार: बड़े सरणियों के साथ प्रदर्शन अंतर अधिक महत्वपूर्ण हो जाता है।
• संचालनों की जटिलता: लूप या फ़ंक्शन के अंदर किए गए संचालन की जटिलता भी परिणामों को प्रभावित कर सकती है। सरल संचालन पुनरावृति विधि के ओवरहेड को उजागर करेंगे, जबकि जटिल संचालन अंतर को छिपा सकते हैं।
• जावास्क्रिप्ट इंजन: विभिन्न जावास्क्रिप्ट इंजनों (जैसे Chrome में V8, Firefox में SpiderMonkey) में थोड़ी अलग अनुकूलन रणनीतियाँ हो सकती हैं, जो परिणामों को प्रभावित कर सकती हैं।

सर्वोत्तम अभ्यास और उपयोग के मामले

सही पुनरावृति विधि का चयन आपके कार्य की विशिष्ट आवश्यकताओं पर निर्भर करता है। यहां सर्वोत्तम अभ्यासों का सारांश दिया गया है:

• प्रदर्शन-महत्वपूर्ण संचालन: प्रदर्शन-महत्वपूर्ण संचालन के लिए for लूप का उपयोग करें, खासकर बड़े डेटासेट से निपटने के दौरान।
• सरल पुनरावृति: सरल पुनरावृति के लिए forEach का उपयोग करें जब प्रदर्शन एक प्राथमिक चिंता का विषय न हो और पठनीयता महत्वपूर्ण हो।
• सरणी रूपांतरण: map का उपयोग करें जब आपको एक सरणी को रूपांतरित करने और रूपांतरित मानों के साथ एक नई सरणी बनाने की आवश्यकता हो।
• पुनरावृति को तोड़ना या जारी रखना: यदि आपको break या continue का उपयोग करने की आवश्यकता है, तो आपको for लूप का उपयोग करना होगा। forEach और map तोड़ने या जारी रखने की अनुमति नहीं देते हैं।
• अपरिवर्तनीयता: जब आप मूल सरणी को संरक्षित करना चाहते हैं और संशोधनों के साथ एक नई सरणी बनाना चाहते हैं, तो map का उपयोग करें।

वास्तविक दुनिया के परिदृश्य और उदाहरण

यहां कुछ वास्तविक दुनिया के परिदृश्य दिए गए हैं जहां प्रत्येक पुनरावृति विधि सबसे उपयुक्त विकल्प हो सकती है:

• वेबसाइट ट्रैफ़िक डेटा का विश्लेषण (for लूप): प्रमुख मेट्रिक्स की गणना के लिए लाखों वेबसाइट ट्रैफ़िक रिकॉर्ड को संसाधित करना। बड़े डेटासेट और इष्टतम प्रदर्शन की आवश्यकता के कारण for लूप यहां आदर्श होगा।
• उत्पादों की सूची प्रदर्शित करना (forEach): एक ई-कॉमर्स वेबसाइट पर उत्पादों की सूची प्रदर्शित करना। forEach यहां पर्याप्त होगा क्योंकि प्रदर्शन प्रभाव न्यूनतम है और कोड अधिक पठनीय है।
• उपयोगकर्ता अवतार उत्पन्न करना (map): उपयोगकर्ता डेटा से उपयोगकर्ता अवतार उत्पन्न करना, जहां प्रत्येक उपयोगकर्ता के डेटा को एक छवि URL में रूपांतरित करने की आवश्यकता है। map एक आदर्श विकल्प होगा क्योंकि यह डेटा को छवि URL की एक नई सरणी में रूपांतरित करता है।
• लॉग डेटा को फ़िल्टर करना और संसाधित करना (for लूप): त्रुटियों या सुरक्षा खतरों की पहचान करने के लिए सिस्टम लॉग फ़ाइलों का विश्लेषण करना। चूंकि लॉग फ़ाइलें बहुत बड़ी हो सकती हैं, और विश्लेषण के लिए कुछ शर्तों के आधार पर लूप से बाहर निकलने की आवश्यकता हो सकती है, for लूप अक्सर सबसे कुशल विकल्प होता है।
• अंतर्राष्ट्रीय दर्शकों के लिए संख्याओं का स्थानीयकरण (map): संख्यात्मक मानों की एक सरणी को विभिन्न लोकेल सेटिंग्स के अनुसार प्रारूपित स्ट्रिंग्स में रूपांतरित करना, ताकि अंतर्राष्ट्रीय उपयोगकर्ताओं को प्रदर्शित करने के लिए डेटा तैयार किया जा सके। रूपांतरण करने और स्थानीयकृत संख्या स्ट्रिंग्स की एक नई सरणी बनाने के लिए map का उपयोग यह सुनिश्चित करता है कि मूल डेटा अपरिवर्तित रहे।

बुनियादी बातों से परे: अन्य पुनरावृति विधियाँ

जबकि यह लेख for लूप, forEach, और map पर केंद्रित है, जावास्क्रिप्ट अन्य पुनरावृति विधियाँ प्रदान करता है जो विशिष्ट स्थितियों में उपयोगी हो सकती हैं:

• for...of: एक पुनरावर्तनीय वस्तु (जैसे सरणी, स्ट्रिंग, मैप्स, सेट्स) के मानों पर पुनरावृति करता है।
• for...in: एक वस्तु के गणना योग्य गुणों पर पुनरावृति करता है। (आमतौर पर सरणियों पर पुनरावृति के लिए अनुशंसित नहीं है क्योंकि पुनरावृति का क्रम सुनिश्चित नहीं होता है और इसमें विरासत में मिली गुण भी शामिल होते हैं)।
• filter: प्रदान किए गए फ़ंक्शन द्वारा लागू परीक्षण को पास करने वाले सभी तत्वों के साथ एक नई सरणी बनाता है।
• reduce: एक एकल मान में कम करने के लिए एक संचायक और सरणी में प्रत्येक तत्व (बाएं से दाएं) के विरुद्ध एक फ़ंक्शन लागू करता है।

निष्कर्ष

जावास्क्रिप्ट में विभिन्न पुनरावृति विधियों की प्रदर्शन विशेषताओं और उपयोग के मामलों को समझना कुशल और अनुकूलित कोड लिखने के लिए आवश्यक है। जबकि for लूप आमतौर पर सर्वोत्तम प्रदर्शन प्रदान करते हैं, forEach और map अधिक संक्षिप्त और कार्यात्मक विकल्प प्रदान करते हैं जो कई परिदृश्यों के लिए उपयुक्त हैं। अपने कार्य की विशिष्ट आवश्यकताओं पर सावधानीपूर्वक विचार करके, आप सबसे उपयुक्त पुनरावृति विधि का चयन कर सकते हैं और प्रदर्शन और पठनीयता के लिए अपने जावास्क्रिप्ट कोड को अनुकूलित कर सकते हैं।

प्रदर्शन मान्यताओं को सत्यापित करने और अपने एप्लिकेशन के विशिष्ट संदर्भ के आधार पर अपने दृष्टिकोण को अनुकूलित करने के लिए अपने कोड को बेंचमार्क करना याद रखें। सबसे अच्छा विकल्प आपके डेटासेट के आकार, किए गए संचालन की जटिलता और आपके कोड के समग्र लक्ष्यों पर निर्भर करेगा।