I use to think "Call, apply and bind " was just a theoritical nothing practical thing but this is the first time I actually understood the Use Case of "CALL" , one of the best Lecture thanks sir. Again Thanks a lot.
🎯 Key Takeaways for quick navigation: 00:00 📜 *Introduction to Video and Keywords* - Brief introduction to the video and its purpose. - Emphasis on the importance of understanding keywords. - Mention of the tendency to rush through topics in courses. 00:29 🗂️ *Different Keywords and their Usage* - Explanation of the variety of keywords used in the script. - Noting that multiple keywords are often combined and explained together. - Suggestion to understand keywords at different time durations for better comprehension. 01:10 🚀 *Evolution of React and Coding Practices* - Historical perspective on React's early versions and coding practices. - Description of the initial challenges due to limited language features. - Transition from minimalistic coding to the current abundance of language features and libraries. 01:54 🔄 *Execution Context and Function Interaction* - Explanation of the global execution context and its persistence. - Illustration of how functions maintain their execution context. - Emphasis on the memory and context carried by functions during execution. 02:34 🔄 *Execution Context and Function Relationships* - Explanation of execution context in JavaScript functions. - Advantages of visualizing code through diagrams. - Illustration of the global execution context and nested function contexts. 03:00 🗃️ *Understanding Execution Context Hierarchy* - Introduction to the concept of execution context hierarchy. - Overview of the global execution context and its position in the hierarchy. - Explanation of how nested functions create their own execution contexts. 03:29 🔍 *Challenges with Execution Context References* - Discussion on the challenges of referencing execution contexts in nested functions. - Examination of how 'this' keyword behaves in different contexts. - Highlighting the complexities when functions refer to outer execution contexts. 04:10 🧩 *Troubleshooting Global Execution Context Issues* - Explanation of problems arising from global execution context references. - Introduction to the 'this' keyword and its role in context resolution. - Discussion on common issues related to referencing objects in different contexts. 05:07 🔄 *Overlapping Abstraction in Real-world Scenario* - Discussion on the persistent problem of overlapping abstraction in real-world scenarios. - Introduction to a practical example to illustrate the issue. - Creation of a new file named 'dot.js' to demonstrate practical implementation. 05:50 📝 *Setting User Details Functionality* - Explanation of creating a function named 'setUserName' to set the username. - Implementation of rules to check and fetch username from the database. - Demonstration of accessing and setting user details within the 'setUserName' function. 06:49 🔄 *Internal Execution Context Access in Nested Functions* - Understanding the access of variables declared within functions in the internal execution context. - Illustration of the 'setUserName' method accessing variables declared internally. - Explanation of how internal functions have access to variables declared in their scope. 07:18 🛠️ *Optimizing Function Calls for Better Access* - Optimization strategy for better access to variables within nested functions. - Discussion on creating a new user with a unique keyword for improved access. - Highlighting the significance of organizing and minimizing function calls for efficient code. 07:31 🔒 *Issue with Property Assignment in Execution Context* - Introduction to the problem with property assignment in the current execution context. - Observing the output after running the code and identifying issues. - Lack of proper setting of properties within the object causing unexpected behavior. 08:09 🛠️ *Debugging and Fixing the Property Setting Problem* - Debugging the code to identify the root cause of the property-setting problem. - Recognizing that the 'setUserName' method is not properly setting the 'username' property. - Addressing the issue by correctly assigning the 'username' property within the function. 08:49 🔍 *Analyzing Reference and Execution Context in JavaScript* - Understanding the reference and execution context of the 'setUserName' method. - Discussing the role of the 'set' method in accessing and modifying object properties. - Clarifying the need for proper referencing and execution context to avoid issues. 09:17 🛠️ *Implementing Method of Object Substitution for Clarity* - Introducing the concept of method of object substitution for clearer code. - Demonstrating how the 'Object.subset' method works in the current scenario. - Discussing the advantages of using clear and concise coding techniques for better understanding. 10:14 🔄 *Handling Execution Context Removal and Reference Hole* - Explanation of removing execution context and reference hole within the outer function. - Demonstrating how variables declared inside the function become inaccessible after execution. - The importance of keeping a reference hole and the execution context for proper functioning. 10:29 🚧 *Troubleshooting and Debugging the Reference Hole Issue* - Identifying the need to maintain a reference hole for variables and functions. - Troubleshooting the problem of the reference hole affecting the expected behavior. - Discussing the syntax and practical aspects of resolving the issue. 11:13 🌐 *Utilizing Global Object for Reference Hole Solution* - Introducing the use of the global object to maintain a reference hole. - Demonstrating how to pass the global object as an optional parameter to the function. - Ensuring that changes inside the function do not affect the global context. 12:08 🧰 *Applying Execution Context Pass for Improved Functionality* - Implementing execution context pass as a solution to the reference hole problem. - Clarifying the significance of passing the context and the resulting improvement in functionality. - Emphasizing the importance of understanding execution context in interviews and real-world scenarios. Made with HARPA AI
The way you explains sir, that definitely came from years of experience. I used to move from one video to other to understand topics. But now found gem, no need to go anywhere else. Aapke samjhane se sab samajh aa jata h😊
Great effort sir. This is one of the tricky ones , which you explained very well. I was always wondering why we need call/apply/bind, as we can call a function directly with its name. The only difference is, via call/apply/bind we can set our current context (optionally can send our parameters) , which we cant do via normal function call. But, now i understood, under the hood its the function execution context which play a vital role when there is function inside another function.
01:37 Understanding execution context and 'this' keyword in JavaScript 03:17 Understanding the execution context in JavaScript functions 05:01 Explanation of setting usernames and creating users using JavaScript functions 06:45 Understanding execution context in JavaScript 08:28 Explaining the concept of object substitution and its implications 09:56 Managing execution context in JavaScript [Removing execution context will cause all declared variables to disappear To keep a reference of the execution context, use the "CALL" Method] 11:24 Discussing the use of 'this' in different scenarios and its implications
There is a doubt in my mind. This call function is okay, like we can use call to use the reference of other function's execution context. But when we use "this" keyword in the function which is called by the call method then it will always access the other function's execution context, what if I also want to refer to my context. Eg: What if I want a variable named as "username" (whose context refers to its parent function only) in the mentioned example's SetUsername method. "this.username" always gives me context of createUser and append a new child always.
what is wrong with passing the context through arguement?? function setName(ctx, name){ ctx.username = name; } function createUser(name, email){ setName(this, name); this.email = email; }
because it is not the write way to do it:- you can declare createUser as constructor so that this refer to the new instance of an object. const user = new CreateUser ('yourname', 'yourmailid' );
I followed a channel to learn DSA but I left because he is always making videos 1hour or for no use and concentrating on his watch time. but you are the perfect, literally very nice series in less time. I am requesting for DSA series also.
Mera ek question hAY: HTML,CSS,PHP,JS,MYSQL YEH SAB SIKH KAR KYA iot RELATED PROFESSIONAL LEVEL CODE KAR PAUNGA, YA ISMAY BHI AUR BAHUT KUCH SECURITY LOOP HOLS, SCALABALITY ISSUE AYEGA?
smaj me to aa geya hai subscrib to hum ne phle se hi ker rkha hai, ab to bess like ki daree thi wo bhi ker diya hai :) aap bus content le ker aaty jaye like and share ki chinta chood hi do aap wo to hum aap ke bina khay bhi ker dengay !! kya kery kerna pedta hai content hi etna jada acha hai ki, button like per jaye bina rukta hi nhi :) (:
In the starting i am not interested in your series...bcoz I thik you are same as other ...but after watch your your function vidio . I follow your js series without time wasting and explore all channels.... your series. #justlikeafire🔥🔥 on TH-cam
Mera naam sameer hai me 16 saal ka hu from uttarakhand, Roorkee. mere paas aik startup idea hai ( ye idea bahut hi badi problem ka solution hai jo problem mene khud face ki hai ) jise me business me execute karna chahta hu mene revenue model or startup business me kaise execute hoga sab kuch tayar kr liya hai bs mujhe aap jaise mentor or investor ki jaroorat hai. Please support me aapke aik chote se action se meri poori life change ho jayegi. Thank you ❤
I did not even know that call/bind/apply even exist.
Hitesh ji, you nailed it.
I use to think "Call, apply and bind " was just a theoritical nothing practical thing but this is the first time I actually understood the Use Case of "CALL" , one of the best Lecture thanks sir. Again Thanks a lot.
🎯 Key Takeaways for quick navigation:
00:00 📜 *Introduction to Video and Keywords*
- Brief introduction to the video and its purpose.
- Emphasis on the importance of understanding keywords.
- Mention of the tendency to rush through topics in courses.
00:29 🗂️ *Different Keywords and their Usage*
- Explanation of the variety of keywords used in the script.
- Noting that multiple keywords are often combined and explained together.
- Suggestion to understand keywords at different time durations for better comprehension.
01:10 🚀 *Evolution of React and Coding Practices*
- Historical perspective on React's early versions and coding practices.
- Description of the initial challenges due to limited language features.
- Transition from minimalistic coding to the current abundance of language features and libraries.
01:54 🔄 *Execution Context and Function Interaction*
- Explanation of the global execution context and its persistence.
- Illustration of how functions maintain their execution context.
- Emphasis on the memory and context carried by functions during execution.
02:34 🔄 *Execution Context and Function Relationships*
- Explanation of execution context in JavaScript functions.
- Advantages of visualizing code through diagrams.
- Illustration of the global execution context and nested function contexts.
03:00 🗃️ *Understanding Execution Context Hierarchy*
- Introduction to the concept of execution context hierarchy.
- Overview of the global execution context and its position in the hierarchy.
- Explanation of how nested functions create their own execution contexts.
03:29 🔍 *Challenges with Execution Context References*
- Discussion on the challenges of referencing execution contexts in nested functions.
- Examination of how 'this' keyword behaves in different contexts.
- Highlighting the complexities when functions refer to outer execution contexts.
04:10 🧩 *Troubleshooting Global Execution Context Issues*
- Explanation of problems arising from global execution context references.
- Introduction to the 'this' keyword and its role in context resolution.
- Discussion on common issues related to referencing objects in different contexts.
05:07 🔄 *Overlapping Abstraction in Real-world Scenario*
- Discussion on the persistent problem of overlapping abstraction in real-world scenarios.
- Introduction to a practical example to illustrate the issue.
- Creation of a new file named 'dot.js' to demonstrate practical implementation.
05:50 📝 *Setting User Details Functionality*
- Explanation of creating a function named 'setUserName' to set the username.
- Implementation of rules to check and fetch username from the database.
- Demonstration of accessing and setting user details within the 'setUserName' function.
06:49 🔄 *Internal Execution Context Access in Nested Functions*
- Understanding the access of variables declared within functions in the internal execution context.
- Illustration of the 'setUserName' method accessing variables declared internally.
- Explanation of how internal functions have access to variables declared in their scope.
07:18 🛠️ *Optimizing Function Calls for Better Access*
- Optimization strategy for better access to variables within nested functions.
- Discussion on creating a new user with a unique keyword for improved access.
- Highlighting the significance of organizing and minimizing function calls for efficient code.
07:31 🔒 *Issue with Property Assignment in Execution Context*
- Introduction to the problem with property assignment in the current execution context.
- Observing the output after running the code and identifying issues.
- Lack of proper setting of properties within the object causing unexpected behavior.
08:09 🛠️ *Debugging and Fixing the Property Setting Problem*
- Debugging the code to identify the root cause of the property-setting problem.
- Recognizing that the 'setUserName' method is not properly setting the 'username' property.
- Addressing the issue by correctly assigning the 'username' property within the function.
08:49 🔍 *Analyzing Reference and Execution Context in JavaScript*
- Understanding the reference and execution context of the 'setUserName' method.
- Discussing the role of the 'set' method in accessing and modifying object properties.
- Clarifying the need for proper referencing and execution context to avoid issues.
09:17 🛠️ *Implementing Method of Object Substitution for Clarity*
- Introducing the concept of method of object substitution for clearer code.
- Demonstrating how the 'Object.subset' method works in the current scenario.
- Discussing the advantages of using clear and concise coding techniques for better understanding.
10:14 🔄 *Handling Execution Context Removal and Reference Hole*
- Explanation of removing execution context and reference hole within the outer function.
- Demonstrating how variables declared inside the function become inaccessible after execution.
- The importance of keeping a reference hole and the execution context for proper functioning.
10:29 🚧 *Troubleshooting and Debugging the Reference Hole Issue*
- Identifying the need to maintain a reference hole for variables and functions.
- Troubleshooting the problem of the reference hole affecting the expected behavior.
- Discussing the syntax and practical aspects of resolving the issue.
11:13 🌐 *Utilizing Global Object for Reference Hole Solution*
- Introducing the use of the global object to maintain a reference hole.
- Demonstrating how to pass the global object as an optional parameter to the function.
- Ensuring that changes inside the function do not affect the global context.
12:08 🧰 *Applying Execution Context Pass for Improved Functionality*
- Implementing execution context pass as a solution to the reference hole problem.
- Clarifying the significance of passing the context and the resulting improvement in functionality.
- Emphasizing the importance of understanding execution context in interviews and real-world scenarios.
Made with HARPA AI
Congratulations sir for 150K subscribers...You deserve much more than that!...
Kuch teachers ke aawaj se unko padhna achha lagta hai. You are one of them Sir..
best example for ecplanation of , what is call in js. Thanks sir
Watch almost 2 playlist before that, but never ever learn new thing that way. Thank you Sir.
one of the best series of JAVASCRIPT in TH-cam 👍, the way of explanation is very good . Thanks for making such great videos for us
Very good explanation of the call, and amazing teaching style.
The way you explains sir, that definitely came from years of experience. I used to move from one video to other to understand topics. But now found gem, no need to go anywhere else. Aapke samjhane se sab samajh aa jata h😊
Great effort sir. This is one of the tricky ones , which you explained very well. I was always wondering why we need call/apply/bind, as we can call a function directly with its name. The only difference is, via call/apply/bind we can set our current context (optionally can send our parameters) , which we cant do via normal function call. But, now i understood, under the hood its the function execution context which play a vital role when there is function inside another function.
12:20, Also run with a call back function to see if the 'this' for the callback does something different
Ekdum badiya explain bhiya ,dimag me hi call stack console.log ho gya !!
01:37 Understanding execution context and 'this' keyword in JavaScript
03:17 Understanding the execution context in JavaScript functions
05:01 Explanation of setting usernames and creating users using JavaScript functions
06:45 Understanding execution context in JavaScript
08:28 Explaining the concept of object substitution and its implications
09:56 Managing execution context in JavaScript
[Removing execution context will cause all declared variables to disappear
To keep a reference of the execution context, use the "CALL" Method]
11:24 Discussing the use of 'this' in different scenarios and its implications
I am addicted to Sir Hitesh Lectures, top notch quality available for free
Such good demonstration of call and this. Diagrammatic illustration makes the understanding concrete.
Thanks sir jii ❤ your content and the way you explain is osm . You made js to easy to learn
Thanks ❤️
Thankyou for this amazing series
sir you have explained it very easily, thank you
Love this JAVASCRIPT series.... Love you Hitesh Sir.....🙏🙏🙏🙏
Amazing explanation! Thank you sir.
yes!
best Series ALL OVER THE UNIVERSE, thank you Sir 🙏
kar liya subscribe sir ji. Sir your teaching style is awesome, I really like it. Thank you for your effort.
Keep watching
sir i'm in love with your teaching style can't express how good I'm feeling to find this channal 🥺
Truly❤
A man of commitment 👌🏼👌🏼🙏🏽🙏🏽🙏🏽
Awesome Explanation, Hitesh ji.
Mind blowing classes💕
Amazing explanation! Thank you sir.
Really, very informative video....
Thank you so much
Dhanayavad Guru G🚩✌
one of the best series in youtube sir your efforts hats off👍
There is a doubt in my mind. This call function is okay, like we can use call to use the reference of other function's execution context. But when we use "this" keyword in the function which is called by the call method then it will always access the other function's execution context, what if I also want to refer to my context.
Eg: What if I want a variable named as "username" (whose context refers to its parent function only) in the mentioned example's SetUsername method.
"this.username" always gives me context of createUser and append a new child always.
Hitesh Sir, Thanks 🙏
The best dialogue of complete series "Kaun sa interview nahi nikalne wala, yahi se nikalwayenge"
Sir ise speed se aaj hi complete krwa doge Javascript ko 😂😂😂😂 Thnx sir ise derailed course lane ke liye 🙇🙇🙇🙇
Detailed*
i love your teaching sir thanks a lot
Just amazing explanation.. Huge respect, sir
really like your lectures sir.baht maja aatahe jab appse padhneko milta he , i love you sir.
thanks a lot for the real world examples that is best thing about your videos
Superb sir, thanks for the video ❤
what is wrong with passing the context through arguement??
function setName(ctx, name){
ctx.username = name;
}
function createUser(name, email){
setName(this, name);
this.email = email;
}
because it is not the write way to do it:-
you can declare createUser as constructor so that this refer to the new instance of an object.
const user = new CreateUser ('yourname', 'yourmailid' );
you misunderstood 'this' keywrd with variable. 'ctx' you used is avariable passed as argument. both are completely different bro
Sir maja aagya.. ye huwina baat..topics sab cover horahehy... soon react is on the way
Call is by default then ... closure na 11:03
itna toh chai bhi ni piya hoga jitna chai word sun chuka hun lectures me....😆😆
Ji ha yahi se niklenge sare interviews
Thank you sir ❤🙏
I followed a channel to learn DSA but I left because he is always making videos 1hour or for no use and concentrating on his watch time. but you are the perfect, literally very nice series in less time. I am requesting for DSA series also.
Superb sir, thanks the video ❤
Definitely i didn't watch previous videos but it looks like U are on fire bhaiya...❤❤❤
Thanks a ton
"Chai aur Code, your videos are like a friend guiding me through the fascinating world of JavaScript!"
Thanks A Lot Sir ❤❤
Deep understanding
khub bhaloo explaination sir...
one of the best couses ever
Mera ek question hAY: HTML,CSS,PHP,JS,MYSQL YEH SAB SIKH KAR KYA iot RELATED PROFESSIONAL LEVEL CODE KAR PAUNGA, YA ISMAY BHI AUR BAHUT KUCH SECURITY LOOP HOLS, SCALABALITY ISSUE AYEGA?
G.O.A.T Hitesh sir ❤
masterpiece series
very well explained sir
software expert Hitesh Choudhary 😅
Thankyou Sir 😀❤
thanks ji
another masterpiece of a video explanation❤
Thanks a lot 🙏🏻❤
Loved it sir 💖
at 12:00 what if i use return from SetUsername function and hold it in a variable in Createuser function??
Gratitude Sirji ❤❤❤
smaj me to aa geya hai subscrib to hum ne phle se hi ker rkha hai, ab to bess like ki daree thi wo bhi ker diya hai :)
aap bus content le ker aaty jaye like and share ki chinta chood hi do aap wo to hum aap ke bina khay bhi ker dengay !!
kya kery kerna pedta hai content hi etna jada acha hai ki, button like per jaye bina rukta hi nhi :) (:
Your hindi😍, i loved it
Nice Explanation
Thank You Sir ❤❤
Theme konsy use kar rahy hai
awesome explanation sir
Hello sir playlist me 43 no. ka video nahi dikh raha hai prototype ka
Thanks, add kr diya h
hello sir but ye sab use kahan hoga? sab upar se jata hai
Thank you very very much sir Ji
quality content❤
Amaziiinnnnngggggggggggg Explaination
Bohat Alla😍
Maja aagya❤❤❤
this is similar to prototypal inheritance
Another Masterpiece ❤
nice explanation
Like for a tea ☕
Learnt call, when on a call 😂🔥
Lovin the series!
hbaiya apka experience apki teaching m proper kam ata nazar ata hai
love you sir!
Great explanation, Sir. ❤
In the starting i am not interested in your series...bcoz I thik you are same as other ...but after watch your your function vidio . I follow your js series without time wasting and explore all channels.... your series. #justlikeafire🔥🔥 on TH-cam
yes!
Hi Hitesh, could you please explain how this keyword is related to arrow functions?
check out lecture 23 on this and arrow function 🎉
thankyouuuuuu so much sirrrrrrrrrr
Sir theme Konsi hai???
Thank you so much sir
Thank You Sir
love and respect for you sir
awesome you explain
How I learn spoke English like you tell me
Dhanyawad guruji 🙏
Mera naam sameer hai me 16 saal ka hu from uttarakhand, Roorkee. mere paas aik startup idea hai ( ye idea bahut hi badi problem ka solution hai jo problem mene khud face ki hai ) jise me business me execute karna chahta hu mene revenue model or startup business me kaise execute hoga sab kuch tayar kr liya hai bs mujhe aap jaise mentor or investor ki jaroorat hai. Please support me aapke aik chote se action se meri poori life change ho jayegi.
Thank you ❤
important interview question