Up next in 10
Modules in JavaScript _ JavaScript Tutorial in Hindi #97
276 views
Feb 10, 2024
In the 97th tutorial of our JavaScript series, presented in Hindi, embark on a journey into the world of modules and discover how they revolutionize code organization and reusability in JavaScript. Explore the concepts of importing and exporting modules, allowing you to create modular, maintainable, and scalable code structures. This session provides practical examples and step-by-step guidance in Hindi, ensuring a comprehensive understanding of how to harness the power of modules in JavaScript. Whether you're a web developer seeking to improve code organization or a JavaScript enthusiast eager to explore advanced concepts, this tutorial is your guide to mastering modules. Join the session, embrace modular coding, and elevate your JavaScript projects with enhanced structure and efficiency!
View Video Transcript
0:00
आज के इस वीडियो में मैं आप लोगों को modules का concept समझाऊंगा जावास्क्रिप्ट के अंदर कि modules क्या होते है��
0:04
हम लोग computer screen में चलेंगे और देखेंगे modules को किस तरह से import करना है क्या modules होते है��
0:09
let's go to the computer screen and let's get started कि कि लोगों ने पिछले वीडियो में मुझे सब पूछा था कि क्या हम नोट जिसको पूरा एक्सप्लोर करने वाल��
0:22
इस पोर्ट में तो अंसर है ना पर नोट जिसको इतना इस प्रोड करेंगे कि जितने भी जावा स्क्रिप्ट की शक्तिया��
0:27
पर नियुक्त करें तो यह जो मेरा फोल्डर आए जो कि अलग हुआ है यह खोल जाएगा और यह जो पैकेज इसके साथ प��
0:39
एक नई फाइल यहां पर बनाऊंगा 97 अंडरस्कूर और मैं आप लोगों को बताना चाहता हूं मॉड्यूस टॉट जेस अ��
0:47
96 अंडरस्कूर में इसको पैकेज कर देता हूं मैंने मॉड्यूस रख दिया इसका नाम मैं इसका नाम पैकेज रखूंग��
0:53
पैकेज एंड पीएम ठीक है तो इसका नाम मैंने चेंज कर दिया है क्योंकि यह पैकेज एंड पीएम है अब जो ह��
1:00
बात करेंगे वह मॉड्यूल्स की करेंगे मॉड्यूल्स क्या होते हैं जावास्क्रिप्ट के अंदर तो दो तरह के मॉड्यूल्��
1:05
script के अंदर एक तो common js है, common js का मतलब क्या है, जैसे मैं यहाँ पर दो files बनाता हूँ
1:10
module1.js, और एक बनाऊँगा, module2.js, ठीक है, module1.js के अंदर मैं एक function बनाऊँगा
1:19
जो कि एक बहुत कीमती function होगा, इतना कीमती function होगा कि करोडों रुपे में बिकेगा हमारा एक function
1:24
और यह क्या करेगा यह console.log hello harry अब यह करोडों में क्यों बिकेग��
1:30
क्योंकि यह मैंने लिखा है तो यहाँ पर हमने यह कर दिय��
1:34
और module 1 के अंदर हमने कुछ इस तरह से कर दिया अब मैं यहाँ पर लिख दूँगा module.exports
1:40
is equal to hello मैंने यह कर दिया अब ये function बहुत complicated हो सकता थ��
1:49
मैं चाहता तो 10 और functions बना के इस file में export कर सकता था उनका एक object
1:53
बना कर ठीक है तो ये सारे काम मैं कर सकता था अब मैं अगर इस function को किसी दूसर��
1:57
file में use करना चाहता हूँ तो कैसे करूँगा, और सबसे पहले यह आप लोग को बताता हूँ क��
2:01
ऐसा हम करना क्यों चाहेंगे, हम ऐसा इसलिए करना चाहेंगे क्योंकि मैं एक चीज़ पे काम कर रहा हूँ
2:07
आप किसी और चीज़ पे काम कर रहे हो, एक ही प्रोजेक्ट के लिए, अब एकी project के लिए एकी file में हम सब काम करेंग��
2:13
तो अच्छा नहीं रहेगा मैं चाहूँगा मैं अपना module बनाऊं टेस्ट करूँ उसके बाद send कर दूँ developer क��
2:18
और वो merge करेगा changes सारे जितने भी many modules लिखे हुए है��
2:23
उनको main project से merge करेगा जितने आपने लिखे हैं उसको main project से merge करेग��
2:28
ऐसे में 10-15 लोग एकी project पर साथ में काम कर पाएंगे और जादा से जादा produce कर पाएंग��
2:32
लेकिन ऐसा करने के लिए हमें modules का इस्तिमाल करना पड़ेगा और modules का इस्तिमाल करने के लि��
2:38
use common js modules module export file const hello is equal to require module1
2:54
लिखने की ज़रूरत नहीं है module1 लिखूँगा और अगर मैं यहाँ प��
2:58
console.log के अंदर क्या मेरा यह argument लेता है नहीं argument नहीं लेता है सिर्फ एक function ह��
3:04
तो इसको मैं कुछ इस तरह से कर दू मैं ऐसे कर दू अगर और इस file को मैं run करूं तो आप देख��
3:10
hello harry यहाँ पर आ गया मुझे console.log करने की भी जरूरत नहीं थी क्योंकि कुछ return
3:14
नहीं करता है function simply मैं इसको run करके hello है नहीं प्राप्त कर सकता हूँ इस file मे��
3:18
तो थी न कमाल की चीज मैंने एक अलग से module बनाया उसके अंदर का एक function है व��
3:22
use कर लिया अब मान लो कि एक advanced hello नाम से मै��
3:26
function जो है वो लिखना चाहता हूँ, ठीक है, आप लोगों को दिखाता हूँ मैं, मालो मैं a hello के नाम से, यानि कि advanced hello, जो की name लेकर बंदे का नाम भी पुकारता है, जिस भी नाम से आप बना लो, उपस, मैंने इसको गलती से capital में लिख दिया
3:43
usually हम full caps में तब लिखते हैं जब हम constants लिख रहे हैं but अभी यहाँ पर मैंने a hello के नाम से small a hello के नाम से बनाऊंगा function
3:50
एक function बनाया है मैं चाहता हूँ कि hello के साथ साथ मैं a hello को भी export करू��
3:55
और मैं आप लोगों यह भी बता दूँ remind करा दू कि मुझे इस तरह से बार बार लिखने की ज़रूरत नहीं ह��
4:01
hello, hello, a hello, a hello नहीं, ये और ये same ह��
4:07
मैं यहाँ पर लिख देता हूँ इसको same as below line मैं ये कर सकता हू��
4:13
ये करने की बचाएं, directly ये कर सकता हूँ hello key होगी, hello function value होग��
4:18
a hello key होगी, a hello function value होगा ठीक है, बढ़िया यार, अब मैं a hello भी call कर सकता हूँ, लेकिन अब मुझे क्या करना पड़ेगा
4:25
destructuring इस्तेमाल करनी पड़ेगी, या फिर मैं इस तरह से call करूँगा, hello.hello, ठीक है, या फिर hello.ahello
4:33
और मान लो मैं शिवानी को करना चाहता हूँ hello ठीक ह��
4:39
hello शिवानी और इसके बाद मैं गरीमा को करना चाहता हूँ ठीक है hello
4:45
और मैं किस को करना चाहता हूँ comment में बताए मैं करना चाहता हू��
4:50
नीतिका को करना चाहता हूँ ठीक है और किस को करना चाहता हूँ मै��
4:57
मैं एश्वर्या को करना चाहता हूँ और मुझे comment में बताएं किस को मैं करना चाहता हू��
5:02
यह सब को मैं hello कर सकता हूँ क्योंकि मैंने लिखा यह function तो मेरा यह अधिकार है कि मैं कर सकता हूँ यह का��
5:07
अब सुनना एक बात मैं कितना परिशान कर रहा हूँ शिवानी गरीमनीति का और एश्वर्या क��
5:12
मैं कह रहा हूँ hello.ahello इतना बड़ा code अगर मैं 50 लोगों को hello करू��
5:18
तो यार दिक्कत पता है क्या आएगी hello a hello function directly use hello javascript destructuring hello a hello
5:33
ठीक है, और अब मुझे hello. लिखने की जरूरत नहीं है, अगर hello dot लिखूंगा तो दिक्कत होगी ठीक ह��
5:39
तो hello a hello मैंने निकाल लिया इसमें से इस object में से बाहर निकाल लिय��
5:43
destructuring का इस्तेमाल करके at the end यह एक object ही तो है यह जो पूरा है require module 1 यह एक object ह��
5:48
इसमें से मैंने hello और a hello की बाहर निकाल लिया restructuring करके और अब मैं directly
5:52
इन functions को run कर सकता हूँ और ये बिलकुल ऐसे ही चलेंगे ठीक है तो ये होता है हमार��
5:56
common js modules ठीक है अब common js modules हमारे को इस तरह स��
6:00
काम करते हैं आपने देख लिया आप use कर सकते हो आप एक से जादा भी export
6:04
कर सकते हो कुछ इस तरह से ठीक है तो यह सारी चीज़ें आप लोग कर लेना ठीक है अब मैं आपको एक और तरह क��
6:09
मॉडल से मिलवाना चाहता हूं जिन्हें कहते हैं यह सिक्स मॉडल्स ठीक है और मैं यहां पर लिख देता हूं य��
6:15
modules. Now ES6 modules को मुझे export करने के लिए मानों वैसे same चीज को ES6 से करना चाहता हूँ. मैं copy करूँग��
6:23
इन functions को यहाँ पर लिखूँगा. और मैं इसको यहाँ पर common js लिख देता हूँ. ठीक है और इसको like को comment out
6:31
कर देता हूँ. अब मैं module one नहीं module two में से से import करूंगा और मैं एक दूसरे तरह के modules के बारे में आपको बता रहा हूं जो है ES6 modules
6:39
अब इसको export करने के लिए मैं यहाँ पर लिख दूँगा export const hello और मैं यहाँ पर लिख दूँग��
6:44
export const a hello और इसको import करने के लिए मैं simply क्या करूँगा मैं module 1 को बंद कर देता हू��
6:49
क्योंकि मैं अभी module 1 के साथ काम नहीं कर रहा हूँ मैं लिखूँगा import
6:53
और मैं लिखूँगा hello ठीक है from module 2 ठीक है कुछ इस तरह स��
7:01
और उसी के साथ साथ मैं import करना चाहूँगा a hello from module 2
7:07
यह मुझसे यहाँ पर यह कह रहा है कि आपका module ह��
7:11
नहीं use कर सकते, आप इस तरह से जो आपका package है, जो आपका project ह��
7:16
उसमें type जो है, वो module नहीं है तो आपको अपने project में type is equal to
7:20
module करना पड़ेगा, और अब आप लोग 97th file को चलाओगे, actually
7:24
मुझे यहाँ पर dot slash भी लिखना पड़ेगा, जो कि अगर मैंने dot slash नहीं लिखा तो ये इसको नहीं मिल पाएगा ठीक है अब मैं यहाँ पर लिखूंगा dot slash module 2 dot js ठीक है और अब इसको run करूँगा तो आप देखो सीम चीज मुझे यहाँ पर मिल गई ठीक है तो मैंने module 2 में क्या किया था इसको export const करके export कर दिया था और मुझे यहाँ ��
7:56
जो की सिर्फ hello harry करें, क्योंकि ये मेरा code है, मेरा code सिर्फ मुझे hello करेगा
8:03
ठीक है, मैं को जिस तरह से लिख रहा हूँ, export default harry
8:17
और मैं यहां पर हैरी को कॉल कर सकता हूं ऐसे ही मैं अब इसको डिस्ट्रक्चरिंग से नहीं निका��
8:22
हूंगा यह ऐसा नोब्जेक्ट नहीं एक्सपोर्ट होगा यह डायरेक्टली एज हैरी एक्सपोर्ट होगा यहां पर ठीक ह��
8:27
तो मैं आपको यहां पर दिखाता हूं इसको मैं जैसे ही रन करूंगा यह रहा है है डिफाइंड एक्सपोर्ट डिफॉल्��
8:33
हैरी इस एक्वल टो मैं इसको डिफाक्टर करूंगा मैं आप लिखोंगा कॉन्स है रीडिफॉल्ड एक एरो फंक्शन और एक्सपोर्��
8:41
default Harry ठीक है यह करने के बाद जब मैं इसको रन करूंगा तो चल जाएगा आप जैसे कि देख सकते है��
8:47
तो हेलो है यहां पर आ गया ठीक है तो इस तरह से आप दो तरह के मॉडल्यूस कर सकते हैं एक common
8:52
और एक आपका ES6 module है common js में आप लोग कुछ इस तरह की syntax का इस्तेमाल कर सकते हो और एक से ज्याद��
8:58
function को export const export const करके export कर सकते हो और यहाँ पर आप लोग by default भी एक function या ए��
9:05
variable export कर सकते हो जिसको आपको directly यहाँ पर देखने को मिलेगा जो कि आपको ठीक है तो ऐसे ये बहु��
9:12
बहुत common error है react वो कर रहा है अगर आप लोग यूज़ कर रहा है तो बहुत सारे लोग यह लगाना भूल जाते है��
9:16
brackets और directly import करते हैं उन्हें error मिलते हैं ठीक है तो यह था modules के बारे में I hope कि आ��
9:21
आप लोग को यह चीज समझ में आई अब मैं चीज यहां पर करूंगा यही कोड जो है मैं रपलेट में कॉपी कर द��
9:26
मैं जस्ट आप लोग को यह चीज बताना चाहता था क्लियरली तो मैं रपलेट में इस चीज को कॉपी कर देता हू��
9:31
97th यह वीडियो है हमारा और मैंने इसको विश्व कोड से इसलिए किया कि मैं आपको एक्शन में एक अक्शन कंप्यूट��
9:37
में करके दिखाना चाहता था वरना मैं खुद रब्लिट यूज करता हूं मोस्ट ऑफ टाइम और काफी बढ़िया या ठीक है त��
9:44
नुट जीएस यहां पर 97 अंडरस्कोर मैं इसका नाम रखता हूं जेस अंडरस्कोर मॉड्यूल्स ठीक है क्रिएट रैप��
9:56
एंड क्रिएट रैपल करने के बाद मैं कुछ इस तरह से यह सारी फाइल यहां पर डाल दूंगा ठीक है और मैं इस फाइ��
10:04
शायद अपलोड भी कर सकता हूं रैपलेट में क्या मैं कर सकता हूं 97 मॉडियल वन मॉडियल टू क्या मैं ऐसे कर सकता हू��
10:14
आज ऑफ यार ऑफ ऑफ यार मजा ही आ गया तो मैं आपको शेल में जाकर इसको इस तरह से भी रन कर सकता हूं नोट 97
10:22
टो यह आप लोगों मिल गया है भी और यहां पर आप लोग जावास्क्रिप्ट की प्लेलिस्ट अगर एक्सेस नहीं करिए आ��
10:29
इसको जरूर access करना अभी के लिए इस वीडियो में इतने है गाइस thank you so much guys for watching this video
10:34
and I will see you next time