Lexical scoping and Closure | chai aur
Вставка
- Опубліковано 2 жов 2024
- Visit chaicode.com for all related materials, community help, source code etc.
#javascript #hindi
Sara code yaha milta h
github.com/hit...
Discord pe yaha paaye jaate h:
hitesh.ai/discord
Instagram pe yaha paaye jaate h:
/ hiteshchoudharyofficial
I have never never understood the basics of these things like closures, lexical scoping and data structure etc. but this guy deserves hats off.... literally you need a gold medal for teaching in such an awesome way. i am first time commenting on any youtube coding video.
Wow, thanks!
Ab Jake Maine aapko subscribe Kiya hai sir . Meri Jo aadat hai pehle dekhta hun uske baad believe karta hun 😅😅. Aapki playlist kafhi achi hai aur mujhe mja aaya aur maine aapne berojgar dosto ko bhej diya hai aur unko motivate bhi kar diya hai aur aapki playlist jarur dekhenge. Thank you so much Sir 🫡🫡
trust me sir! you will be known forever for this Javascript series! The Best on the planet!
Abhi to bs shuru hue h 😁
sir, when second part comes?@@chaiaurcode
Thanks alot for this course sir, best js course in youtube and mainly you never get bored
Now I have confidence to learn React 😀😀
यूट्यूब पर कोचिंग का खेल तो चलता रहेगा, कोर्स आएंगे, जाएंगे.. कभी फ्री बनेंगे कभी पेड लेकिन ये चाय और कोड रहना चाहिए इसका बेशकीमती जावास्क्रिप्ट का कोर्स अमर रहना चाहिए। ❤❤
Shi bat
'ataal' line bole ho !
@@krishnadawalkar6999 suits Atal line..only for Hitesh sir 💯
Bilkul shi baat hai
0:00 Introduction
1:55 Reading the MDN docs
3:23 Lexical Scoping
14:00 Closure
18:09 Practical Implementation
Ye hui na baat, ❤️
@@chaiaurcode ♥️♥️
sir i cannot understand closure @@chaiaurcode
you understand closure can you tell me closure
return child function inside parent function@@nehasalma9083
This is the best explanation for closures ever, Thanks man
yes i watched few other videos before this, lekin my concept got cleared when i watched this video. Thanks Hitesh Sir 🙂
Amazing sir . i have watching many videos about lexical scoping and closure but I can't understand but sir after watching yours videos now I realize that its very easy
1.5x me bhi ek hi baar me samajh aa gaya. waah kya chai hai haha. Thank you so much sir..
What a practical explanation, I don't have words to appreciate your work.
you are god of javascrript sir!
One of the best video❤
I am revising and literally no one explained like you ❤
Thx So Much
excellence work done by sir
Lexical scoping ensures that:
1) Functions have access to variables defined in their own scope and in any parent scopes.
2) Variables are not accessible outside the scope they are defined in, preventing unintended interactions and potential bugs.
I tried many videos and channels for closures but finally I found this guy. Thank you so much sir
Happy to help🤗☕️
13:37 closure done
Thankyou so much sir for this after watch this video my closer concept perfectly clear thanks.🙏👍
I have not shared your videos links to anyone but I have recommended many friends to watch your videos . if they don't know any topic and try to ask me then I use to say "AAGAR AAP NE CHAI AUR CODE PE HITESH SIR SE PDE HOTE TO MERE SE NHI PUCHTE ", No doubt you are super. keep making videos and get motivated . I started watching your videos 3 years back but i was never serious but now I am int the stream. Once again thank you sir.
apana poura dimage lagaya ha
mein bhe yahhe karuga insh'ALLAH
Quality pro max 👍
13:39 lexical scoping is completed
Awesome Sir😊
at 25:45
to make your code run, please make sure that you used these ` ` not " " or ' ' , if you used " " or ' ' your code won't work, coz value is only read in ` ` escape quotations
Thank you
Great content sir!! Love and respect from Bangladesh ❤
25:20 Wo tho smjh aa gaie parent ki arguments ya variable Child ko access hoti hai but
without return function onclick hander auto kyu kam kar Rahi thi… ussa tho onclick par kam karni chiya thi
Fir hamne internal function banaie tho onclick perfectly kam karni lagi…kyu?
Thanks bhaiya for the series ❤
0:00 Introduction
1:55 Reading the MDN docs
3:23 Lexical Scoping
14:00 Closure
thanks ji
13:38 closures completed
0:00 introduction
1:55 Reading the MDN docs
3:23 Lexical Scoping
14:00 Closure..
13:40 Completed lexical scoping
23:32
here we can also fix this issue without closure ..but help of anonymous functions example given below
function clickHandler(color) {
document.body.style.backgroundColor = `${color}`
}
document.getElementById('red').onclick = function() { // anonymous function
clickHandler('red')
}
document.getElementById('black').onclick = function() { // anonymous function
clickHandler('black')
}
lexical scoping
function p(){
let a="abc"
console.log(a)
// console.log(b)
// console.log(k)
function s1(){
console.log(a)
let b="yo"
console.log(b)
// console.log(k)
}
s1()
function s2(){
console.log(a)
const k=1
console.log(k)
// console.log(b)
}
s2()
}
p()
Bhai ye do code kuch samajh me nahi aaraha kyaa karu
1.function wrapValue(n) {
let local = n;
return () => local;
}
let wrap1 = wrapValue(1);
let wrap2 = wrapValue(2);
console.log(wrap1());
// → 1
console.log(wrap2());
// → 2
2.function multiplier(factor) {
return number => number * factor;
}
let twice = multiplier(2);
console.log(twice(5));
// → 10
So when is react course coming
pehle css ayegi ?
@3:23 Lexical scoping
@14:00 Closure
great my friend
24:15 bhaiya function likha na jarore thore hai iss ma v to dala skta haia na
function clickhandler(color){
document.body.style.backgroundColor = `${color}`
}
document.getElementById("orange").onclick = function(){
clickhandler('orange')
}
God bless you
0:00 Introduction
1:55 Reading the MDN docs
3:23 Lexical Scoping
14:00 Closure
18:09 Practical Implementation
very very helpful playlist Thank you so much sir for this Premium course on javascript for free..
Sir g javascript me to mastry hasil krwa diye ❤❤❤❤❤❤❤❤
Bs ek bar aap apne chai ki reicipes bta dijiye n 😊😊😊😊😊😊😊😊
@chaiaurcode 💕💕
FINALLY completed the series. This series of yours gave me confident to more dive into JS environment. I believe if I came across this masterpiece a year ago, It would've been a great investment. Thank you sir💗
please make a video on currying function, promise.all and promise.allsettled , promise.any, callback hell, local storage & session storage, difference between rest & spread operator pleasee....!!!!! these all are imp topics of js.
00:03 The video will cover two interesting topics: closure and lexical scoping.
01:47 Understanding closure and its access to outer function scope with MDN docs.
05:36 Lexical scoping does not allow access to variables declared inside a function in the outer scope.
07:55 Inner functions have their own execution context and share memory with the outer function.
11:51 Understanding Outer and Inner Function.
13:37 Explanation of lexical scoping and its significance. Detail explanation of closure through an example
17:32 Lexical scoping and closure return the entire lexical scope of a function when a complete function is returned.
19:14 Using onClick event and changing background color in JavaScript
22:27 Understanding the difference between a function and a reference to a function.
24:03 In Summary Functions have access to variables defined in their outer scope.
Closure allows a function to retain access to variables from its lexical scope
Sir lexical Scope me wo family wala example (father to chaild and brother can't share to each other) wala consept kabhi nhi bhulunga , is tarike se apne samjhaya hai. ,
Ye same example, English Channel pe kaafi famous hua tha. Acha laga ki yaha b sabko psnd aaya
🎯 Key Takeaways for quick navigation:
00:44 🎉 *Introduction to Closure and Lexical Scoping*
- Acknowledgment of the importance of Closure and Lexical Scoping.
- Announcement of the continuation of the JavaScript series with a focus on Closure and Lexical Scoping.
01:12 📘 *Exploring Lexical Scoping*
- Definition and role of Lexical Scoping in JavaScript.
- Brief mention of a mini-project for real-world implementation understanding.
01:54 🔍 *Setting the Stage for Closure Understanding*
- Teasing the concept of Closure and the need to understand it.
- Reflecting on the engagement and positive response from the audience.
02:22 🔒 *Introduction to Closure*
- Defining Closure as a combination of functions bundled together with references to the surrounding state.
- Acknowledging the initial complexity of the definition.
02:37 🌐 *Understanding Closure Basics*
- Explanation of Closure concept involving outer and inner functions.
- The accessibility of the outer function's scope from the inner function is clarified.
03:05 🧠 *Brief on Creation Time and Closure*
- Introduction to the concept of creation time in Closure.
- Teaser about the interesting aspects of creation time, to be discussed later.
03:32 📖 *Lexical Scoping and Example Walkthrough*
- Initiation of the Lexical Scoping explanation.
- Importing and pasting code into a new folder for better organization.
04:29 🛠️ *Code Refinement and Documentation*
- Correction of indentation for better code readability.
- Preference for using "let" over "var" for variable declaration.
05:11 🖥️ *Understanding Function Scope*
- Declaration and explanation of the "displayName" function.
- Clarification of the scope of the "displayName" function and where the variable "name" is accessible.
05:40 🔍 *Exploring Scope Access in Functions*
- Introduction to the importance of function scope and access to variables.
- Discussion on the theoretical aspect and justification of variables being unavailable outside the function's scope.
06:22 🧐 *User Input and Scope Access*
- Exploring the impact of declaring variables inside functions on their accessibility.
- Discussion on whether the "username" variable declared inside the function will be accessible outside.
07:05 🔒 *Inner Function and Scope Locking*
- Introduction to the concept of an inner function, named "inner," declared inside the "outer" function.
- Explanation that the "inner" function locks the access to the "username" variable within the "outer" function.
07:55 🔍 *Accessing Variables in Nested Functions*
- Declaration of the "username" variable at line 25 and line 31 within different functions.
- Explanation of the challenge of accessing the "username" variable inside the inner function.
08:08 🤔 *Inner Function's Access to Variables*
- Highlighting the availability of "username" inside the inner function.
- Discussion on whether the outer function should also have access to the "username" variable.
08:50 🔗 *Lexical Scoping and Variable Sharing*
- Introduction to the concept of lexical scoping and how it affects variable accessibility.
- Explanation of separate execution contexts for each function loaded and their shared memory.
09:44 🔄 *Inner Function's Access to Outer Variables*
- Verification of the absence of local variables within the inner function.
- Exploration of how the inner function can access variables declared in the parent function (lexical scope).
10:25 🌐 *Accessing Variables in Nested Functions*
- Explanation of how outer function variables are accessible within nested functions.
- Demonstration using the "username" variable and accessing it from both outer and inner functions.
11:08 🧐 *Nested Functions and Variable Accessibility*
- Discussion on the accessibility of variables based on the parent-child relationship in nested functions.
- Introduction of the concept of equality in variable access within a family analogy.
11:49 🔐 *Securing Variables within Inner Functions*
- Exploration of variable access within the inner function using the "secret" variable.
- Demonstrating restrictions on accessing the "secret" variable from the outer function.
12:31 🤝 *Shared Variable Access in Nested Functions*
- Investigating whether the outer function has access to the "secret" variable declared within the inner function.
- Emphasis on the technical exploration of variable accessibility.
12:58 🧸 *Metaphor: Sharing Toys and Ice Cream*
- Introduction of a metaphor where personal properties (toys and ice cream) can be shared among family members.
- Clarification on the limitations of sharing certain personal properties, emphasizing equality.
13:41 🚪 *Closure Introduction and Community Help*
- Announcement of the completion of Part 1 and a request for timestamps to facilitate navigation.
- Invitation for viewers to assist each other in understanding the concepts discussed.
14:08 🔍 *Explaining Closure with an Example*
- Explanation of closure using an example involving Mozilla Firefox.
- Demonstrating the attempt to understand closure through practical coding analysis.
15:06 🔄 *Inner Function Returning Value*
- Highlighting the concept that inner functions have access to the outer function's scope.
- Introduction of the interesting concept of returning a function within another function.
15:46 🧐 *Understanding Function Scope*
- Explanation of function scope and its duration until execution.
- Introduction of the challenge when the function's scope disappears after execution.
16:00 📜 *Closure Concept in JavaScript*
- Introducing the concept of closure in JavaScript.
- Explaining how closure involves removing the execution context but retaining memory references.
16:28 🔍 *Memory Reference in Function Execution*
- Explaining the importance of memory references in the execution of functions.
- Demonstrating the creation of a function (by function execution) and its subsequent memory reference.
17:08 🔄 *Practical Example with Mozilla Display*
- Demonstrating a practical example with Mozilla display to solidify the understanding of lexical scoping.
- Highlighting the significance of outer and inner functions and their shared lexical scope.
17:36 🤔 *Closure and Practical Implementation*
- Defining closure as the return of a function with its entire lexical scope.
- Illustrating the practical implementation of closure with a detailed explanation.
18:04 📚 *Practical Implementation Scenario*
- Addressing the challenge of practical implementation of lexical scoping and closure.
- Emphasizing the importance of real-world scenarios for a deeper understanding.
18:33 🛠️ *Building a JavaScript Example*
- Creating a simple JavaScript example with multiple buttons.
- Assigning unique IDs to orange and green buttons.
19:02 🧩 *Implementing Button Click Functionality*
- Defining the functionality for the orange and green buttons.
- Assigning a background color change on click for the orange button.
19:59 🖌️ *Styling and Functionality Refinement*
- Styling the buttons by changing background colors and text.
- Refining the code to ensure smooth implementation and visual appeal.
20:26 🚀 *Scaling for Multiple Buttons*
- Discussing the process of scaling the implementation for multiple buttons.
- Providing a glimpse into handling a larger number of buttons efficiently.
20:42 🔄 *Repeating Click Handler Logic*
- Discussing the challenge of repetitive code when dealing with multiple buttons.
- Introducing the "DRY" (Don't Repeat Yourself) principle.
21:11 🛠️ *Implementing Generic Click Handler*
- Introducing the concept of a generic click handler function.
- Emphasizing the ability to dynamically determine which button was clicked.
21:51 📝 *Dynamic Color Injection*
- Utilizing variables and parameters for flexible and adaptable code.
22:33 🚀 *Refining Click Handler*
- Refining the click handler function with proper references and definitions.
- Highlighting the importance of passing values correctly to the click handler method.
23:01 🔍 *Handling Multiple Buttons*
- Discussing the need for a global event handler for managing multiple buttons.
- Introducing the "on click" global event handler and its role.
23:15 🎨 *Dynamic Styling and Lexical Scoping*
- Demonstrating the dynamic change of colors (orange and green) in response to different button clicks.
24:13 🔄 *Modifying Function Definition*
- Discussing the necessity of modifying the definition of the function to address the problem.
24:52 🌐 *Lexical Scoping and Closure Relationship*
- Explaining the relationship between lexical scoping, closures, and the access to variables.
25:34 🔍 *Real-world Application of Closures*
- Encouraging viewers to build their own projects to encounter and understand real-world problems.
25:47 🌐 *Importance of Variable Access in Functions*
- Discussing the significance of variable access in functions.
26:02 🔄 *Handling Variables with Closures*
- Illustrating the use of closures to handle variable access effectively.
Made with HARPA AI
Bhaiya plz interview questions series ❤❤ and react ki series ko start ker do bhot intejar hain plz bhaiya ❤❤❤❤❤❤ye
Krte h praband
Hi Sir Following From Very Starting Can You Please make a Detailed Video On Asyn Await This Series has All The Video Only Asyn Await Left
Sir advanced javascript concept ke videos add kijiye is playlist pe. Bhaiya Debounce aur throttle pe video bnaiye please.
Never understood closure untill watched this video... Thanks sir mera bas chale salary ka 30% apko duu 😅😅
now js like chai : with the help of "Chai Aur code"
25:40 so here's the explanation and my understanding of this particular example ---
The onclick here requires a reference of a function so that it can call it when the click event occurs on corresponding button, we always pass reference in this type of situation to prevent the function to get executed immediately.
But the problem is we can't just pass the reference of the function because as we know it requires the color in the form of parameter and we are noy storing the reference in variable like structure such as let refHolder = clickHandler; so we can't call the refHolder later with the color parameter later in code such as refHolder('blue').
In reality, we are giving the reference to onclick which doesn't have an in built functionality or human intelligence to call this clickHandler with argument based on the button.
So now we actually have a tiny war between onclick() demanding a reference and clickHandler(color) which demands to be called with a parameter only otherwise error.
Now in order to fullfill the demand of bith entities, we can we will indeed call the clickHandler() with color parameter passed ( demand fulfilled ) but at the same time we will do something that a reference is given to onClick function ( which it strictly demands ), we will return reference of an inner function which does the main work or logic( demand fulfilled ) ( Very important thing to note here is this could not have been achieved without the feature of lexical scoping )
@Hitesh bhai, chai bol ke coffee to nahi pee rahe...BTW, good to sea hindi tuts from you, thank you
this was awesom :)
I think behind the scenes kya ho rha hai ki, jab hm inner function return kr rhe hai to outer ka to execution stack end ho ja rha hai, but ... Chuki outer ke sare variable to ab inner point kr rha hai, so garbage collector unko clear nhi kr rha, cuz inner is still holding there's reference. Hence execution stack khatam hone ke bad bhi variables ka memory clear nhi ho rha, correct me if I'm wrong
just finished js ka lecture completely and after im plannig to do react and then?? what all to do for backend
0:00 introduction
1:55 Reading Mdn docs
3:23 Lexical scoping
14:00 closures
Lexical scoping 00:01 to 13:45
❤️
@chaiaurcode Sir please java full stack par bhi course banaiye🙏🙏
13:45 closure complete
Thank you ❤ for js
Sir projects karwaado, services wagaira bhi use karlengey seekh lengey aapsey aur thoda
14:00 lexical done
Good morning Hitesh ji,
Jo samjha te ho app ,sab samajme aate hain,tab lagta hain sabkuch aata hain but jab bhi ek basic se bhi basic project khud banane jate hain to pata chalta he ke kuch nahi malum hain ,khub frustration hota hai, iska kya karu,but ek cheez hai ke main give up nehi karti hu,but kab khud se bana paungi kuch 😢
@chaiaurcode
thanks for help
Sir closures itna achese nai samjha ha lexical scope samjha lekin closure if u can make it more simpler plz make a video or give 3-4 examples if possible
Just one question, what is the issue when we are passing the reference of function to onclick, bcoz returning function to onclick and giving reference is a same thing.
done guruji
Sir Scoping ke andar apne samjahay aht Icecream ka example deke ab lag rha hai ke best javascript series ever 💌💌
18:09 function ka reference or function as it is can be returned
likhte time var likhinge par bolinge War , phir variable ko Wariable kyu nhi :)
sir make more backend project playlist for beginner to advanced
20:40
document.querySelectorAll('button').forEach(element => element.onclick = clickHandler(element.id));
Nicely done sir
Closure and lexical scope are almost the same.. you didnt describe the difference
Thanks hitesh Chaudhary, this is first comment.thanks alot yaar.
i think pura scope nhi jata bss wahi variables jatay ha jo inner function mai use hotay hai if i am wrong please correct mee if anyone knows about this
ye topic boring hai couse lagbhag har programming language main hi inner access milta hai our outer nehi milta ye to uum baat hai !
Chai piyo coding karo.....sir bahot badiya samajh me aa gaya.
Thanks
Mja aa gya sir.
sir lexical scoping aur closures classes or objects me bhi work karta h ya sirf functions me ?
0:00 - Lexical Scoping
13:40 - Closure
Aaapko hirday se naman hai prabhu......aapse to interview dene wale hi nahi balki interview lene wale ko bhi sikhna chahiye....aapka video to mai dekhta and like share karta rahta hu but ispe to aapne comment likhne ko majbur hi kar dia
sir maine apne poore programmming group me hi share kr di hai playlist
Thank you sir for this amazing series 😊
Lexical scope is everywhere. All functions can access global variables. However variable or properties declared inside a scope is generally not accessible by the parent or global scope. I think the window itself is a function. I found it pretty early, but still, I hesitate to state this. Hitesh Sir if you're reading this comment then please correct me if I'm making any mistake.
13:35 Closure
finally 49 video par pahuch hi gya 2 month me
20:33 interesting i thought it's booting like lexical scoping!
thanks sir for this series. today, I completed this series 😊😊
Arey sir ek hi to dil hai kitnee barr jeetogai...
Aap linkedin pe share hi itni baar kr rhe ki aur videos bnane ka mn krta h
@@chaiaurcode sir Tagg kra hai aapkoo...
Finally completed 50/50 videos with complete understanding and with notes as well proper practice
🙏🙏
Chai aur Lexical scoping and Closure..
thankyou sir really apriciated thanku so much
Thankyou sir for making this playlist ❤❤
Badhiya aaisa sikhayege to koi bhi sikh jayega coding.