fo

for लूप में JavaScript

30 अभ्यास

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

सामान्य सिंटैक्स

किसी तर्क को बार-बार चलाने के लिए for लूप सबसे ज़्यादा इस्तेमाल होने वाले स्टेटमेंट में से एक है। JavaScript में इसमें for कीवर्ड, गोल ब्रैकेट में लिखा गया एक हेडर, और घुंघराले ब्रैकेट में लपेटा गया एक कोड ब्लॉक होते हैं, जिसमें लूप की बॉडी रहती है।

for (initialization; condition; step) {
  // code that is executed repeatedly as long as the condition is
  // true
}

हेडर

इनिशियलाइज़ेशन आम तौर पर एक काउंटर वेरिएबल तैयार करता है। शर्त यह तय करती है कि लूप चलता रहे या रुक जाए, और स्टेप हर इटरेशन के अंत में काउंटर बढ़ाता है। हेडर के अलग-अलग हिस्सों को सेमीकोलन से अलग किया जाता है।

const list = ['a', 'b', 'c'];
for (let i = 0; i < list.length; i++) {
  // code that should be executed for each item in the array
}

हेडर के तीनों हिस्से वैकल्पिक हैं। व्यवहार में इनका इस्तेमाल शायद ही किया जाता है। इसके बारे में आप MDN दस्तावेज़ीकरण में और पढ़ सकते हैं।

नेस्टेड for लूप

for लूप को नेस्टेड किया जा सकता है। इसका इस्तेमाल तब होता है जब, उदाहरण के लिए, हमें नेस्टेड (बहु-आयामी) ऐरे पर इटरेशन करना हो। ध्यान रखिए कि हर लूप के लिए अलग काउंटर वेरिएबल ज़रूर बनाइए।

const coords = [
  [1, 2],
  [4, 7],
  [10, -3],
];

for (let i = 0; i < coords.length; i++) {
  for (let j = 0; j < coords[i].length; j++) {
    // do something with coords[i][j]
  }
}

break, continue और लेबल

लूप के अंदर आप break कीवर्ड का उपयोग करके लूप को पूरी तरह रोक सकते हैं। इसके उलट, continue कीवर्ड सिर्फ मौजूदा इटरेशन रोकता है और अगले इटरेशन के साथ आगे बढ़ जाता है।

नेस्टेड लूप के साथ काम करते समय break और continue डिफॉल्ट रूप से हमेशा सबसे अंदर वाले लूप पर ही लागू होते हैं। इस व्यवहार को बदलने के लिए आप लेबल का उपयोग कर सकते हैं। लेबल एक आइडेंटिफायर नाम होता है जिसके बाद कोलन लगता है। इसे लूप के आगे (या ऊपर) रखा जाता है। फिर ऐसे लेबल को break या continue के साथ जोड़कर तय किया जा सकता है कि स्टेटमेंट किस लूप पर लागू होगा।

outer: for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 10; j++) {
    // ...
    if (j > 5) {
      continue outer;
    }
    // ...
  }
}

लूप काउंटर और एसिंक्रोनस कोड

एसिंक्रोनस कोड के साथ काम करते समय ध्यान रखिए कि आप अपना काउंटर वेरिएबल सही ढंग से घोषित करें। चलिए एक उदाहरण देखते हैं, जिसमें हम 1 सेकंड रुकने के बाद setTimeout की मदद से काउंटर वेरिएबल को एसिंक्रोनस तरीके से जोड़ते हैं। जब काउंटर को var से, या हेडर के बाहर let से घोषित किया जाता है, तो कोड अपेक्षित परिणाम नहीं देता।

let sum = 0;
for (var i = 1; i < 4; i++) {
  setTimeout(function () { sum += i; }, 1000);
}
// eventually sum will be 12 instead of 6 (1+2+3)
let sum = 0;
let i;
for (i = 1; i < 4; i++) {
  setTimeout(function () { sum += i; }, 1000);
}
// same here, eventually sum will be 12 instead of 6 (1+2+3)

इन दोनों मामलों में i किसी एक खास लूप इटरेशन तक सीमित नहीं है। जब तक जोड़ की गणना होती है, तब तक i अपनी अंतिम वैल्यू 4 तक पहुँच चुका होता है, और इससे जोड़ 4 + 4 + 4 = 12 बन जाता है।

इस समस्या से बचा जा सकता है। इसके लिए काउंटर को हेडर के अंदर let से घोषित कीजिए। इसका खास असर यह होता है कि हर इटरेशन को अपना अलग वेरिएबल let i मिलता है, जो सिर्फ लूप के अंदर के कोड के उसी एक बार चलने तक सीमित रहता है। इसलिए जब बाद में जोड़ की गणना होती है, तब हर कॉलबैक फंक्शन अपने ही वेरिएबल i का उपयोग करता है, जिसमें अब भी सही वैल्यू रहती है।

let sum = 0;
for (let i = 1; i < 4; i++) {
  setTimeout(function () { sum += i; }, 1000);
}
// eventually sum will be 6 (1+2+3) as expected
GitHub के ज़रिए संपादित करें यह लिंक नई विंडो या टैब में खुलता है।

for लूप सीखिए