Up next in 10
Event Loop in JavaScript _ JavaScript Tutorial in Hindi #100
14 views
Feb 10, 2024
In the monumental 100th tutorial of our JavaScript series, presented in Hindi, unravel the inner workings of the Event Loop and demystify the magic behind asynchronous JavaScript. Explore how the Event Loop facilitates non-blocking operations, ensuring smooth execution and responsiveness in your code. This session provides practical examples and step-by-step guidance in Hindi, offering a comprehensive understanding of how the Event Loop manages the execution stack, callback queue, and more. Whether you're a web developer seeking to optimize asynchronous operations or a JavaScript enthusiast eager to comprehend the core of event-driven programming, this tutorial is your guide to mastering the Event Loop. Join the session, dive into the heart of asynchronous JavaScript, and celebrate the centennial tutorial with a deeper understanding of the language's intricacies!
View Video Transcript
0:00
आज हम लोग बात करेंगे event loop की एक बहुत ही important concept है javascript के अंद�
0:03
और हम सभी को सारे javascript developers को यह आना चाहिए कि कैसे काम करता है javascript का event loop
0:09
और क्या purpose होता है उसका चलते हैं computer screen में event loop की बात करेंग�
0:13
let's get started तो गैस आज के इस वीडियो में हम लोग देखेंगे कि इवेंट लूप किस चड़िया का नाम है और इवेंट लूप क्यों आप लोगों को जो है वो सीखना चाहि�
0:27
तो जो event loop है वो java script under the hood कैसे काम करती है उसका एक part है और vast language जो की java script है उसका एक छोटा सा हिस्सा event loop है और क्यों मैंने सिर्फ event loop को पड़के आपको समझाना सही समझा उसका reason आप लोगों को बताता हूँ देखो event loop अगर आप लोग समझते हो ना सही से तो आप लोग java script को सम�
0:57
लेकिन इस वीडियो में इतना जाधा आसान मना दो ना चीजों को मैं कि आप लोग भी कहोगे कि यार हैरी भाई मज़ा ही आ गया तो हम लोग पहले देखेंगे जावास्क्रिप्ट क्या है अब आपको भी यार पता है क्या है नहीं मैं एक अलग definition की बात कर रहा हूँ क्या ज�
1:27
हम सब जानते हैं जावास्क्रिप्ट क्या है ठीक है लेकिन जावास्क्रिप्ट एक single threaded non-blocking asynchronous concurrent language है ठीक है single threaded का क्या मतलब है कि जावास्क्रिप्ट as a language सिर्फ one thing at a time कर सकती है लेकिन आप लोगों को यार कई चीज़े मैंने parallelly होते हुए देखे हैं जावास्क्रिप्ट मैं स�
1:57
पूर्ण रूप से एग्जिक्यूट हो जाए जैसे कि जवास्क्रिप्ट में आपने देखा होगा कि सेट टाइम होट अपने रन कर दिया त�
2:01
इसकी नीचे वाली चीज भी रन हो जाती है क्योंकि वह नॉन ब्लॉकिंग है ठीक है एस सिंक्रोनिस क्या मतलब होता है क�
2:07
एक साथ बहुत सारी चीजें हो सकती हैं, ठीक है, it has a call stack, एक call stack होता है
2:10
event loop होता है, callback queue होता है, और कुछ APIs होती हैं, जैसे क�
2:14
set timeout की अगर हम लोग बात करें, तो वो एक web API होती है
2:18
और fetch की अगर हम लोग एक बात करें, तो वो एक API होती है
2:22
अब V8 जावास्क्रिप्ट का रंटाइम होता है जो की Chrome ब्राउजर में यूज़ होता ह�
2:26
जो की Chrome ब्राउजर को पाउर करता है और इसमें एक call stack होती है एक heap होती है लेकिन अगर मैं आप लोगों को ए�
2:31
बढ़िया सा fact बताऊं वो यह है की DOM, SETTIME, OTT, XM, HTTP, V8 क�
2:52
होता है वह एक्सेक्शन कोंटेक्स पोल्ट करता है यानि कि एक फंक्शन अगर वह रहा है जैसे ही वह एक्सेक्वे�
2:57
जाएगा उसके अंदर के सारे वेरिबल्स वह सब डिस्ट्रॉय हो जाएगे ठीक है तो यह वर्ड जावास्क्रिप्ट हो ग�
3:02
call stack function greeting say hi greeting invoke greeting call stack greeting say hi call say hi call stack greeting say hi
6:33
जहां एक एक करके वो execute होती जाएंगी जब हम कहते हैं setTimeout func1 0
6:37
अब यहाँ पर यह एक special case है setTimeout का मैंने आपको setTimeout अगर हम किसी time के सा�
6:41
run करते हैं तो बता दिया 0 के साथ run करते हैं तब क्या होता है यह बता रहा हूँ 0 के साथ जब भी हमने setTimeout को run किय�
6:47
तो क्या होगा ये हम defer कर सकते हैं एक function को until
6:51
जितने भी अभी तक के task हैं वो complete ना हो गए हो ठीक है अब आपको सम�
6:55
में अगर नहीं आ रहा है तो मैं अभी demo दिखाऊँगा आप tension मत लेना ठीक है सब चीज़�
6:58
समझ में आएंगी और ये slide भी मैं आप लोगों को दे दूँगा जब तक सारी के सारी चीजें फिनिश नहीं हो गई है तब तक जो ह�
7:05
डेफर कर दिया जाए उस चीज को तब तक उसका उसको टाल दिया जाए ठीक ह�
7:09
अब यह एक वेबसाइट है जो कि मैंने आप लोगों को स्लाइड में भी प्रोवाइड कर रखा ह�
7:13
लिंक यह आपको event loop बहुत अच्छी तरह से समझाता है तो अभी हम यहाँ क्या करेंगे code example देखेंगे तो यहाँ पर देखो आप लोग की code लिखा हुआ है जिसमें क्या हो रहा है कि एक button पर अगर click किया जाएगा तो एक set timeout को fire किया जा रहा है और you click the button को console पर log किया जा रहा �
7:43
अगर मैं आप लोगों से पूछूंगी इस प्रोग्राम का output क्या होगा, तो सबसे पहले तो क्या होगा
7:46
कि जैसे ही किसी ने button पर click किया, तब क्या होगा, कि ये set timeout जो है
7:51
वो चल पड़ेगा, ठीक है, लेकिन क्योंकि किसी ने किया नहीं है, भी मतलब योजर होगा वो adset होने ना click कर पाएगा इससे पहले तो य�
7:58
javascript चल पड़ेगी उससे पहले जिससे पहले कि user click करेगा किसी button पर तो सबसे पहले आप लोगो console.log high देखने को मिलेगा फिर उसक�
8:05
बाद ये वाला जो set timeout है वो execute होगा और जैसे ही set timeout
8:10
दिखेगा call stack के अंदर यह web API पर चला जाएगा यहाँ नहीं कि इसमें दो functions है एक तो set timeout अपने आपने एक function है और set timeout को जो दिया जा रहा है एक function वो है जो कि run करना है 5 second के बाद ठीक है तो जो set timeout का execution है वो कुछ इस प्रकार से होता है कि इसके अंदर का जो function है और timer है वो �
8:40
पालता रहेगा ठीक है तो सबसे पहले तो यहां पर हमें हाई देखने को मिलेगा फिर इसके बाद यह एक्सेक्यू�
8:45
तुरंत हो जाएगा और 5 सेकंड के लिए वेट करेगा यहां पर वेब एपिआई जो है उसको पांच सेकंड के बाद यहा�
8:50
पूछ करेंगी लेकिन उससे पहले यह पूछ जाएगा हमारा वेलकम टू लॉप कॉल स्टैक में तो में वेलकम टू लॉ�
8:55
देखने को मिलेगा फिर 5 सेकंड के बाद हम लोग को यहां पर क्लिक द बटन जो है यह देखने को मिलेगा क्योंक�
9:02
की पांच सेकंड के बाद इस function को run करना है तो मैं यहाँ पर save and run करूँगा तो देखो सबसे पहले यह गया call stack में फिर यह गया call stack में फिर यह देखो आप लोग कुछ इस तरह से यह time
9:11
out जैसी हो जाएगा पांच सेकंड यह यह callback queue में आएगा and finally event loop इसको यहाँ push कर देग�
9:32
event loop rocket science simple code execute call stack
9:45
डालता चला जाता है, जैसी चेट टाइमो टाइप की कोई चीज मिलती है यहाँ Fetch API मिलती है जो की Network को जो है Network से कोई डेटा लेगी वो भी Web API है तो वो भी Web API जो है उसको Network से जब तक डेटा नहीं आ रहा है तब तक वेट करती रहती है Web API और Callback Queue में डाल देगी Function जो भी चलाना है उसको ठीक है �
10:16
आप लोगों समझ में आ गया तो मुझे नीचे कॉमेंट में जरूर बताना यह जो कोड है अगर आप लोग को इसको चलाक�
10:21
यहां पर देखना है तो सेम आउटपुट आएगा नोट जीएस के अंदर भी अब देखो यहां पर डॉलर इस नोट डिफाइन मुझ�
10:26
दाए जा रहा है क्योंकि आप यह को रिए तो मैं काम करता हूं डॉक्यूमेंट और गैट एलेमेंट बाय आईडी बट�
10:35
सॉर्ड डॉक्यूमेंट डॉट आड एवेंट लिस्नर और यहां पर मैं ए ट्लिक क्लिक को लूंगा और मैं इन फैक्ट इसक�
10:48
करूंगा button dot add event listener click in fact ये क्योंकि मैंने node.js project बना रखा है तो मै�
10:54
simply इसको यहाँ करूँगा ना कि directly इसको execute कर देता हूँ यार ठीक है ताकि मुझे error ना देखने को मिल�
11:01
तो सबसे पहले तो यहाँ पर 2 second के बाद एक function को run किया जाएगा फिर ये 5 second के लिए differ हो जाएग�
11:08
तो हमें hi और welcome to loop सबसे पहले देखने को मिल रहा है क्योंकि ये और ये तो run हो जाएंग�
11:12
ये और ये web API से तेलते हुआ आएंगे फिर run होंगे ठीक है समझ गए आप लो�
11:16
ये दोनों जो functions हैं ये पहले यहाँ जाएंगे वेट करेंगे अपने अपने timer के लि�
11:20
फिर callback queue में queue होंगे, फिर event loop इनको call stack में push करेगा, and then finally execute होंगे
11:25
ठीक है, I hope कि आप लोग को इस चीज समझ में आ गई, अगर आपने javascript की जो playlist है
11:29
वो execute नहीं करी है, execute नहीं यार, आपने javascript की playlist अगर access नहीं करी है
11:35
execute execute दिमाग में चल रहा था, तो जरूर execute करना JavaScript की playlist क�
11:40
और execute करना अपने दिमाग में सीखना सब कुछ और सारे के सारी exercises
11:44
और projects जो कि आने वाले हैं उनको भी बनाना अगर आपने अभी तक इस course को review नहीं किय�
11:49
तो एक बड़ी request है मेरी पहले वीडियो पर जागर आप एक review comment अपना लिखती चाहि�
11:53
ये मेरी एक request रहीगी आप लोगों से क्योंकि आप ऐसे लोग हैं जो की नीचे के वीडियो देख रहे है�
11:57
उपर से देखते हुए आ रहे हैं तो आप से अच्छा है इस course को कोई review नहीं कर सकता मैं चाहता हूँ नए students की help करें आप लोग review करक�
12:03
ये बता कर की notes कैसे है ये course कैसा है कितना समझ में आय�
12:07
सब कुछ आप बताईए मैं कुछ भी आपसे ही नहीं कहा रहा हूँ कि आप अच्छा ही देना review मैं बिलकुल ऐसा नहीं कहा रहा हू�
12:13
मैं तो कह रहा हूँ बस आप review कर दो यार इसको दूसरों के लिए लिख दो first video मे�
12:17
कि कैसा course है ये क्योंकि बहुत सारे लोगों को ये जानना होता ह�
12:20
कि यार क्या ये अच्छे से समझाएंगे क्या ये notes हैं वो अच्छे होंग�
12:24
क्या ये complete होगा क्या इसमें exercise, practice set करते है�
#Flash-Based Entertainment