जावास्क्रिप्ट शुरुआती लोगों की 5 घातक गलतियाँ (और उनसे कैसे बचें)

जावास्क्रिप्ट दिमाग क्यों खराब करता है, लेकिन करियर खराब नहीं करना चाहिए

जावास्क्रिप्ट एक साथ सबसे अनुकूल और सबसे धोखेबाज प्रोग्रामिंग भाषा है। एक तरफ, आप console.log('Hello') लिखते हैं - और ब्राउज़र में तुरंत परिणाम दिखाई देता है। दूसरी तरफ, यही कोड अचानक undefined, NaN या उससे भी बुरा कुछ दे सकता है, और आप एक घंटे तक उस गलती की तलाश करेंगे जो एक पंक्ति में छिपी है।

pythonlib.ru पर, हम जानते हैं कि दूसरों की गलतियों से सीखना कितना महत्वपूर्ण है। इस लेख में, हम जावास्क्रिप्ट में शुरुआती लोगों की 5 सामान्य गलतियों पर चर्चा करेंगे, जो कोड को कद्दू में बदल देती हैं। और सबसे महत्वपूर्ण बात - हम दिखाएंगे कि उन्हें कैसे ठीक किया जाए। चलिए शुरू करते हैं!

गलती #1: जादुई 'var' और स्कोप की समझ का अभाव

कई नौसिखिए डेवलपर्स, जो जावास्क्रिप्ट सीख रहे हैं, वेरिएबल घोषित करने के लिए var का उपयोग करते हैं। यह पुराने ES5 मानक की विरासत है, जो अभी भी दशकों पुरानी पाठ्यपुस्तकों में जीवित है। लेकिन var एयरबैग के बिना पुरानी कार की तरह है: आप चला सकते हैं, लेकिन पहली दुर्घटना (पढ़ें: बग) में आपको गंभीर चोट लगेगी।

समस्या क्या है?

var में फंक्शनल स्कोप होता है, ब्लॉक स्कोप नहीं। इसका मतलब है कि if या for के अंदर घोषित वेरिएबल उनके बाहर भी उपलब्ध होगा।

// उदाहरण: var के साथ गलती\nfunction testVar() {\n  if (true) {\n    var x = 10;\n  }\n  console.log(x); // 10 — काम करता है, हालांकि x if के अंदर घोषित किया गया था\n}\n\ntestVar();

अब कल्पना करें कि आपके प्रोजेक्ट में 1000 लाइनों का कोड है। आपने लूप में var i घोषित किया, और बाद में गलती से उसी वेरिएबल का उपयोग करते हैं - आपको एक ऐसा बग मिलता है जिसे ट्रैक करना असंभव है।

सही तरीका क्या है?

let और const का उपयोग करें। उनमें ब्लॉक स्कोप होता है और वे पूर्वानुमानित व्यवहार करते हैं।

// सही: let और const\nfunction testLet() {\n  if (true) {\n    let y = 20;\n    const z = 30;\n  }\n  console.log(y); // ReferenceError: y is not defined\n}\n\ntestLet();

सुझाव: डिफ़ॉल्ट रूप से हमेशा const का उपयोग करें। केवल अगर वेरिएबल को पुन: असाइन किया जाना है, तो let लें। var को अतीत में छोड़ दें, जैसे फ्लॉपी डिस्क।

गलती #2: भूला हुआ 'this' की — संदर्भ जो खो जाता है

जावास्क्रिप्ट में कीवर्ड this चॉकलेट एग में सरप्राइज की तरह है: आप कभी नहीं जानते कि क्या निकलेगा। नौसिखिए अक्सर सोचते हैं कि this हमेशा वर्तमान ऑब्जेक्ट को इंगित करता है। लेकिन ऐसा नहीं है। this इस पर निर्भर करता है कि फंक्शन को कैसे कॉल किया गया है, न कि इसे कहाँ घोषित किया गया है।

क्लासिक उदाहरण: कॉलबैक में संदर्भ का नुकसान

const user = {\n  name: 'अन्ना',\n  greet: function() {\n    console.log('नमस्ते, ' + this.name);\n  }\n};\n\nuser.greet(); // नमस्ते, अन्ना — काम करता है\n\nsetTimeout(user.greet, 1000); // नमस्ते, undefined — संदर्भ खो गया!

ऐसा क्यों? क्योंकि setTimeout फंक्शन को सामान्य फंक्शन के रूप में कॉल करता है, न कि ऑब्जेक्ट की विधि के रूप में। इस मामले में this ग्लोबल ऑब्जेक्ट (ब्राउज़र में window) को इंगित करता है, जिसके पास name नहीं है।

कैसे ठीक करें?

तीन तरीके:

\n
• एरो फंक्शन — यह अपना स्वयं का this नहीं बनाता, बल्कि इसे बाहरी संदर्भ से लेता है।
\n
• .bind() विधि — संदर्भ को स्थायी रूप से बांधता है।
\n
• this का संदर्भ संग्रहीत करना (पुराना तरीका, बेहतर है उपयोग न करें)।
\n

// सुधार: एरो फंक्शन\nconst user = {\n  name: 'अन्ना',\n  greet: function() {\n    console.log('नमस्ते, ' + this.name);\n  }\n};\n\nsetTimeout(() => user.greet(), 1000); // नमस्ते, अन्ना\n\n// या bind के साथ\nsetTimeout(user.greet.bind(user), 1000); // नमस्ते, अन्ना

गलती #3: एसिंक्रोनसिटी — "