Thank you Hitesh Sir for teaching such deep concepts and history of JS coding. Still hard to believe that we are getting this for free. I've done courses on Udemy, but nothing compares to your amazing videos! ❤
If someone is confused here is the summary , since we are calling this.handleClick and this here is button as console.log(this) gives , so button do not have handleClick access (that's why its coming as undefined ) , so we have to explicit bind this to the class context (Which is React) to get the access. Hope it is clear😀
Indeed! We humans always tend to take things for free for granted. But here, let's not do that. He's putting his precious time and efforts just to teach us so that we may get a job. Let's share his videos everytime we see it in the feed!
I found an Interesting concept regarding 'this' that it does not overrides the content of 'this' in callback function:- In JavaScript, the bind() method creates a new function that, when invoked, has its this value explicitly set to the value provided as an argument to bind(). It doesn't override this in the original function; rather, it creates a new function with a bound context.
thanky sir , cheeje bhale kaam main aaye na aaye per unki knowledge honi bhut jaruri hai , aapka bhut bhut dhanywad ki aap ne itna achaa course banaya , warna past ka pata nhi or future ko define karne chale , isse lagata hai ki past ki knowledge hona bhut hona aawayasak hai , danywad ,
00:02 Introduction to the early days of React 01:28 Learning JavaScript basics for free on RUclips. 02:51 Discussing the creation and functionality of a class in React 04:31 Creating and handling button click events in JavaScript 05:57 Adding event listeners and handling button click events in JavaScript 07:26 Understanding button references and React methods 08:53 Explaining the use of 'BIND' keyword in JavaScript 10:19 Access to libraries and functions inside React
your javascript course is far beyond the bound, its fire, have never seen anyone in my life to share this much of detail in one course, that also free ❤🔥❤🔥
Sir I find ur Js series as the best in YT. Your tutorials gives insights of the topics which are not discussed much by others . Lots of love and respect for ur hard work for helping us out by sharing ur knowledge ❤😄
Thank you Hitesh Sir for teaching such concepts with simplified explanation along with JS history. I have not seen any paid or free content so far, that can touch your way of teaching
"In simple terms: Without the bind method, an event listener only has access to the context (or this) of the element that triggers the event (like a button in this case). So, in your example, the handleClick event listener only has the button's context (this refers to the button itself). Using the bind method, we can set the this context to a different object, allowing us to access the context where the event listener was created, not just the button's context."
Hello Sir 😘, ur tutorials hv been an invaluable resource 4 me n many others who r eager 2 learn n expand our knowledge. Ur teaching style is not only engaging but also incredibly effective. U've a unique talent 4 breaking down complex concepts into easily understandable parts, which has made learning so much more accessible. Thank You for Being an Amazing RUclips Tutor 🙌
best tutorial on JavaScript ever exist on earth. I think after spending a big amount of money for learning JavaScript, that also not comparable or even close to these tutorial. Thank You sir..! kudos...... like please everyone
I really appreciate and love your work ❤. Jitna aapne deep mein jakar padhaya hai, utna to koi soch bhi nahi padhane ka. Aapke wajah se hee mere jaise developer aspirant ko umeed ki roshani dikhati hai . Thank you sooooooo much Hitesh bhaiya ❤
Thank you so much Histesh sir. The concepts you teach are very deep and understandable. Nobody teaches concepts this well for free. Thank you so much for delivering such high quality content with your hard working efforts.
I usually quit things when i get bored but sir apke efforts hme bhi boost kr rhe hy! Thank you so much for your endless efforts and with your kind smile! God Bless You Sir!!
Hitesh sir best teacher in my view koi koi yhi java script 10000 NRI se pd rha ha aur koi koi koi koi yhi java script 25000 NRI se pd rha ha aur koi lkhao dekr kisi me itna clear or basic stand ni jo ki sirf HITESH Sir me ha Big Fan of HITESH sir
document .querySelector('button') .addEventListener('click', () => this.handleClick.call(this)); If we use call like this then it'll also work. I was so much consued about it and researched so much about bind and call. I almost got the clarity but i am still little bit confused but it's ok... 🤧🤧🤧🤧
But, did you notice that if the button is clicked, it does nothing when "call" is used. Also, the button need not be clicked to produce that output that you are getting. It is because, the function this.handleClick.call(this) is not passed as reference as we have seen in the case of "bind". It is immediately gets executed as the constructor is called (how constructor is called -> when page reloads). Whereas, bind method just produces the reference for function to be called later point of time by binding this to the passed argument to the bind function. That is why, as soon as the page reloads it prints the same output as this.handleClick.bind(this). Button has no reference to execute a function. Basically it has undefined. addEventListener also doesn't generate error as it got undefined (return value of handleClick()).
@@pratiksingh23 bro, using call like this just works exact same as bind. And my code is working properly and button as well. Because using call() immediately executes the function that is why I have wrapped it in another arrow function, so that it doesn't get's executed immediately as we load it into the browser. If you don't wrap this .call() method like I did, only then it will create such problem that you mentioned. If you want to pass that function as reference and also you don't want to use bind. You can write it this way: "()=>{this.handleClick.call(this)}" It works just same as using bind like this: "this.handleClick.bind(this)" At the end of the day it depends on your choice what syntax you prefer. But obviously bind is more commonly used in even handling so if you want your code to maintain some industrial standards then you'll have to follow the preferred way. Hope it gives clarity! Thanks! 😊❤️
@@pratiksingh23bro, using call like this just works exact same as bind. And my code is working properly and button as well. Because using call() immediately executes the function that is why I have wrapped it in another arrow function, so that it doesn't get's executed immediately as we load it into the browser. If you don't wrap this .call() method like I did, only then it will create such problem that you mentioned. If you want to pass that function as reference and also you don't want to use bind. You can write it this way: "()=>{this.handleClick.call(this)}" It works just same as using bind like this: "this.handleClick.bind(this)" At the end of the day it depends on your choice what syntax you prefer. But obviously bind is more commonly used in even handling so if you want your code to maintain some industrial standards then you'll have to follow the preferred way. Hope it gives clarity! Thanks! 😊❤️
You are the best teacher who provide all the paid content for free. Even the paid content doesn't provide so Deep knowledge as they only want to sell more and more courses. 🔥🔥🔥
In the line "this.handleClick.bind(this)" the first 'this' refers to the React class as the function 'handleClick' is in the React class and the function reference in the event listener is also being written in the React class. The 'this' parameter in the bind method also refers to the context of React class as it will be used by 'handleClick' method to log out the server property of React class. Is this right?!?
Sir is Wale topic PE to bahut hi maja agye ❤❤❤ Sir apse padhkr to js ke concept pehle se hi dimaag mein chal rha hai GOLDEN GEM hai app js ke thanku so much sir ❤❤❤😊😊
Thank you, Hitesh sir, for your invaluable insights and deep understanding of JavaScript. Your expertise has been instrumental in enhancing my understanding of this language and has truly empowered me to become a more proficient developer. Your passion for sharing knowledge is inspiring, and I am incredibly grateful for the guidance you provide. Here's to continued learning and growth together.
just for comment purpose {If someone is confused here is the summary , since we are calling this.handleClick and this here is button as console.log(this) gives , so button do not have handleClick access (that's why its coming as undefined ) , so we have to explicit bind this to the class context (Which is React) to get the access.}
one doubt sir, actually in line 20 of ur code, while giving handleClicked refrence, why we didn't put parenthesis while calling like document .querySelector('button') .addEventListener('click',()=>{ this.handleClicked() //--> without using bind, able to get the value. })
Thank you Hitesh Sir for teaching such deep concepts and history of JS coding. Still hard to believe that we are getting this for free. I've done courses on Udemy, but nothing compares to your amazing videos! ❤
can u please explain the concept in english
The day I will get a job...I am gonna share small stake of my salary with those youtubers who taught me programming and Hitesh Bhaiya is one of them.
Wow 🙏
He don't wany your money , but the thing he may appreciate, which you can give is by achieving your goal and helping others to achieve their goal ❤
Broo I have the same motive too . Let's go 😊
Same
What happened brother!
Have you get the job?
Mind blowing. I could never imagine this deep down lies the use case of bind() in JS and erstwhile React
If someone is confused here is the summary , since we are calling this.handleClick and this here is button as console.log(this) gives , so button do not have handleClick access (that's why its coming as undefined ) , so we have to explicit bind this to the class context (Which is React) to get the access.
Hope it is clear😀
Indeed! We humans always tend to take things for free for granted. But here, let's not do that. He's putting his precious time and efforts just to teach us so that we may get a job. Let's share his videos everytime we see it in the feed!
I found an Interesting concept regarding 'this' that it does not overrides the content of 'this' in callback function:-
In JavaScript, the bind() method creates a new function that, when invoked, has its this value explicitly set to the value provided as an argument to bind(). It doesn't override this in the original function; rather, it creates a new function with a bound context.
Thankyou Sir for such useful content for free on youtube...Really appreciate your work. Please keep it up.
I'm 100% sure this is the best series of JavaScript on RUclips. Love you sir videos nhi rukhne chahiye or chai banti rehani chahiye
Thank you Hitesh and the whole team behind this beautiful JS course.
Best course of JS, No one teaches this much of depth. Thanks for the effort you have made.
thanky sir , cheeje bhale kaam main aaye na aaye per unki knowledge honi bhut jaruri hai , aapka bhut bhut dhanywad ki aap ne itna achaa course banaya , warna past ka pata nhi or future ko define karne chale , isse lagata hai ki past ki knowledge hona bhut hona aawayasak hai , danywad ,
00:02 Introduction to the early days of React
01:28 Learning JavaScript basics for free on RUclips.
02:51 Discussing the creation and functionality of a class in React
04:31 Creating and handling button click events in JavaScript
05:57 Adding event listeners and handling button click events in JavaScript
07:26 Understanding button references and React methods
08:53 Explaining the use of 'BIND' keyword in JavaScript
10:19 Access to libraries and functions inside React
your javascript course is far beyond the bound, its fire, have never seen anyone in my life to share this much of detail in one course, that also free ❤🔥❤🔥
Sir I find ur Js series as the best in YT. Your tutorials gives insights of the topics which are not discussed much by others .
Lots of love and respect for ur hard work for helping us out by sharing ur knowledge
❤😄
Thankyou Hitesh sir I got new things best teaching about javascript learned much cj's concepts easily 🎉
Thank you Hitesh Sir for teaching such concepts with simplified explanation along with JS history. I have not seen any paid or free content so far, that can touch your way of teaching
Love you sensei 🙏 kabhi socha nehi tha free me bhi itna quality content mil sakta hain hats off sir
Overwhelmed by the quality ..thanx alot.
"In simple terms:
Without the bind method, an event listener only has access to the context (or this) of the element that triggers the event (like a button in this case). So, in your example, the handleClick event listener only has the button's context (this refers to the button itself).
Using the bind method, we can set the this context to a different object, allowing us to access the context where the event listener was created, not just the button's context."
shandar shandar lectures
behtareen series
behtareen video
Hello Sir 😘, ur tutorials hv been an invaluable resource 4 me n many others who r eager 2 learn n expand our knowledge. Ur teaching style is not only engaging but also incredibly effective. U've a unique talent 4 breaking down complex concepts into easily understandable parts, which has made learning so much more accessible.
Thank You for Being an Amazing RUclips Tutor 🙌
bahut bahut dhanyavaad sir aapke efforts ke liye!
Best series to learn about JavaScript in depth.
We appreciate your efforts sir 🙏
best tutorial on JavaScript ever exist on earth. I think after spending a big amount of money for learning JavaScript, that also not comparable or even close to these tutorial.
Thank You sir..!
kudos......
like please everyone
Thanks a lot for the insightful javascript series on RUclips! It has been incredibly helpful in enhancing my understanding of the language.
Thanks Bhai aap ne bohat acha samjaya bind function. U r the inspiration to me as a teacher and role model
Sir aapke iss prem ko kabhi nahi bhul paunga.
I really appreciate and love your work ❤. Jitna aapne deep mein jakar padhaya hai, utna to koi soch bhi nahi padhane ka. Aapke wajah se hee mere jaise developer aspirant ko umeed ki roshani dikhati hai .
Thank you sooooooo much Hitesh bhaiya ❤
Loved this series.
Very much appreciated sir❤️
Sir apke prem prem ke chakr me ye series maine 3 bar dekh dali😁
bhut bbadhiya series h , keep it uppppppppp :) so im learning JS because i have to create project , bythway you are so grearfull ,
Easy to understand Hitesh sir, thank you for sharing
Thankyou so much , it is the best javascript series in the history of mankind❤❤❤
Thank you so much Histesh sir. The concepts you teach are very deep and understandable. Nobody teaches concepts this well for free. Thank you so much for delivering such high quality content with your hard working efforts.
I usually quit things when i get bored but sir apke efforts hme bhi boost kr rhe hy! Thank you so much for your endless efforts and with your kind smile! God Bless You Sir!!
"Love the perfect blend of tech and tea on Chai aur Code! Engaging content and soothing vibes make it my go-to channel. Keep brewing knowledge!"
hats off to your dedication hitesh sir
Thanks a lot sir. Chai k sath javaScript ka under the hood behaviour or khi dekhne ko ni milta sirf yaha milta hai
Hitesh sir best teacher in my view
koi koi yhi java script 10000 NRI se pd rha ha
aur koi koi
koi koi yhi java script 25000 NRI se pd rha ha
aur koi lkhao dekr kisi me itna clear or basic stand ni jo ki sirf HITESH Sir me ha
Big Fan of HITESH sir
Such a sweet guy! 1:46
Keep the good work going Hitesh sir💪
document
.querySelector('button')
.addEventListener('click', () => this.handleClick.call(this));
If we use call like this then it'll also work. I was so much consued about it and researched so much about bind and call. I almost got the clarity but i am still little bit confused but it's ok... 🤧🤧🤧🤧
But, did you notice that if the button is clicked, it does nothing when "call" is used. Also, the button need not be clicked to produce that output that you are getting.
It is because, the function this.handleClick.call(this) is not passed as reference as we have seen in the case of "bind". It is immediately gets executed as the constructor is called (how constructor is called -> when page reloads).
Whereas, bind method just produces the reference for function to be called later point of time by binding this to the passed argument to the bind function.
That is why, as soon as the page reloads it prints the same output as this.handleClick.bind(this).
Button has no reference to execute a function. Basically it has undefined. addEventListener also doesn't generate error as it got undefined (return value of handleClick()).
@@pratiksingh23 bro, using call like this just works exact same as bind. And my code is working properly and button as well.
Because using call() immediately executes the function that is why I have wrapped it in another arrow function, so that it doesn't get's executed immediately as we load it into the browser. If you don't wrap this .call() method like I did, only then it will create such problem that you mentioned.
If you want to pass that function as reference and also you don't want to use bind. You can write it this way:
"()=>{this.handleClick.call(this)}"
It works just same as using bind like this: "this.handleClick.bind(this)"
At the end of the day it depends on your choice what syntax you prefer. But obviously bind is more commonly used in even handling so if you want your code to maintain some industrial standards then you'll have to follow the preferred way.
Hope it gives clarity! Thanks! 😊❤️
@@pratiksingh23bro, using call like this just works exact same as bind. And my code is working properly and button as well.
Because using call() immediately executes the function that is why I have wrapped it in another arrow function, so that it doesn't get's executed immediately as we load it into the browser. If you don't wrap this .call() method like I did, only then it will create such problem that you mentioned.
If you want to pass that function as reference and also you don't want to use bind. You can write it this way:
"()=>{this.handleClick.call(this)}"
It works just same as using bind like this: "this.handleClick.bind(this)"
At the end of the day it depends on your choice what syntax you prefer. But obviously bind is more commonly used in even handling so if you want your code to maintain some industrial standards then you'll have to follow the preferred way.
Hope it gives clarity! Thanks! 😊❤️
Thanks sir jii ❤🔥 your efforts are priceless ✌ such a deep content you are giving free. What a man you are sir jii
Bhai next level No comparison
Thank you very much sir chai ke sath☕
best Series ALL OVER THE UNIVERSE, thank you Sir 🙏
You are the best teacher who provide all the paid content for free. Even the paid content doesn't provide so Deep knowledge as they only want to sell more and more courses. 🔥🔥🔥
Sir u are the best teacher
love you sir :) Watching your series from Germany
"Chai aur Code, you're the mentor I wish I had when I started learning JavaScript. Incredible job!"
thank you sir for that much detailed knowledge...
In the line "this.handleClick.bind(this)" the first 'this' refers to the React class as the function 'handleClick' is in the React class and the function reference in the event listener is also being written in the React class. The 'this' parameter in the bind method also refers to the context of React class as it will be used by 'handleClick' method to log out the server property of React class. Is this right?!?
Thanks for the series 😊
Best js course ever in decades
Sir is Wale topic PE to bahut hi maja agye
❤❤❤
Sir apse padhkr to js ke concept pehle se hi dimaag mein chal rha hai
GOLDEN GEM hai app js ke
thanku so much sir ❤❤❤😊😊
best video for bind sir..❤❤❤
Thank you, Hitesh sir, for your invaluable insights and deep understanding of JavaScript. Your expertise has been instrumental in enhancing my understanding of this language and has truly empowered me to become a more proficient developer. Your passion for sharing knowledge is inspiring, and I am incredibly grateful for the guidance you provide. Here's to continued learning and growth together.
its hard to believe that we are getting this beautiful detailed course for free.
Sir your teaching is awesome
10:45 witty humble bragging
Thanks for these videos
😎😁😂
thanks ji
Thank you for this great series 👍
apka bohot bohot dhanyavad sir , appreciate a lot
Much value provided Sirji....
1:47 Appreciated ☺
thank you sir
sir bohut hi help mil rahi he thanks. please sir raect native pe bhi ek playlist bana dijiye.💗💗💗💗💗
just for comment purpose {If someone is confused here is the summary , since we are calling this.handleClick and this here is button as console.log(this) gives , so button do not have handleClick access (that's why its coming as undefined ) , so we have to explicit bind this to the class context (Which is React) to get the access.}
god level teaching!!!!!.
thank you so much sir for this playlist
love this Series
1:46 - sir aap toh Bihar UP mode m chal gaye 🙂
But thank you so much sir. for this wonderful course.
Thanks sir for your kind afforts 💙💙
Thank you sir for this good lectures of js🥰
one doubt sir, actually in line 20 of ur code, while giving handleClicked refrence, why we didn't put parenthesis while calling like
document
.querySelector('button')
.addEventListener('click',()=>{
this.handleClicked() //--> without using bind, able to get the value.
})
Thank You SIr
Best js course on entire RUclips ❤❤❤
Thank you so much sir 💚
Thanks Hitesh Bhai for bringing informative video!
Thank you so much sir for these videos.
thankyou sir for the wonderful playlist
❤
i know sir you are doing a great work ....... #02:19
Hitesh Bhai is always the best
sir data structure b sikhaye takay achay code likh sakay hum
crystal clear explanation
Sir , you are great.
Thanks, sir ji.....I bow to thee, a crore crore times..
Sir kya bataun.. bas Love ho aap
Amazing content💖💖
east or west, sir ke courses are best
Best js tutorial thanku so much sir
yes it was very interesting topic.
Thank you sir 🙏❤️
content appreciation seh baad ke hai !!
Thank you guruji❤
superb explanation Sirji
Amazing playlist ha sir..
Appreciated sir
love you sir
"Hitesh sir 's JavaScript series is a goldmine of knowledge, transforming beginners into proficient developers! 💡 ''
Very much appreciated sir❤