हाँ जी, स्वागत है आप सभी का चाय और कोड में लेकिये गर्मी तो जैपूर के अंदर हो रही है बहुती गजब अब बहुती गजब गर्मी के अंदर टुटोरियल्स तो आने ज़रूरी है क्योंकि obvious ही बात है quality top notch ही deliver करनी थी 4K में ही करनी थी तो पहले सोचा कि कुछ digital board लगाया जाया या कुछ इस तरह से लगाया जाया, फिर लगा कि नहीं, quality iPad पे भी अच्छी आ जाती है, तो वहाँ से हम इसको शुरू करते हैं. ये जो वीडियो है, आपके लिए interviews के लिए बहुत जादा interesting और important रहने वाला है. interviews के अंदर अगर आपको ये चीज basically foundation आपका अगर clear है हमने काफी अभी foundation और भी clear कर लिये है ये वाला foundation अगर आपको और clear हो जाएगा तो आप आदिस आदा interview यही पे crack कर लोगे और आपको इतना कुछ आता है जावास्क्रिप्ट के बारे में यही तो खास बात है तबी तो आपने already subscribe कर रखा है चैनल को तो इस वीडियो के अंदर हम जानेंगे जावास्क्रिप्ट के अंदर code execute कैसे होता है क्योंकि जिसको भी JavaScript के अंदर ये पता है कि code कैसे execute होगा जो call stacks होते हैं वो किस तरह से execute होते हैं उसके बाद तो if, else, condition, loops, functions तो अभी जो है एक first हमारे topic का नाम है execution context कि किस तरह से ये जो पूरा code है इसको execute किया जाता है, दो parts में divide किया जाता है इसको, और एक होता है calls, या नहीं कि call stack, कि आपके पास एक memory है, उस memory के अंदर कैसे functions जाएंगे, कैसे execute होंगे और कैसे उससे बहार आएंगे आपको सिखाऊंगा browser के अंदर कैसे आप अपनी javascript files को add कर सकते हैं वहीं पे visualize करके देख सकते हैं कि कैसे call stack वखरा use हो रहा है तो आपको कोई खास diagrams वगरा की वहाँ जरूत नहीं होगी, क्योंकि execute होते हुए आखों के सामने देखेंगे सब कुछ, तो वहीं से हमारा काम हो जाएगा सारा, तो बहुत ही आसान है, बहुत ही basics है, बने रहे हैं मेरे साथ, code तैयार है तो चलिए ये है मेरा iPad इस पे हबी हम एक code अभी लेके आएंगे तो हमारे पास JavaScript के अंदर एक topic होता है बड़ा ही interesting है ये बनाए रखेगा तो JavaScript के अंदर एक एक टॉपिक होता है जिसको बोल जाता है JavaScript Execution Context अब ये क्या चीज है सर ये क्या नया word ले आए आप देखें JavaScript के अंदर क्या होता है कि Execution Context का मतलब है ये है कि आपने जो भी file बनाई है उसको JavaScript run कैसे करेगी, execute कैसे करेगी अब run करने के लिए JavaScript क्या करती है आपके programs को दो phase में run करती है बहुत ही आसान है, बहुत ही basics है बस एक चीज ध्यान रखेगा कि जब भी आप JavaScript को कोई भी code देते हैं, तो suppose करिए यह हमारा code है, इसके अंदर हमारी code files हैं, यह हमने JavaScript को दिये, तो सबसे पहले जो चीज बनती है इसमें, तो यहाँ पे होता है first हमारा global execution context तो global execution context तो बनता ही बनता है और जहां पे भी global execution context बनेगा वो उसको refer कर दिया जाता है एक variable हमने छोटा सा discuss किया था this तो इस this variable के अंदर उस global execution context को रख दिया जाता है, अब यहाँ पे interview questions किस तरह से आते हैं, कि suppose करिया आपने browser में, अगर run किया है तो browser का जो global execution context हो थोड़ा सा अलग होता है, node.js environment का थोड़ा सा अलग होता है, bun, dino इस तरह के जो भी environment है, सबका execution context अलग होता है तो browser का ज़ादा तर important होता है तो उसके अंदर this की value window object आती है क्योंकि आपने server side पे render कर दिया होता है, और वहाँ पे आपके पास इस window object का तो access है ही नहीं, तो इस तरह की चीज़े आती है, तो बस इतना सा ध्यान रखेगा, कि global execution context तो होगा ही होगा, उसके अंदर value है या नहीं है इसकी, वो अलग बात है, बट इतना होगा तो मैं अब आपको एक basic दिखाता हूँ यहाँ पे कि किस तरह के होते हैं, पहले हम इन execution context के बारे में जान लेते हैं, क्योंकि कई बार interview में पूछा भी जाता है, तो सबसे पहले तो आप धियान र� या तो इसको बोल दीजिया function execution context या functional execution context आपका जो मन करें वो बोलिये आप तो ये हो गया हमारा function execution context अब usually तो आपको सिर्फ इतना ही पता होना चाहिए कि हमारे पास global execution context है और एक functional execution context है बट कुछ documentation आप पढेंगे आगे जाके ज जो की है eval, अभी जो eval execution context है, इसके बारे में अभी हमें जादा देखने की जरूत नहीं है, क्योंकि यह अपने आप में एक property होता है, global object की, तो एक तरह से global ही होता है, तो usually अगर आपको interview के लिए देखना है, तो ठीक है, है तो यह हुआ हमारे पास वापस से वही हमारा बॉक्स जिसके अंदर एक आपका जावास्क्रिप्ट का कोड रखा है अब इसको होता है दो phases में actually कौन-कौन सी है first जो है हमारे पास वो है memory creation phase या फिर memory phase भी बोलते हैं तो ये हो गया आपका first memory creation phase इसको कई बार लोग बार क्या बोलते थे सिर्फ creation phase भी बोल देते हैं कई बार लोग इसको सिर्फ और सिर्फ creation phase भी बोल लेते हैं कोई भी गलत बात नहीं है उसमें एकदम सही बात है creation phase भी आप इसको बोल सकते हैं अच्छा ये दोनों काम कैसे करते हैं तो ये तो हो गया आपका memory creation phase, execution phase, अच्छा दोनों में difference क्या होता है memory creation phase में सिर्फ आपके variables या जो भी आपने declare करा है उनके लिए जग ए लोकेट होती है उनको एक्जिक्यूट नहीं किया जाता है जो भी आपने लिखे मैथमेटिकल फंक्शन लस माइनर्स मल्टिप्ला वो सब कुछ भी नहीं होता है वो सारा काम एक्जिक्यूशन फेस के अंदर होता है सिर्फ मेमरी एलोकेशन फे तो मैंने एक code file आपके लिए रख रखी है अभी already, इसको मैं यहाँ पे import करके लेके आता हूँ, तो ये रही हमारे पास code file, अब देखें इस code file के अंदर इतना कुछ खास आपको पता लगेगा कि कुछ अतरंगी code तो हमने लिखा नहीं है, कुछ जादा कतरना टोटल के अंदर आपने क्या करा, उन दोनों का sum कर दिया है, ठीक है जी, और बाद में return आपने कर दिया है टोटल को, ठीक है, यहाँ पे आपने लिया है result1, जिसके अंदर आपने addNum function call कर दिया है, value1, value2, तो value1 और value2 कहां से आएगी, यह value1 आजाएगी, तो मतलब आपको जावास्क्रिप्ट अच्छे से आता है, इसके बाद loop function, values, if-else, ये सब बहुत ही आसान खेलें, आप आराम से खेल पाएंगे, अच्छा तो इसके steps लिखते हैं, तो हमारा step 1 क्या होगा, जैसा कि मैंने आपको बता ये तो होना ही होना है, कुछ भी करो, ये basic होगा ही होगा, तो ये तो हो गया हमारा basic global execution context, ये बन गया, अच्छा phase 2, अब याद है, मैंने बताया था memory creation phase, MCP भी बोलते हैं इसको, या फिर CP भी बोलते हैं, ये competitive programming वाला नहीं है, creation phase, मैं य और उन सब को बस रखा जाता है अपने पास में, ठीक है, तो हमने memory phase के अंदर सबसे पहले क्या होगा, आपके पास आएगा, suppose करिए यह आया आपके पास, यह आया val1, अब val1 के अंदर जाएगा क्या, हाँ जी, undefined, हाँ जी, स� तो यह रखा हमने undefined, अब line number 3 के अंदर क्या आया, देखे इस line का काम हो गया, अब line number 3 पे क्या है, आपके पास add number आया, अब add number के अंदर आपने कोई value तो assign की नहीं है, तो add number भी इसी तरह से यहाँ प तो उसके अंदर जाती है function की definition, तो ये जितनी भी हमारे पास ये जो function है, ये definition एक तरह से आप य ठीक है, बहुत ही आसान था, अच्छा, तो हमारे पास line number गौर से देखिए, 6 तक का तो सारा काम हो गया है, memory creation phase में, अच्छा, अब क्या होगा, next हम जाएंगे हाँ पे, तो line number 7 पे जैसे यहाँ है, तो line number 7 पे इसने क उसके बाद result 2 भी जाएगा, यह गया हमारे पास result 2 के अंदर undefined, ठीक है, तो यह memory creation phase आपका हो गया है, इसको बोलते है first cycle, यह first cycle होगा ही होगा हमेशा, अच्छा, अब cycle 2 क्या होता है, execution phase, तो आते हैं हमारे third phase के अंदर, यहाँ execution phase के अंदर सबसे पहले आपको लिया जाएगा val1 और उसके अंदर value कौन सी जाएगी अवशिबात है 10 जाएगी इसी तरह से आपके पास val2 आएगा उसके अंदर value क्या जाएगी अवशिबात है 5 जाएगी यह हमने 5 value add कर दिया है add number के अंदर तो कुछ भी नहीं होगा तो इतने से इतना line number 3 से लेके 6 तक इसका कोई काम ही नहीं है क्योंकि उसकी definition आपने already hold करके रख दिये और कुछ execute करना ही नहीं था, execution phase में है तो execution phase में कुछ काम नहीं हो रहा है, अच्छा अब आते हैं हम हमारे interesting काम के उपर, यहाँ पे line number 7 के अंदर, अब result 1 के अंदर क्या जाना है, result 1 के अंदर तो जाना था add number, but add number तो function है, तो जैसे ही आप यहाँ पे ब general idea के लिए मान लीजे, कि एक और आपके पास, एक और executional context आपके लिए तयार होता है, अब यहाँ पे जो सबसे interesting बात है, तो वो क्या है, कि आपके पास सबसे पहले तो यहाँ पे बनेगा new हाँ जी तो आपके लिए बनेगा एक new variable environment और एक execution thread जितनी बार भी ये functions execute होते हैं उतनी बार आपके लिए एक नया box create होता है जिसको बोलते है new executional context और इस context के अंदर क्या होता है variable का एक अलग से environment का पूरा sandbox आपके लिए बनाया जाता है और एक execution thread भी आपके लिए बनाया जाता है जिससे आपके सारे जितने भी काम है जितना भी execution है वो सब होना है लेकिन अब interesting बात क्या है क्योंकि आपके लिए एक new पूरा sandbox यहाँ पे तैयार हो गया है तो उस box के होने से क्या हुआ कि वापिस से काम थे memory creation phase और execution phase वो किसके लिए execute होगा अब, add number के लिए, हाँ जी उतनी बार, जितनी बार आप function लिखते हैं, उतनी बार, क्योंकि global तो एक बार define होता है, वो तो हो गया है, अब जितनी बार भी आपके बास function आएगा, वापिस से आपको एक sandbox बनाना है, उसके अंदर ठीक है, इसने बोला कि यह val1 और val2 है, ठीक है, हम यहाँ पर ले लेते हैं, यह हमने लिया val1, और val1 के अंदर क्या जाएगा, undefined, obvious ही बात है, और इसी तरह से आपने लिया val2, और इसके अंदर भी क्या जाएगा, undefined, अच्छा, यहाँ पर एक बह अब यहां से आप देखेंगे तो mistake नहीं करेंगे, क्योंकि अगर आपने सिर्फ यहीं से देखा होता तो val1 और val2 लिखके आप छोड़ देते, बट क्योंकि आपने उपर से देखा है, तो इसके अंदर क्या है, हमारे पास एक total processing होती है या फिर execution होता है जो भी आपके mathematical variables है जो भी data manipulate करना है वो सारा काम execute होता है तो execution के दौरान सबसे पहले क्या होगा pen change कर लेते हैं हम तो सबसे पहले आपका जो ये num1 होगा इसके अंदर value allocate होगी कौन सी value allocate होगी और वैसी बात है यह जो val1 है यही तो num1 है और यह जो val1 है और इसी तरह से हमारे पास नम 2 है उसके अंदर value जाए� अब उसके बाद total के अंदर value क्या जाएगी, यहाँ पे आपका calculation भी होगा, तो total के अंदर obvious ही बात है, दोनों add होके जा रही है, तो हमें पता है, 15, खाफी complex mathematics थी, हमने कर ली पर यहाँ पे, तो यह total हमारे पास चला गया, अब total के बाद, यह जो total है actually में return कोई function execute हो रहा है, वो return कर रहा है कुछ value, तो obvious ही बात है, global executional context में return करेगा, तो ये जो हमारे पास, ये जो total value है, इसको हम actually में return कर देते हैं, हमारे global executional context में, अब देखिए return ये इतना दूर, यहाँ पे आके नहीं होता है, but just for exercise मैं आपको अच्छे से समझा सकूँ actually में return हो जाएगा हमारे global executional context में, ठीक है जी, इतना काम आपके पास वापस से add number आया यहाँ पे तो आपके पास अब result के अंदर चला गया execution face के अंदर तो आपने जो add number वगरा करने थे अब हम कर सकते हैं तो अब हम क्या करेंगे next जाएंगे line number 8 के उपर अच्छा यहाँ पे एक interesting चीज तो मैं आपको बताना भूली गया यहाँ तो अब जब delete हो गई ये value, तो हम कहाँ पे आ गए हैं, तो वापिस से आ जाते हैं हम यहाँ पे, यहीं पे तो हम सारा काम कर रहे थे, तो हमारे पास ये result 1 है, इसके अंदर अब value आ गई हमारे पास 15, तो ठीक है, क्योंकि execution phase है, बस इस बार क्या करेंगे, हम थोड़ा सा यहाँ पर आ जाते हैं, और pen ले लेते हैं वापिस से हमारा, तो एक और क्या होगा, एक और हमारे पास same वोई box आया, इस box के हमारे पास वापिस से अंदर new variable environment, short में लिख देता ह� तो पहला phase होगा वापिस से हमारा memory phase, बाकि सब तो repetition ही है, तो यह हो गया हमारा memory phase, और यहाँ पे हो जाएगा हमार execution context, या फिर execution phase बोल लीजिए, बोलने में आप जो चाहे बोलिए, तो जितनी कहानी हमने यहां पड़ी थी कि val1, val2 total undefined में जाएंगे उसके बाद execution context में values change होगी, but actually में सारा वो ही होगा वापिस से, यह जो total हमने लिखा था, यह total यहाँ पे भी आएगा, और यह जो आप लिखेंगे total, यही total जाके वापिस से global execution context में जाएगा, तो इस तरह से होता है पूरा का पूरा repetition, ठीक है तो I think यह जो छोटा सा code example हमने लिया इससे आपको समझ में आ गया होगा कि यह execution phase, execution context और यह सब कैसे होता है तो यह तो रहा हमारा थोड़ा सा basic कि किस तरह से values आती है किस तरह से values use होती है अब मैं आपको बताता हूँ call stacks, यह सब क्या होता है, क्योंकि देखिए यहाँ पे हमने देखा कि अपने दो function execute हुए, उसके लिए एक नया execution environment sandbox सा create हुआ, environment variables बने वहाँ पे हमें thread भी मिल गया, काम भी हो गया, लेकिन यहाँ पे एक और चीज आ यह जो है global environment बोल सकते हो, execution context बोल सकते हो, तो यह आपका global execution तो हो गई होगा, अब इसके बाद क्या होगा, आपके functions जैसे ऐसे आते जाते हैं, वो उससे हटते जाते हैं, तो जैसे suppose करिए आपने लिखा है यहाँ पर यह one, यह आपका method है, तो क् function के अंदर एक और function को call कर रखा हो तब ये execution context किस तरह से चलता है तो उसके बारे में भी हम यहाँ पर detail देखेंगे तो उस detail को देखने के लिए वैसे तो बहुत आसान है इतना जादा कुछ है नहीं बट उस detail को पूरा detail में कि suppose करिए मैं यहाँ पे कुछ इनके suppose करिए हमारे पास यह one method है तो जैसे suppose करें यह हमारे पास है यह one method है इसके बाद suppose करिए आपने कहीं पे लिख रखा है 2 और यहाँ पे लिख रखा है आपने 3 ठीक है ��भी मैं आपको practical भी इसी तरह से हम क्या करा, हमने ये 2 लिया, इसको execute करा, और इसको बाहर निकाल दिया, ये तो हुआ बहुत आसान बात, चलिए वापिस इनको reset करते हैं, complexity कहां आती है, complexity वहां आती है, जब आपने 1 को यहां पर रखा, और आपने वो वन पहले निकलेगा, टू पहले निकलेगा, या थ्री पहले निकलेगा, तो यही सब की कहानी है, वैसे मैं आपको चोटा सा यहाँ पे बता देता हूँ, यहाँ पे लीफो नाम का concept चलता है, last in, first out, तो सबसे last में कौन आया, थ थोड़ा table पे समान जादा हो गया है, इसलिए थोड़ी सी परिशानी हो रही है, but कोई बात नहीं, तो चलिए यहाँ पे चलते हैं, अब आप क्या कर सकते हैं इसके अंदर, right click करिए, inspect element में जाईए, अब देखिए elements है, console है, इसी तो यहाँ पे आप देखते हैं कि actually में ये methods वगरा run कैसे होते हैं, क्या इनका scope है, क्योंकि इसको आप और scroll करके देखेंगे, तो आपको directly यहाँ पे scroll करने पे दिख जाएगा एक call stack, कि क्या call stack हो रहा है, तो यहीं की हैं आप सारा देख सकत ठीक है, बड़ा आसान था, एक और function हम यहाँ पे create कर लेते हैं, इसका नाम हम दे देते हैं, 2, यह लीजे, बहुत ही आसान था, इसको भी हम बोल देते हैं, ठीक है, console.log, और इस थोड़े सी keyboard में mistake होगी क्योंकि keyboard change किया है 3 ठीक है अच्छा अब यहाँ पे जब आप देखेंगे कि actually में consoles ये सब कैसे होते हैं तो suppose करिए हमने call करा 1 उसके बाद हमने call करा 2 और उसके बाद call करा हमने 3 तो तो आप चाहें तो यहाँ पे break points लगा सकते हैं, एक break point यहाँ, और यह 1, 2 और 3 पे भी लगा लेते हैं, तो यह हमने run किया, तो अब देखें जैसे आपने run करा, यह 1 पे आप आए, तो आपके पास जो call stack है व किया तो ठीक है वो 1 का उसके अंदर values चला गया है executional context वगरा सब हो गया है उसके बाद step 2 पे जाते हैं तो देखिए अब 2 आया हमारे पास यहाँ call stack के अंदर 2 आया तो जैसे 2 आया तो उसकी definition वहाँ पे load हो गई उसका memory जो executional phase था उसके बाद memory phase था फिर executional phase था वो हो गया है अब 3 के अंदर उसकी definition load हो गया है यह call stack के अंदर 3 है और आपने उसको phase out कर दिया है ऐसे ही रहने देते हैं और इसके अंदर क्या करते हैं हम और भी मेथड्स को कॉल कर लेते हैं देखते हैं तो हम क्या करते हैं यहां पर जाकर इस 2 को कॉल कर लेते हैं वो 1 के अंदर ही 2 को कॉल कर लिया है और 2 के अंदर 3 को कॉल कर लिया है अ इसको run करते हैं, तो ये call stack हम देखते हैं, ठीक है anonymous है अभी तो यहाँ पे, कोई problem वाली बात है नहीं, step out करते हैं, तो देखिए 1 हुआ, ठीक है, उसके बाद एक और step out करते हैं, तो देखिए 1 अभी भी है, call stack में नीचे गया है, but 1 अभी भी है, ग� तो देखिए 1, 2, 3, तीनों के तीनों अभी आपके call stack के अंदर हैं, तो जो मैंने आपको बात अभी iPad पर बताई थी, वो ही same बात है, इसके बाद मैंने इसको run 2 के अंदर भी देखिए, यह execute कर रहा था, 2 और 3 दोनों loaded हैं वहाँ पे, क्योंकि 3 के अंदर हमने, यहाँ पे 2 के अंदर हमने 3 को भी load कर दिया, तो 3 भी load हो गया है, इसको run कर दीजे, अब 3 की number आई, और 3 के में हमने क्या load कर रखा तो आपको पता रहेगा कि क्या आपका call stack होता है, क्या आपका execution context होता है, कैसे JavaScript का code run होता है, और हमने ये browser में खुद से check किया है, तो उम्मीद करता हूँ, काफी time लगी, काफी मेहनत लगा इस वीडियो को बनाने के लिए, सब जगे LinkedIn वगरा पे पोस्ट करेंगे कि हाँ इसी तरह से JavaScript को समझाईए अगर आपने LinkedIn पे post किया, Twitter पे post किया आप पे depend करता है आप कितना support करते हैं तो subscribe कर दीजे, एक comment भी छोड़ते जाएगा अगर पसंद आया हो वीडियो और LinkedIn पे post जरूर करियेगा चाय और code को