ऐर

ऐरे लूप में JavaScript

9 अभ्यास

ऐरे लूप के बारे में

ऐरे के साथ काम करते समय कभी-कभी आपको ऐरे की हर वैल्यू के लिए कोड चलाना होता है। इसे ऐरे पर इटरेशन करना या ऐरे पर लूप चलाना कहा जाता है।

यहाँ हम उस स्थिति को देखेंगे जिसमें आप इस दौरान ऐरे को बदलना नहीं चाहते। ऐरे को बदलने के लिए इसके बजाय कॉन्सेप्ट ऐरे ट्रांसफॉर्मेशन देखिए।

for लूप

ऐरे पर इटरेशन करने का सबसे बुनियादी और आम तौर पर बहुत तेज़ तरीका for लूप का इस्तेमाल करना है। इसके लिए कॉन्सेप्ट for लूप देखिए।

const numbers = [6.0221515, 10, 23];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}
// => 6.0221515
// => 10
// => 23

for...of लूप

जब आप हर इटरेशन में सीधे वैल्यू के साथ काम करना चाहते हैं और इंडेक्स की ज़रूरत बिल्कुल नहीं है, तो आप for...of लूप इस्तेमाल कर सकते हैं।

for...of ऊपर दिखाए गए बुनियादी for लूप की तरह काम करता है, लेकिन इसमें लूप के अंदर इंडेक्स को एक वेरिएबल की तरह संभालना नहीं पड़ता, बल्कि आपको सीधे वैल्यू मिल जाती है।

const numbers = [6.0221515, 10, 23];

// Because re-assigning number inside the loop will be very
// confusing, disallowing that via const is preferable.
for (const number of numbers) {
  console.log(number);
}
// => 6.0221515
// => 10
// => 23

आम for लूप की तरह ही, आप continue का इस्तेमाल करके मौजूदा इटरेशन रोक सकते हैं और break से लूप का चलना पूरी तरह रोक सकते हैं।

JavaScript में ऑब्जेक्ट की कीज़ पर इटरेशन करने के लिए for...in लूप भी होता है। ध्यान देना ज़रूरी है कि for...of और for...in एक-दूसरे की जगह इस्तेमाल नहीं किए जा सकते। इस पर जानकारी के लिए MDN डॉक्युमेंटेशन देखिए।

forEach मेथड

हर ऐरे में एक forEach मेथड होता है, जिसे ऐरे के एलिमेंट्स पर लूप करने के लिए भी इस्तेमाल किया जा सकता है।

forEach पैरामीटर के रूप में एक कॉलबैक लेता है। ऐरे के हर एलिमेंट के लिए कॉलबैक फंक्शन एक बार कॉल किया जाता है।

const numbers = [6.0221515, 10, 23];

numbers.forEach((number) => console.log(number));
// => 6.0221515
// => 10
// => 23

ऊपर के उदाहरण में कॉलबैक सिर्फ मौजूदा एलिमेंट को पैरामीटर के रूप में इस्तेमाल करता है। ज़रूरत पड़ने पर कॉलबैक ज़्यादा से ज़्यादा तीन पैरामीटर इस्तेमाल कर सकता है।

  • मौजूदा इटरेशन की वैल्यू
  • मौजूदा इटरेशन का इंडेक्स
  • पूरा ऐरे
const numbers = [6.0221515, 10, 23];

function callback(number, index, fullArray) {
  console.log(number, index, fullArray);
}

numbers.forEach(callback);
// => 6.0221515 0 [ 6.0221515, 10, 23 ]
// => 10 1 [ 6.0221515, 10, 23 ]
// => 23 2 [ 6.0221515, 10, 23 ]

कॉलबैक के अलावा, forEach दूसरे वैकल्पिक पैरामीटर के रूप में इटरेशन के लिए इस्तेमाल होने वाला this कॉन्टेक्स्ट भी लेता है। इसका एक उदाहरण आप MDN पर "Using thisArg" सेक्शन में देख सकते हैं।

forEach के साथ काम करते समय कुछ बातें ध्यान में रखनी चाहिए।

  • forEach लूप शुरू होने के बाद इटरेशन रोकने का कोई तरीका नहीं है। इस कॉन्टेक्स्ट में break और continue स्टेटमेंट मौजूद ही नहीं हैं।
  • अगर आप लूप शुरू करने के बाद ऐरे को बदलते हैं, तो forEach अजीब तरीके से व्यवहार करता है। अंत में जोड़े गए एलिमेंट्स नज़रअंदाज कर दिए जाते हैं, एलिमेंट हटाने पर कुछ और एलिमेंट छूट सकते हैं, वगैरह। ऐसी समस्याओं से बचने के लिए कॉलबैक के अंदर मूल ऐरे को कभी न बदलें।
  • forEach मेथड की खुद की रिटर्न वैल्यू undefined होती है। इस वजह से आप इसके बाद कोई और ऐरे मेथड चेन नहीं कर सकते।
  • अगर आप अपने कोड को परफॉर्मेंस के लिहाज से बेहतर बनाना चाहते हैं, तो आपको इसके बजाय for या for...of इस्तेमाल करने पर विचार करना चाहिए, क्योंकि दोनों लगभग तीन गुना तेज़ हैं।
GitHub के ज़रिए संपादित करें यह लिंक नई विंडो या टैब में खुलता है।

ऐरे लूप सीखिए