जावास्क्रिप्ट में पुनरावृत्ति के लिए सर्वश्रेष्ठ प्रथाएं
यह लेख जावास्क्रिप्ट में पुनरावृत्ति के लिए सर्वोत्तम प्रथाओं को समझाता है।
YouTube Video
जावास्क्रिप्ट में पुनरावृत्ति के लिए सर्वश्रेष्ठ प्रथाएं
जावास्क्रिप्ट में, पुनरावृत्ति के लिए for लूप का उपयोग करना आम है। यहां, हम कुशल और पठनीय कोड लिखने के लिए for लूप का उपयोग करने की सर्वोत्तम प्रथाओं की विस्तृत व्याख्या प्रदान करेंगे।
उचित लूपिंग संरचना चुनें
जावास्क्रिप्ट कई लूपिंग संरचनाएं प्रदान करता है, प्रत्येक विभिन्न उद्देश्यों के लिए उपयुक्त है।
1// Example of a for loop
2for (let i = 0; i < 5; i++) {
3 console.log(i);
4}
5
6// Example of a for...of loop
7const array = [10, 20, 30];
8for (const value of array) {
9 console.log(value);
10}
11
12// Example of a for...in loop
13const obj = { a: 1, b: 2, c: 3 };
14for (const key in obj) {
15 console.log(`${key}: ${obj[key]}`);
16}
17
18// Example of a while loop
19let count = 0;
20while (count < 5) {
21 console.log(count);
22 count++;
23}forकथन उपयुक्त है जब पुनरावृत्तियों की संख्या पूर्वनिर्धारित हो।for...ofकथन एरेज़ और इटरबल ऑब्जेक्ट्स को संक्षेप में संसाधित करने के लिए उपयुक्त है।for...inकथन का उपयोग एक ऑब्जेक्ट की गुणों पर इटरशन के लिए किया जाता है। हालांकि, यह ऐरे के लिए उपयुक्त नहीं है।whileकथन औरdo...whileकथन का उपयोग शर्तों के आधार पर लूप को नियंत्रित करने के लिए किया जाता है।
forEach मेथड और for...of कथन का उपयोग करना
किसी एरे के माध्यम से लूप करते समय, इंडेक्स तक पहुंचने के लिए for कथन का उपयोग सामान्य है, लेकिन forEach मेथड या for...of कथन अधिक पठनीय हो सकता है।
1// Using a standard for loop
2const array = ["apple", "banana", "cherry"];
3for (let i = 0; i < array.length; i++) {
4 console.log(array[i]);
5}
6
7// Using forEach
8array.forEach(item => console.log(item));
9
10// Using for...of
11for (const item of array) {
12 console.log(item);
13}forकथन इटरशन करते समय स्पष्ट इंडेक्स प्रबंधन की अनुमति देता है।forEachमेथड प्रत्येक तत्व को संक्षेप में संसाधित करने के लिए एक कॉलबैक फ़ंक्शन का उपयोग करता है।for...ofकथन अत्यधिक पठनीय है और एरे में प्रत्येक तत्व तक सीधी पहुंच की अनुमति देता है।
लूप शर्तों को अनुकूलित करें।
क्योंकि लूप शर्त को बार-बार मूल्यांकित किया जाता है, अनावश्यक गणनाओं से बचना प्रदर्शन को सुधार सकता है।
1const names = ["Alice", "Bob", "Charlie"];
2const scores = [85, 92, 78];
3
4// Inefficient example
5for (let i = 0; i < Math.min(names.length, scores.length); i++) {
6 console.log(`${names[i]} scored ${scores[i]}`);
7}
8
9// Efficient example
10for (let i = 0, len = Math.min(names.length, scores.length); i < len; i++) {
11 console.log(`${names[i]} scored ${scores[i]}`);
12}- जैसा कि इस उदाहरण में दिखाया गया है, गणना के परिणाम को पहले से एक वैरिएबल में संग्रहीत करना अधिक कुशल लूप निष्पादन की अनुमति देता है।
1const scores = [85, 92, 78];
2let sum = 0;
3let sum2 = 0;
4
5// Inefficient example
6for (let i = 0; i < scores.length; i++) {
7 sum += scores[i];
8}
9console.log(`Total score : ${sum}`);
10
11// Efficient example
12for (let i = scores.length - 1; i >= 0; i--) {
13 sum2 += scores[i];
14}
15console.log(`Total score : ${sum2}`);- जैसा कि इस उदाहरण में दिखाया गया है, शर्त को उलटने से कभी-कभी अधिक कुशलता प्राप्त हो सकती है।
लूप प्रोसेसिंग का अनुकूलन
चूंकि लूप प्रोसेसिंग को बार-बार निष्पादित किया जाता है, अनावश्यक गणनाओं से बचना प्रदर्शन को बेहतर बना सकता है।
1const array = ["apple", "banana", "cherry"];
2
3// Inefficient example
4for (let i = 0; i < 100; i++) {
5 const element = document.querySelector("#myElement");
6 element.textContent = `Count: ${i}`;
7}
8
9// Efficient example
10const element = document.querySelector("#myElement");
11for (let i = 0; i < 100; i++) {
12 element.textContent = `Count: ${i}`;
13}- इस उदाहरण में, लूप के बाहर
querySelectorविधि ले जाकर, अनावश्यक दोहराव वाली गणनाओं को समाप्त किया गया है।
स्कोप के बारे में जागरूक रहें।
लूप के अंदर वेरिएबल्स के लिए उपयुक्त स्कोप सुनिश्चित करने के लिए let या const का उपयोग करें। चूंकि var केवल फंक्शन स्कोप तक सीमित है, इससे अप्रत्याशित व्यवहार हो सकता है।
1// Using let
2for (let i = 0; i < 3; i++) {
3 console.log(i);
4}
5
6// Potential issue with var
7for (var i = 0; i < 3; i++) {
8 setTimeout(() => console.log(i), 1000); // 3, 3, 3
9}
10
11// Using let to avoid the issue
12for (let i = 0; i < 3; i++) {
13 setTimeout(() => console.log(i), 1000); // 0, 1, 2
14}varका स्कोप फ़ंक्शन के अंदर होता है, इसलिए लूप के बादiका मान3होता है, औरsetTimeoutद्वारा निष्पादित सभी फ़ंक्शन्स का आउटपुट3होता है।letका उपयोग करने से,setTimeoutकॉलबैक फ़ंक्शन के अंदर काiप्रत्येक लूप के लिए नए मान को संदर्भित करता है, इसलिए0, 1, 2अपेक्षित रूप से आउटपुट होते हैं।
शुरुआती निकास का उपयोग करके पठनीयता में सुधार करें।
लूप प्रोसेसिंग को सरल बनाने के लिए, पठनीयता बढ़ाने के लिए break और continue का उपयुक्त उपयोग करें।
1// Example using break
2for (let i = 0; i < 10; i++) {
3 if (i === 5) {
4 break; // Exit the loop
5 }
6 console.log(i);
7}
8
9// Example using continue
10for (let i = 0; i < 10; i++) {
11 if (i % 2 === 0) {
12 continue; // Skip to the next iteration
13 }
14 console.log(i);
15}breakका उपयोग करके आप बीच में लूप प्रक्रिया को समाप्त कर सकते हैं, जिससे सभी आगामी पुनरावृत्तियां छोड़ दी जाती हैं।continueका उपयोग करके आप वर्तमान लूप प्रक्रिया को छोड़ सकते हैं और अगली पुनरावृत्ति पर जा सकते हैं।
गहरी नेस्टिंग से बचें।
गहरी नेस्टिंग कोड को पढ़ने में कठिन बनाती है, इसलिए शुरुआती रिटर्न का उपयोग करके या कार्यक्षमता को फंक्शनों में विभाजित करके नेस्टिंग को उथला रखने का लक्ष्य रखें।
1// Deeply nested example
2for (let i = 0; i < 5; i++) {
3 for (let j = 0; j < 5; j++) {
4 if (i + j > 5) {
5 console.log(i, j);
6 }
7 }
8}
9
10// Improved using function decomposition
11function processPairs(i) {
12 for (let j = 0; j < 5; j++) {
13 if (i + j > 5) {
14 console.log(i, j);
15 }
16 }
17}
18
19for (let i = 0; i < 5; i++) {
20 processPairs(i);
21}- इस उदाहरण में, नेस्टिंग को कम करने के लिए फ़ंक्शन्स का उपयोग किया गया है।
त्रुटि प्रबंधन पर विचार करें
यदि लूप के अंदर त्रुटियां उत्पन्न होने की संभावना है, तो उचित त्रुटि प्रबंधन लागू करें।
1const data = ["123", "abc", "456", "xyz"];
2
3// Without Error Handling
4for (const item of data) {
5 const result = parseInt(item);
6 console.log(`Parsed value: ${result}`);
7}
8
9// With Error Handling
10for (const item of data) {
11 try {
12 const result = parseInt(item);
13 if (isNaN(result)) {
14 throw new Error(`Invalid number: ${item}`);
15 }
16 console.log(`Parsed value: ${result}`);
17 } catch (error) {
18 console.error(`Error processing item: ${item}. ${error.message}`);
19 }
20}- इस उदाहरण में, अमान्य डेटा को संसाधित करने, समस्याओं का पता लगाने और रिपोर्ट करने के लिए त्रुटि हैंडलिंग की जाती है।
असिंक्रोनस प्रोसेसिंग में ध्यान देने योग्य बिंदु
लूप में असिंक्रोनस प्रोसेसिंग को संभालते समय, async/await का उपयोग करने से संक्षिप्त और सहज कोड लिखा जा सकता है।
1const urls = ["https://example.com/1", "https://example.com/2"];
2
3// Proper handling of asynchronous operations
4async function fetchUrls() {
5 for (const url of urls) {
6 const response = await fetch(url);
7 const data = await response.json();
8 console.log(data);
9 }
10}
11
12fetchUrls();- यह कोड
urlsऐरे से URLs को असिंक्रोनस रूप से एक-एक करके प्राप्त करता है और परिणामों को JSON प्रारूप में संसाधित करता है।async/awaitका उपयोग असिंक्रोनस संचालन को सरल बनाता है, प्रत्येक URL के लिए डेटा को क्रमिक रूप से पुनः प्राप्त करता है और इसे कंसोल पर आउटपुट करता है।
असिंक्रोनस प्रोसेसिंग में for...of वक्तव्य और forEach() के बीच के अंतर को समझें।
1async function asyncTask(num) {
2 return new Promise(resolve => {
3 setTimeout(() => {
4 console.log(`Task ${num} done`);
5 resolve();
6 }, 100);
7 });
8}
9
10async function runWithForOf() {
11 console.log("Start for...of");
12 for (const num of [1, 2, 3]) {
13 await asyncTask(num);
14 }
15 console.log("End for...of");
16}
17
18async function runWithForEach() {
19 console.log("Start forEach");
20 [1, 2, 3].forEach(async num => {
21 await asyncTask(num);
22 });
23 console.log("End forEach");
24}
25
26async function executeExamples() {
27 await runWithForOf();
28 await runWithForEach();
29}
30
31executeExamples();-
लूप में असिंक्रोनस प्रोसेसिंग को संभालते समय, इस उदाहरण में दिखाए गए अनुसार,
async/awaitके साथfor...ofका उपयोग करने औरforEach()का उपयोग करने के बीच के व्यवहार के अंतर को नोट करें। -
for...ofके साथ, कोड क्रमवार निष्पादित होता है और अगले पुनरावृत्ति पर जारी रखने से पहले लूप के अंदरawaitपर रुकता है। दूसरी ओर,forEach()प्रोसेसिंग को समानांतर में निष्पादित करता है।
निष्कर्ष
जावास्क्रिप्ट में for स्टेटमेंट एक सरल लेकिन शक्तिशाली उपकरण है। यहां बताए गए सर्वोत्तम तरीकों का उपयोग करके, आप प्रभावी और अत्यधिक पठनीय कोड लिख सकते हैं। उपयुक्त लूप संरचनाओं, स्कोप प्रबंधन, त्रुटि प्रबंधन का चयन करने और अत्यधिक बनाए रखने योग्य कोड लिखने पर ध्यान दें।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।