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!
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😀
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
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! ❤
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.
Sir I am sure that no one can teach Js better than sir Hitesh , hats off to you sir , I followed your JS and now I am very confident in JS and can make the project which I want Thank you soo much
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
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
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 ❤😄
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 ,
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 ❤🔥❤🔥
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!!
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 ❤
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 🙌
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. 🔥🔥🔥
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
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.
We love you, Sir. We all know how much effort you put into making these videos. When I start earning, I will contribute a part of my income to you through this channel as a token of gratitude because your teaching has provided me with immense value in my life.
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.
00:02 ✦ Learning JavaScript basics for free on RUclips. 01:28 ✦ Discussing the creation and functionality of a class in React 02:51 ✦ Creating and handling button click events in JavaScript 04:31 ✦ Adding event listeners and handling button click events in JavaScript 05:57 ✦ Understanding button references and React methods 07:26 ✦ Explaining the use of 'without' keyword in JavaScript 08:53 ✦ Access to libraries and functions inside React
i like how arrow doesn't require .bind() beacuse of lexically inherits this from surround which is React in this case, hence: document.querySelector('button') .addEventListener('click', () => this.handleClick())
"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."
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 ❤❤❤😊😊
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?!?
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.}
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! 😊❤️
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. })
Sir when we are using bind it is getting the reference of this i.e all the properties defined inside the constructor but why the reference of the button is overwrite if button is calling then it will definitely show its reference
Mind blowing. I could never imagine this deep down lies the use case of bind() in JS and erstwhile React
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?
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!
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😀
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
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
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
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.
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.
10:45 witty humble bragging
Thanks for these videos
😎😁😂
Such a sweet guy! 1:46
Keep the good work going Hitesh sir💪
Sir I am sure that no one can teach Js better than sir Hitesh , hats off to you sir , I followed your JS and now I am very confident in JS and can make the project which I want
Thank you soo much
Thankyou Sir for such useful content for free on youtube...Really appreciate your work. Please keep it up.
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
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
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
❤😄
We appreciate your efforts sir 🙏
Thankyou Hitesh sir I got new things best teaching about javascript learned much cj's concepts easily 🎉
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 ,
Thank you so much for this amazing playlist.
I learned alot through this
🥰🥰🥰🥰🥰🥰
1:47 Appreciated ☺
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 ❤🔥❤🔥
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!!
Overwhelmed by the quality ..thanx alot.
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 ❤
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 🙌
Sir apke prem prem ke chakr me ye series maine 3 bar dekh dali😁
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. 🔥🔥🔥
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
Love you sensei 🙏 kabhi socha nehi tha free me bhi itna quality content mil sakta hain hats off 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.
We love you, Sir. We all know how much effort you put into making these videos. When I start earning, I will contribute a part of my income to you through this channel as a token of gratitude because your teaching has provided me with immense value in my life.
Thanks a lot for the insightful javascript series on RUclips! It has been incredibly helpful in enhancing my understanding of the language.
Best series to learn about JavaScript in depth.
hats off to your dedication hitesh sir
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.
its hard to believe that we are getting this beautiful detailed course for free.
Thankyou so much , it is the best javascript series in the history of mankind❤❤❤
shandar shandar lectures
behtareen series
behtareen video
"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!"
Thanks sir jii ❤🔥 your efforts are priceless ✌ such a deep content you are giving free. What a man you are sir jii
00:02
✦
Learning JavaScript basics for free on RUclips.
01:28
✦
Discussing the creation and functionality of a class in React
02:51
✦
Creating and handling button click events in JavaScript
04:31
✦
Adding event listeners and handling button click events in JavaScript
05:57
✦
Understanding button references and React methods
07:26
✦
Explaining the use of 'without' keyword in JavaScript
08:53
✦
Access to libraries and functions inside React
Loved this series.
Very much appreciated sir❤️
i like how arrow doesn't require .bind() beacuse of lexically inherits this from surround which is React in this case, hence:
document.querySelector('button')
.addEventListener('click', () => this.handleClick())
No sir, You are best youtuber for technical courses
bhut bbadhiya series h , keep it uppppppppp :) so im learning JS because i have to create project , bythway you are so grearfull ,
Sir aapke iss prem ko kabhi nahi bhul paunga.
"Chai aur Code, you're the mentor I wish I had when I started learning JavaScript. Incredible job!"
Thanks a lot sir. Chai k sath javaScript ka under the hood behaviour or khi dekhne ko ni milta sirf yaha milta hai
Best js course ever in decades
"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."
Sir u are the best teacher
Thanks Bhai aap ne bohat acha samjaya bind function. U r the inspiration to me as a teacher and role model
Thank you so much sir 💚
Easy to understand Hitesh sir, thank you for sharing
Thank you so much sir for these videos.
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..❤❤❤
love you sir :) Watching your series from Germany
Thanks for the series 😊
Bhai next level No comparison
Thanks, sir ji.....I bow to thee, a crore crore times..
east or west, sir ke courses are best
best Series ALL OVER THE UNIVERSE, thank you Sir 🙏
1:46 - sir aap toh Bihar UP mode m chal gaye 🙂
But thank you so much sir. for this wonderful course.
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?!?
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.}
bahut bahut dhanyavaad sir aapke efforts ke liye!
i know sir you are doing a great work ....... #02:19
Thank you for this great series 👍
god level teaching!!!!!.
Best js course on entire RUclips ❤❤❤
Thank you sir 🙏❤️
thank you sir
Osm❤
Sir your teaching is awesome
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! 😊❤️
Amazing content💖💖
thanks ji
sir bohut hi help mil rahi he thanks. please sir raect native pe bhi ek playlist bana dijiye.💗💗💗💗💗
Thanks sir for your kind afforts 💙💙
Thank You SIr
thank you sir for that much detailed knowledge...
Hitesh Bhai is always the best
Thank you very much sir chai ke sath☕
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 for this good lectures of js🥰
sir data structure b sikhaye takay achay code likh sakay hum
Much value provided Sirji....
apka bohot bohot dhanyavad sir , appreciate a lot
love this Series
1:46 I'll never gonna forget you ❤
Thanks Hitesh Bhai for bringing informative video!
crystal clear explanation
from lacture 1 to here .................😍
thankyou sir for the wonderful playlist
❤
Sir when we are using bind it is getting the reference of this i.e all the properties defined inside the constructor but why the reference of the button is overwrite if button is calling then it will definitely show its reference
"Hitesh sir 's JavaScript series is a goldmine of knowledge, transforming beginners into proficient developers! 💡 ''
Very much appreciated sir❤