← Back to JavaScript Course | Chapter 4: Modern JS, Async & DOM | Lesson 7 of 26

JS इटरेबल्स

ताश के पत्तों के एक deck के बारे में सोचें, deck अंदर से चाहे जैसे भी organized हो, आप हमेशा एक predictable, repeatable तरीके से एक-एक करके पत्ते बांट सकते हैं जब तक deck खत्म न हो जाए। JavaScript में एक iterable कोई भी ऐसी value है जो जानती है कि उसे एक-एक करके 'बांटा' कैसे जाए, arrays, strings, Sets, और Maps सभी iterables हैं, और यही वजह है कि for...of loop इन सभी पर बिना किसी रुकावट के काम करता है। Iterables को समझना यह बताता है कि cookiescursor.com जैसे किसी project के codebase में इतनी सारी अलग-अलग structures पर बिल्कुल एक जैसे for...of syntax से loop क्यों किया जा सकता है।

In this page:

  1. कोई चीज़ Iterable कैसे बनती है
  2. Strings के साथ for...of
  3. Arrays के साथ for...of
  4. Maps और Sets के साथ for...of
  5. Iterables क्यों मायने रखते हैं
Syntax
javascript 
for (const item of iterable) {
  // item is each element
}

const iterator = iterable[Symbol.iterator]();

कोई चीज़ Iterable कैसे बनती है

कोई value तब iterable मानी जाती है जब वह एक खास internal method लागू करती है, जिसे Symbol.iterator के ज़रिए access किया जा सकता है, और जो यह तय करता है कि उसकी values में एक-एक करके कैसे आगे बढ़ा जाए।

Note: रोज़मर्रा में iterables इस्तेमाल करने के लिए आपको Symbol.iterator को गहराई से समझने की ज़रूरत नहीं, बस इतना जानें कि for...of उस हर चीज़ पर काम करता है जो इसे support करने के लिए बनी हो।
Warning: {} से बनाए गए plain JavaScript objects डिफ़ॉल्ट रूप से Symbol.iterator लागू नहीं करते, इसलिए for...of को इन पर सीधे इस्तेमाल नहीं किया जा सकता।

उदाहरण: What Makes Something Iterable

javascript 
const arr = [1, 2, 3];
console.log(typeof arr[Symbol.iterator]); // "function", arr is iterable

Strings के साथ for...of

Strings iterable होती हैं, यानी for...of किसी स्ट्रिंग में एक-एक character करके आगे बढ़ सकता है, और कुछ पुराने indexing तरीकों से बेहतर तरीके से multi-character symbols को सही ढंग से संभालता है।

Note: जब आपको बस क्रम में हर character चाहिए हो, तो for...of से स्ट्रिंग को iterate करना एक traditional index-based loop का साफ विकल्प है।
Warning: किसी स्ट्रिंग को character by character iterate करना कुछ non-Latin scripts में पाए जाने वाले जटिल combined characters का अपने आप ध्यान नहीं रखता।

उदाहरण: for...of With Strings

javascript 
// Declare the constant `word`, set to "Hi"
// Declare the constant `word`, set to "Hi"
const word = "Hi";
// Loop over `word`, binding each item to `char`
// Loop over `word`, binding each item to `char`
for (let char of word) {
  // Print `char` to the console
  // Print `char` to the console
  console.log(char);
}

Arrays के साथ for...of

Arrays for...of के साथ इस्तेमाल होने वाला सबसे आम iterable है, जो बिना किसी manual index tracking के हर element की value तक सीधी पहुंच देता है।

Note: जब किसी array को iterate करते समय आपको value के साथ index भी चाहिए, तो destructuring के साथ entries() दोनों एक साथ दे देता है।
Warning: for...of आपको सीधे values देता है, indexes नहीं, अगर आपको हर item की position चाहिए, तो इसकी जगह एक regular for loop या array.entries() इस्तेमाल करें।

उदाहरण: for...of With Arrays

javascript 
// Declare the constant `nums`, set to `[10, 20, 30]`
// Declare the constant `nums`, set to `[10, 20, 30]`
const nums = [10, 20, 30];
// Loop over `nums`, binding each item to `n`
// Loop over `nums`, binding each item to `n`
for (let n of nums) {
  // Print `n` to the console
  // Print `n` to the console
  console.log(n);
}

Maps और Sets के साथ for...of

Map और Set दोनों, जिन्हें बाद के chapters में विस्तार से कवर किया गया है, built-in iterables हैं, जो for...of को किसी Set की values या किसी Map के key-value pairs में स्वाभाविक रूप से आगे बढ़ने देते हैं।

Note: for...of और destructuring से किसी Map को iterate करना, for (let [key, value] of myMap), उसकी entries में काम करने का सबसे आम और readable तरीका है।
Warning: किसी Set को iterate करने पर आपको सीधे values मिलती हैं, क्योंकि Set में कोई keys नहीं होतीं, Map के उलट जो स्वाभाविक रूप से key-value pairs देता है।

उदाहरण: for...of With Maps and Sets

javascript 
// Declare the constant `set` as a new `Set` instance
// Declare the constant `set` as a new `Set` instance
const set = new Set([1, 2]);
for (let v of set) console.log(v);
// Declare the constant `map` as a new `Map` instance
// Declare the constant `map` as a new `Map` instance
const map = new Map([["a", 1]]);
for (let [k, v] of map) console.log(k, v);

Iterables क्यों मायने रखते हैं

यह shared iteration protocol ही है जो एक single, consistent for...of syntax को कई बिल्कुल अलग-अलग data structures पर काम करने देता है, जो JavaScript को collections process करने का एक unified तरीका देता है, बिना हर type के लिए अलग looping style सीखे।

Note: अपने खुद के custom data structures design करते समय, Symbol.iterator लागू करना उन्हें for...of और spread operator के साथ भी बिना किसी रुकावट के काम करने देता है।
Warning: हर collection जैसी value अपने आप iterable नहीं होती, यह मान लेने से पहले कि for...of किसी custom structure पर काम करेगा, एक जल्दी test से verify कर लें।

उदाहरण: Why Iterables Matter

javascript 
// Define the function `sum` taking `iterable`
// Define the function `sum` taking `iterable`
function sum(iterable) {
  // Declare the variable `total`, set to `0`
  // Declare the variable `total`, set to `0`
  let total = 0;
  for (let n of iterable) total += n;
  // Return `total` from this function
  // Return `total` from this function
  return total;
}
// Print `sum([1, 2, 3])` to the console
// Print `sum([1, 2, 3])` to the console
console.log(sum([1, 2, 3]));
// Print `sum(new Set([4, 5]))` to the console
// Print `sum(new Set([4, 5]))` to the console
console.log(sum(new Set([4, 5])));
Live Example
Related Topics

JS व्हाइल लूप · JS सेट्स · JS फॉर लूप · JS मैप्स

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. यह मान लेना कि हर object automatically iterable है, plain objects डिफ़ॉल्ट रूप से iterable नहीं होते जब तक आप खासतौर पर वह behavior implement न करें।
  2. किसी plain object पर सीधे for...of इस्तेमाल करने की कोशिश करना, जो एक TypeError throw करता है क्योंकि objects के पास default iteration protocol नहीं होता।
  3. array-like objects, जैसे function arguments, को असली iterables से confuse करना, कुछ array-like structures को पहले conversion चाहिए।
चैप्टर सारांश
  • एक iterable कोई भी ऐसी value है जो iteration protocol implement करती है, जिससे इसे for...of से loop किया जा सके।
  • Symbol.iterator वह special method है जो किसी value को अंदर से iterable बनाता है।
  • Strings, arrays, Sets, और Maps सभी built-in iterables हैं, जबकि plain objects डिफ़ॉल्ट रूप से iterable नहीं हैं।
ब्राउज़र सपोर्ट

Iteration protocol, Symbol.iterator, और built-in iterables के लिए for...of support हर modern browser में supported हैं।

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS Loop While Next Lesson → JS Sets

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.