JavaScript for…in लूप की व्याख्या: सिंटैक्स, उपयोग के मामले, और सर्वोत्तम प्रथाएँ

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. परिचय｜for…in कथन किन समस्याओं को हल कर सकता है?

JavaScript वेब विकास में सबसे अधिक उपयोग की जाने वाली प्रोग्रामिंग भाषाओं में से एक है। इसकी कई विशेषताओं में, लूपिंग डेटा को बार‑बार प्रोसेस करने के लिए आवश्यक है।
विशेष रूप से, for…in कथन ऑब्जेक्ट की प्रॉपर्टियों पर इटररेट करने के लिए उपयोगी है।

इस लेख का उद्देश्य

इस लेख में हम निम्नलिखित बिंदुओं को विस्तार से कवर करेंगे:

• JavaScript for…in लूप की बुनियादी सिंटैक्स और उपयोग
• एरे के साथ उपयोग करते समय सावधानियाँ
• अन्य लूप संरचनाओं (for…of और forEach) से अंतर
• सामान्य त्रुटियाँ और उन्हें कैसे ठीक करें

आप क्या सीखेंगे

• ऑब्जेक्ट प्रॉपर्टी और एरे तत्वों को प्रभावी ढंग से प्रोसेस करना
• for…in कथन के सुरक्षित उपयोग और सावधानियाँ
• व्यावहारिक कोड उदाहरण और प्रदर्शन तुलना

यह लेख शुरुआती और मध्यवर्ती JavaScript डेवलपर्स दोनों के लिए उपयोगी ज्ञान प्रदान करने के लिए संरचित है।
आइए अगले भाग में for…in कथन की बुनियादों से शुरू करते हैं।

2. JavaScript for…in कथन क्या है?【बुनियादी व्याख्या】

JavaScript में, for…in कथन का उपयोग किसी ऑब्जेक्ट की प्रॉपर्टियों पर इटररेट करने के लिए किया जाता है। यह सिंटैक्स विशेष रूप से ऑब्जेक्ट्स के लिए उपयुक्त है, जिससे आप प्रत्येक प्रॉपर्टी नाम (की) को एक‑एक करके प्रोसेस कर सकते हैं।

बुनियादी सिंटैक्स

for…in लूप की बुनियादी सिंटैक्स इस प्रकार है:

for (variable in object) {
  // Repeated processing
}

पैरामीटर व्याख्या:

• variable : वर्तमान प्रॉपर्टी नाम (की) को संग्रहीत करता है।
• object : वह लक्ष्य ऑब्जेक्ट जिसे आप इटररेट करना चाहते हैं।

उपयोग उदाहरण: ऑब्जेक्ट प्रॉपर्टियों की सूची बनाना

const person = {
  name: "Taro",
  age: 25,
  city: "Tokyo"
};

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

आउटपुट:

name: Taro
age: 25
city: Tokyo

सावधानी: सूचीबद्ध प्रॉपर्टियों का क्रम

for…in लूप में प्रॉपर्टियों का क्रम गारंटीशुदा नहीं होता। JavaScript विनिर्देशों के अनुसार, की स्ट्रिंग्स होने पर क्रम सम्मिलन क्रम से मेल नहीं खा सकता। यदि आपको सख्त क्रम चाहिए, तो Object.keys() जैसी वैकल्पिक विधियों का उपयोग करें।

सुविधाओं का सारांश

1. ऑब्जेक्ट कीज़ को आसानी से प्राप्त करना: गतिशील रूप से प्रॉपर्टी नामों तक पहुँचने में उपयोगी।
2. केवल enumerable प्रॉपर्टी लक्षित: गैर‑enumerable प्रॉपर्टी (enumerable: false) को बाहर रखा जाता है।
3. प्रोटोटाइप‑विरासत वाली प्रॉपर्टी भी सूचीबद्ध: यह समस्या पैदा कर सकता है, जिसे अगले भाग में समझाया जाएगा।

3. एरे और for…in कथन｜ध्यान देने योग्य मुख्य बिंदु

JavaScript for…in कथन ऑब्जेक्ट प्रॉपर्टियों को सूचीबद्ध करने के लिए बनाया गया है, लेकिन इसे एरे के साथ भी उपयोग किया जा सकता है। हालांकि, एरे पर इसे लागू करने में कई सावधानियाँ होती हैं। आइए इसके व्यवहार और संभावित समस्याओं को विस्तार से देखें।

एरे के साथ बुनियादी व्यवहार

निम्नलिखित उदाहरण पर विचार करें:

const fruits = ["Apple", "Banana", "Orange"];

for (const index in fruits) {
  console.log(index, fruits[index]);
}

आउटपुट:

0 Apple  
1 Banana  
2 Orange

सावधानी 1: प्रोटोटाइप प्रॉपर्टी भी सूचीबद्ध हो सकती हैं

Array.prototype.newMethod = function () {
  return "New Method";
};

for (const index in fruits) {
  console.log(index, fruits[index]);
}

आउटपुट:

0 Apple  
1 Banana  
2 Orange  
newMethod undefined

समाधान:

for (const index in fruits) {
  if (fruits.hasOwnProperty(index)) {
    console.log(index, fruits[index]);
  }
}

सावधानी 2: क्रम गारंटीशुदा नहीं है

const data = [];
data[10] = "Apple";
data[1] = "Banana";
data[5] = "Orange";

for (const index in data) {
  console.log(index, data[index]);
}

आउटपुट:

1 Banana  
5 Orange  
10 Apple

सावधानी 3: इंडेक्स स्ट्रिंग के रूप में ट्रीट किए जाते हैं

const numbers = [10, 20, 30];
for (const index in numbers) {
  console.log(typeof index); // "string"
}

समाधान:

for (const index in numbers) {
  const numIndex = parseInt(index, 10);
  console.log(numIndex, numbers[numIndex]);
}

सारांश

• for…in कथन ऑब्जेक्ट्स के लिए एरेज़ की तुलना में अधिक उपयुक्त है।
• क्रम और संख्यात्मक इंडेक्स हैंडलिंग के लिए, for…of या पारंपरिक for लूप की सिफारिश की जाती है।

4. for…in और for…of के बीच अंतर【तुलनात्मक तालिका】

जावास्क्रिप्ट में, लूपिंग के लिए for…in और for…of दोनों उपलब्ध हैं, लेकिन उनके उपयोग मामलों और व्यवहार में अंतर है।

सिंटैक्स तुलना

for…in:

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  console.log(key); // Retrieves keys
}

for…of:

const arr = [10, 20, 30];
for (const value of arr) {
  console.log(value); // Retrieves values
}

तुलना तालिका

व्यावहारिक उदाहरण｜एरे हैंडलिंग

const arr = ['a', 'b', 'c'];

// for...in
for (const index in arr) {
  console.log(index); // Output: 0, 1, 2
}

// for...of
for (const value of arr) {
  console.log(value); // Output: 'a', 'b', 'c'
}

सारांश

• for…in: ऑब्जेक्ट कुंजियों को संभालने के लिए सबसे अच्छा।
• for…of: एरेज़ और इटेरेबल ऑब्जेक्ट्स के लिए सबसे अच्छा।

5. व्यावहारिक उपयोग: for…in कथन के अनुप्रयोग और सर्वोत्तम प्रथाएँ

यहाँ, हम जावास्क्रिप्ट के for…in कथन के व्यावहारिक अनुप्रयोगों का अन्वेषण करेंगे और वास्तविक विकास में उपयोगी सर्वोत्तम प्रथाओं को प्रस्तुत करेंगे।

1. उदाहरण 1｜ऑब्जेक्ट प्रॉपर्टीज़ को फ़िल्टर करना

const user = {
  name: "Tanaka",
  age: 30,
  email: "tanaka@example.com",
  password: "secret123"
};

const publicData = {};
for (const key in user) {
  if (key !== "password") {
    publicData[key] = user[key];
  }
}
console.log(publicData);

आउटपुट:

{ name: 'Tanaka', age: 30, email: 'tanaka@example.com' }

2. उदाहरण 2｜नेस्टेड ऑब्जेक्ट्स को प्रोसेस करना

const data = {
  user: {
    name: "Sato",
    info: {
      age: 28,
      city: "Osaka"
    }
  }
};

function printNested(obj) {
  for (const key in obj) {
    if (typeof obj[key] === "object") {
      printNested(obj[key]);
    } else {
      console.log(`${key}: ${obj[key]}`);
    }
  }
}

printNested(data);

आउटपुट:

name: Sato
age: 28
city: Osaka

3. सर्वोत्तम प्रथा｜प्रोटोटाइप प्रॉपर्टीज़ को बाहर रखना

const obj = { a: 1, b: 2 };
Object.prototype.c = 3;

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(`${key}: ${obj[key]}`);
  }
}

आउटपुट:

a: 1
b: 2

सारांश

• हमने फ़िल्टरिंग और नेस्टेड ऑब्जेक्ट्स को संभालने के उपयुक्त उपयोग मामलों को प्रस्तुत किया।
• अनपेक्षित प्रोटोटाइप इनहेरिटेंस को सूचीबद्ध होने से रोकने के लिए hasOwnProperty() का उपयोग करें।

6. for…in के साथ सामान्य त्रुटियाँ और समाधान【शुरुआती‑मित्र】

1. त्रुटि उदाहरण 1｜प्रोटोटाइप प्रॉपर्टीज़ सूचीबद्ध हो रही हैं

const obj = { a: 1, b: 2 };
Object.prototype.c = 3;

for (const key in obj) {
  console.log(key, obj[key]);
}

आउटपुट:

a 1
b 2
c 3

समाधान:

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key, obj[key]);
  }
}

2. त्रुटि उदाहरण 2｜एरेज़ के साथ for…in का उपयोग

const arr = [10, 20, 30];
Array.prototype.extra = "Additional Data";

for (const index in arr) {
  console.log(index, arr[index]);
}

आउटपुट:

0 10
1 20
2 30
extra undefined

समाधान:

for (const value of arr) {
  console.log(value);
}

3. त्रुटि उदाहरण 3｜अनडिफाइंड वैल्यूज़ को संभालना

const obj = { a: 1, b: undefined, c: 3 };

for (const key in obj) {
  console.log(key, obj[key]);
}

समाधान:

for (const key in obj) {
  const value = obj[key] ?? "Default Value";
  console.log(key, value);
}

सारांश

• प्रोटोटाइप प्रॉपर्टी समस्याएँ: hasOwnProperty() का उपयोग करें।
• एरे हैंडलिंग: for…in के बजाय for…of या forEach को प्राथमिकता दें।
• अनडिफाइंड वैल्यूज़: नलिश कोएलसिंग ऑपरेटर ( ?? ) के साथ डिफ़ॉल्ट वैल्यू असाइन करें।

7. प्रदर्शन परीक्षण और for…in के विकल्प

1. प्रदर्शन तुलना

for…in statement:

const obj = { a: 1, b: 2, c: 3 };
console.time("for...in");
for (const key in obj) {
  console.log(key, obj[key]);
}
console.timeEnd("for...in");

Object.keys():

console.time("Object.keys");
Object.keys(obj).forEach(key => {
  console.log(key, obj[key]);
});
console.timeEnd("Object.keys");

2. उदाहरण तुलना परिणाम

for...in: 0.015ms
Object.keys: 0.005ms

3. अनुशंसित विकल्प

• ऑब्जेक्ट हैंडलिंग: बेहतर प्रदर्शन और सुरक्षा के लिए Object.keys() को प्राथमिकता दें।
• ऐरे हैंडलिंग: तेज़ और अधिक विश्वसनीय इटरेशन के लिए for…of या forEach का उपयोग करें।

सारांश

• for…in स्टेटमेंट सुविधाजनक है, लेकिन प्रदर्शन और सुरक्षा को ध्यान में रखते हुए सबसे उपयुक्त लूप संरचना चुनें।

8. निष्कर्ष｜for…in स्टेटमेंट को समझना और अगले कदम

1. मुख्य बिंदु

1. for…in की बुनियादी सिंटैक्स और उपयोग:

• ऑब्जेक्ट प्रॉपर्टी नामों पर इटरेट करने के लिए उपयोग किया जाता है।
• ऑब्जेक्ट की कुंजियों के लिए विशेष, एरेज़ के लिए नहीं।

1. एरेज़ के साथ उपयोग करते समय सावधानियां:

• क्रम की गारंटी नहीं होती, और प्रोटोटाइप चेन की प्रॉपर्टीज़ शामिल हो सकती हैं।
• एरेज़ के लिए, इसके बजाय for…of या forEach() का उपयोग करें।

1. for…in और for…of के बीच अंतर:

• for…in: प्रॉपर्टी नामों (कुंजियों) पर इटरेट करता है।
• for…of: एरेज़ या इटेरेबल ऑब्जेक्ट्स के वास्तविक मानों पर इटरेट करता है।

1. व्यावहारिक अनुप्रयोग और सर्वोत्तम प्रथाएँ:

• पुनरावृत्ति (recursion) के साथ नेस्टेड ऑब्जेक्ट्स को संभालना।
• hasOwnProperty() के साथ प्रोटोटाइप इनहेरिटेंस को बाहर रखना।
• Object.keys() या Object.entries() के साथ प्रदर्शन और सुरक्षा में सुधार।

1. प्रदर्शन अनुकूलन:

• क्रम की गारंटी और दक्षता के लिए Object.keys() + forEach() की सिफारिश की जाती है, जिससे यह for…in का एक सुरक्षित विकल्प बनता है।

2. सामान्य प्रश्नों के उत्तर

Q1. क्या मुझे for…in स्टेटमेंट का उपयोग करने से बचना चाहिए?

• A: यह ऑब्जेक्ट प्रॉपर्टीज़ को सूचीबद्ध करने के लिए उपयुक्त है, लेकिन एरेज़ या प्रदर्शन-गंभीर कार्यों के लिए for…of या Object.keys() अधिक सुरक्षित और कुशल है।

Q2. क्या प्रोटोटाइप प्रॉपर्टीज़ हमेशा सूचीबद्ध होंगी?

• A: हाँ। विनिर्देश के अनुसार, विरासत में मिले प्रोटोटाइप प्रॉपर्टीज़ भी शामिल होते हैं। इस समस्या से बचने के लिए hasOwnProperty() का उपयोग करें।

Q3. एरेज़ और ऑब्जेक्ट्स के आधार पर सबसे अच्छा लूप कौन सा है?

• ऑब्जेक्ट्स: for…in या Object.keys() का उपयोग करें।
• एरेज़: for…of या forEach() का उपयोग करें।

3. अगले कदम｜अगला क्या सीखें

1. इटेरेबल्स और इटेरेबल ऑब्जेक्ट्स:

• Map, Set, WeakMap, WeakSet जैसी डेटा संरचनाएँ और उन्हें संभालने के लूप।

1. डेटा हैंडलिंग के लिए हाईयर-ऑर्डर फ़ंक्शन्स:

• map(), filter(), reduce() का व्यावहारिक उपयोग।

1. उन्नत ऑब्जेक्ट और एरे तकनीकें:

• कुशल डेटा प्रोसेसिंग के लिए Object.values() और Object.entries() का उपयोग।

1. आधुनिक जावास्क्रिप्ट फीचर्स:

• कोड को साफ़ रखने के लिए स्प्रेड ऑपरेटर और डिस्ट्रक्चरिंग जैसे ES6+ फीचर्स।

1. प्रॉमिस/ऐसिंक्रोनस/अवेट के साथ असिंक्रोनस प्रोग्रामिंग:

• डेटा फ़ेचिंग और डायनामिक ऑब्जेक्ट हैंडलिंग जैसे रीयल-टाइम प्रोसेसिंग में लूप लागू करें।

4. अंतिम विचार｜जावास्क्रिप्ट लूप्स में महारत

इस लेख में, हमने जावास्क्रिप्ट for…in स्टेटमेंट पर ध्यान केंद्रित किया, जिसमें इसकी बुनियादी उपयोग, उन्नत अनुप्रयोग, खामियां और विकल्प शामिल हैं।

सबसे महत्वपूर्ण बिंदु:

• for…in ऑब्जेक्ट प्रॉपर्टीज़ को सूचीबद्ध करने के लिए आदर्श है, लेकिन एरेज़ या प्रदर्शन-केंद्रित कार्यों के लिए अन्य तरीकों का उपयोग किया जाना चाहिए।
• कोड में त्रुटियों और अप्रत्याशित व्यवहार से बचने के लिए हमेशा सर्वोत्तम प्रथाओं और सुरक्षा उपायों का पालन करें।

अगला कदम!

वैकल्पिक विधियों और हाईयर-ऑर्डर फ़ंक्शन्स की समझ को गहरा करें ताकि आपके जावास्क्रिप्ट कौशल अगले स्तर पर पहुँचें।