Callback Functions in JS ft. Event Listeners đ„| Namaste JavaScript Ep. 14
VloĆŸit
- Äas pĆidĂĄn 28. 06. 2024
- What are Callback Functions in JavaScript? How does Event Listeners work? What does Blocking the Main thread means? This tutorial video answers all your doubts about Callbacks with proper code examples and demo using the developer tools in the browser.
This video covers in depth about Callbacks, Advantages of using Callback functions. This knowledge will be very helpful for understanding the Event Loop and how JavaScripts works asynchronously.
The only request is to watch this Episode of Namaste JavaScript with full attention. đ
My tech gear I use every day - google.peek.link/2pba
Timestamps:
00:00 - Introduction
00:55 - What is a Callback Function in JavaScript?
01:20 - Advantages of Callback
06:21 - Callback - dev tools Demo in browser
08:18 - Blocking Main Thread in JavaScript
10:18 - Creating an Event Listeners in JavaScript
13:30 - Closures along with Event Listeners
19:25 - Garbage Collection & remove Event Listeners
21:59 - Teaser of the next video
22:43 - Thank you for watching Namaste JavaScript đ
Support this video series, NOT BY MONEY, but by sharing it with your friends. đ
I'll give my best to come up with great content and everything absolutely for free on CZcams. đ
If you are active on Social Media,
please give a shoutout to Namaste JavaScript and help me reach more people. đ
Cheers,
Akshay Saini
akshaysaini.in
Would love to Stay Connected with you â€ïž
LinkedIn - / akshaymarch7
Instagram - / akshaymarch7
Twitter - / akshaymarch7
Facebook - / akshaymarch7
#NamasteJS #AkshaySaini
cleared 12 LPA package interviews having just 1 year exp. just because of you brother . Hats off
Hii i have learnt HTML, CSS, data structure and Algorithm now learning JAVASCRIPT. Can you suggest me what should i learn after this?? And how to apply for a job??
What was your previous package that you got so much hike ?
Tech stack and company??
ââ@@mrityunjaysharma learn Node Js for backend With express Js, And Learn React and Next js For Front end you can Go with Angular Just see whats the demand in market or whats suitable for you nowadays react is popular and there is demand. s Angular most of the cases pays more salary then cause its little more diffuclt. ....Then Leaen Intermediate level of CI CD Git and github...All set..!
@@mrityunjaysharma after learning that what u doing now bro i going same like u now, u got jobs and what u did help me out
my colleague from USA showed me this playlist, can see how much people learn from you, love you man you made my life so easy
May I know the clg name or you lying to promote this channel?
@@abhishekkashyap8856 i don't need to prove you anything, stop being a Beta male you poor thing đ€Ł
Chal jhutey
@@abhishekkashyap8856 kaha se laate ho hate bhai ? Agar channel nahi pasand to mat dekho but hate mat failao
@@AryanGNU aisi kon si hate fala di maine. Ye chutiyapa hum se nahi dekha jata. Real life scenario alag hote hai
How was this video? Let me know in the comments below, I read each and every comment! â€ïž
Next Video: EVENT LOOP & Asynchronous JS đ„ - czcams.com/video/8zKuNo4ay8E/video.html
Waiting new one after event loop
It is a visual treat to see how javascript works on the dev tools.
Great video đ
Not only this one, but each of your video is very helpful Akshay. Also please accept my LinkedIn request :D
Bro just tell me how to get a job after I learned this thing
Things learned:
1. Function that is passed on as argument to another function is called callback function.
2. setTimeout helps turn JS which is sinhlethreaded and synchronous into asynchronous.
3. Event listeners can also invoke closures with scope.
4. Event listeners consume a lot of memory which can potentially slow down the website therefore it is good practice to remove if it is not used.
setTimeout does not help to convert from sync to async. setTimeout itself is async operation. He used it to mock a api call.
@@chethanprabhu4475 Thanks for telling
@@chethanprabhu4475 callback provide the power of async to setTimeout
@@jagrutsharma9150 you can edit your comment
ah setTimeout. My favorite function in JS đ
Happiness is when I actually do remember previous concepts when Akshay asks remember, remember.... remeeeeember :D . Long live Javascript and Akshay.
Same Pinch :)
I liked the part where you used devtool to show how callback works. It's like proving the theory through practice. I am waiting for the videos on the event loop.
I would suggest you to play in your devtools, it's super fun to see things working! â€ïž
@@akshaymarch7 Can made one video about your Namaste react., I am new for frontend
This is the best series for JavaScript ever! I haven't come across any other video media which covers these topics in such depth.
You rule man!!
Watching the whole Namaste JavaScript tutorials in sequence , its a beautiful tutorial. You have done really very good R&D to make each videos. Thanks for such a beautiful and useful tutorial.
watching your videos is like watching my favorite tv shows, I just can't stop. Thanks Akshay! You have so much talent in expressing things clearly!
Yes, waiting for event loop, All your videos are like connecting missing link while learning JavaScript. Really appreciate your efforts and thanks
@Akshay I'm working as Web Developer from one year, I have struggled so much to understand these basic concepts. I have referred to many courses in udemy with 50 hours+ lectures, but none explained this way. Like a Netflix series I got addicted to your explanations and I think I will never forget these concepts in my entire life!!
Thanks a lot Akshay, I kindly request please make more videos like this just in JavaScript!!
I will recommend only 'Namaste JavaScript' to everyone from now on!!
May God bless you!
Thanks for all your help!âș
hello angel..give yur num
Brother, you are amazing!!! I can't wait to learn Event Loops from you. Although I already have a quite clear idea of it still I feel like your teaching it will be next-level enlightenment. Kudos to you, man!
You're great man. Clear. Energetic and knowledgeable. All the best qualities of an instructor. Thank you!
The effort from you to explain things with so much perfection is so real. Fortunate to find your channel on CZcams :)
Your Video Lectures are really really helpful, the way you have explained "Closures", ''Callbacks", "Call Stack and How Synchronous and Asynchronous Thread Executes" everything is top class.
You are the first one I'd watch his long videos without being bored or blinking.
After watching this series, I Can confidently say that I know JavaScript. Thank you Akshay, you are great đ
The explanation of Devtools was just superb, mind blowing and extra-ordinary!!.. Now Event listeners will never get detached from our HEAD.. đđđ
this concept of explaining everything through dev tools is awesooooome.
It was brilliant to watch the whole set of Namaste JS tutorials and this has given me a lot of confidence as a developer. Akshay has just lit this journey by explaining concepts by coding and in real time, which I wonder no tutorials would do. Just waiting for your upcoming videos and until then I shall play around with JS !!đđ
Don't skip ads on such a true quality content.
Please never stop creating content. I watch all of your ads and tell all of my colleagues about you... just to support your channel.
Very Excited for the event loop video. The dev tools explanation is the best since we donât have to guess what would be happening but we can see exactly whatâs happening.
Excellent explanation. Didn't see this type of deep explanation with the actual working with example before in any paid courses which this guy is providing free of cost đ„đ„
Understood callback in great detail đ.
First example explained with stack built solid foundation & made easy to understand rest.
Very excited for event loop.
Thank you đ
This series is really helping me to clear my all Javascript concepts
This is my second time going through the whole playlist, it's still gold
I searched the entire internet universe to find a perfect explanation and found it here. Thanks.
Your efforts in every video never go in vain. To see everything in the dev tools is just amazing. Its like seeing what's going on under the hood and it does make everything crystal clear. Keep explaining like this đđ .... waiting for the event loop video đžâšđđ Thank you for all your efforts!! đ
Thankyou so much! I'm noting it all down, making notes so as to revise them in future ! Can't believe this content is free !!
Fantastic, that's exactly my way of learning! đ„
Is it possible for you to you share your notes. I would really appreciate your efforts and dedication. Thank you in advance đđ
my email: mohit96nain@gmail.com
I would love to refer to those notes Reeti. Could you please share it to shruthibabu2018@gmail.com
Thank you so much!
Same here Reeti, I would like to read your notes for interview reference. Please send them to krunalumak25@gmail.com
Or we can have a google doc, interested people can add notes there
Can you please add them in Google docs and add us?
One day i just randomly texted a guy on discord and straight way he suggested your video playlist. As a beginner i should say that no one had made me this clear and by clear i mean crystal thanks Akshay â€ïžđ
Man you are really one of the best tutor I have ever come acrossđđđ Anything in JavaScript if I'm not able to understand... I just simply watch your video and it really gets embedded into my head. Nice work brođđ»đđ»
I think after watching all your videos, I can crack all interview of my dreams company #apple #Facebook #Microsoft #Google ...these 5 company is my dream..... great learning stuff's
I wish I had a teacher like you in my graduationsđŁ but koi baat ni der aae durust aaeđ beautifully explainedđ thank you so muchđ
Before this video, I don't know how eventlisteners work.
But now, I know event listeners and their work.
Thank you.
And I am so excited about upcoming videos.
The best content out there for js. Hands-down.
So, Akshay looking for a bride
In which language do you code?
She: C++
Akshay: Hmmmm
She(2): Java
Akshay: Hmmmm
She(3) :Python
Akshay: get out
She(4): Javascript
Akshay: Maaaaaaaaa Bahu mil gayiiiiii
Hahaha, this gave me a good laugh!! â€ïž
Lol. Always better to be language agnostic
Well after marriage she will get double the Salary. ;)
Main criteria ... She should know JavaScript. đ
@@urvishagreat she'll learn from Namaste đ JavaScript series đ
Yes Brother , we understand it very well and in practical way , thanks for this kind of deep dive to the topic + interview question explanation, even i was asked this question in interview too.
Can't for wait for event loop video. Let them keep coming really enjoying this series
This is the best explanation of callback i ever saw!!! really like the way you explain complex concepts in a easy way
This was yet another insane video. You really make sure we REMEMBER the concepts taught back. Just awaiting for next Event Loop video. â„ïžđŻ
This series is the best KT session I have ever attended. Thank you so much for all these videos.
All videos till now going Mind Blowing.... Best Ever way of teaching!
really boosting my confidence with every video..
This is a really good series. Learning some new things! Namaste :D
The way you explain things, I found it very easy to understand. Thanks for this tutorial. Hope to see more!!
Dev tools are the USP of your videos. They make us understand so many things happening under the hood of that V8 engine (pun intended). Your way of teaching is just fabulous.
It's a Treat to watch and learn from you.
I have been studying js for past 4 months... Thought I know js... But after seeing ur namste js series.. I think I am just a noob and donkey in js... I think I have to postpone or give up my interveiw which is on next Friday.. Throttling debouncing execution context etc.. I never heard about this in the CZcams tutorial which I prefer...ur doing a great job.. Just keep posting it regularly.. Has ur videos can only make many students placed ...
beautifully and masterfully explained my friend, probably one of the best explanations on all these concepts rolled into one video - great job. I'd wager this video has helped hundreds of thousands of trainee devs in solidifying their understanding on the aforementioned concepts.
Mostly I don't comment on videos, but your teaching style is just â€ïž, I understood each and every concept, thanks for making these tutorials, and hat's off to you for all this work
I've completed my master's in mechanical engineering, and after that, I planned to switch my career in the IT industry.
Yesterday, I cracked the first round of interviews for the position of front-end developer.
All the questions on JS were from your videos, and I can bet that the interviewer has also watched your Namaste Javascript series.
Bro how's your corporate Life going... I'm from civil background...can you tell me how many experience years you have now and how to get into it company..plz share your experience? Where are you now?
what is a call back function in java script ?
we already know that function are first class citizens in JavaScript.
that means we can take a function and pass it to another function.
when we a pass a function to another function, whatever the function that we are passing as an argument that we call it as call back function.
Example:-
function x(y) {
console.log("x");
y();
}
x(function y() {
console.log("y");
});
in the above example function y is the call back function to the function x.
in the above example it is up to function x on when it wants to execute function y, means in the code function y will get called by function x after some time, thatâs the reason we got the naming convention as call back function , these function will get called after a while back.
setTimeout(function a() {
console.log("Hi")
}, 5000)
in the above example function a() is the call back function to the function setTimeout.
these call back functions are very powerful in JavaScript.
it gives us access to the whole asynchronous world in a synchronous single threaded language.
JavaScript is a synchronous single threaded language. That means it can do one thing at a time in a single order.
but using call backs we can do asynchronous operation in JavaScript.
for example if any function or operation takes lot of time (may be 20 to 30 seconds),
and if we try to execute this function using main thread (JavaScript has only one main thread), then the JavaScript wonât be able to do any other things in these 20 to 30 seconds.
we should never block our main thread.
thatâs the reason we should always try to choose async operation which takes time.
without the concept of call back function we wonât be able to achieve async operation in JavaScript.
your explanation is very crystal clear. and the way you demonstrate in devtool is simply to the point. Thank you.
Whenever i see functions, I just love playing with them, Thanks to you.
Please Akshay sir please continue this series. It's been 1 year please sir continue it đđ»đđ»
Now youll get us out from callback hell. I have faith in you đ„łđ„łđ„ł
Akshay will give you a promise đ
I see what you did there
Just wondering where I'd have been if you were my Web Dev lecturer in college! Thanks a lot for this series, Akshay! I'll always be grateful to you! And I'm excited to watch your video about Event Loop đ
Thank you so much for explaining this concept in this video! My sir (teacher in a coding institute) recommended this course. And I came here just to revise callback functions but now I know much more than that! Thanks again, sir!
Word Wrap setting in Visual Studio Code might be helpful for you.
Very good video on call back function () ..can we get a video on callback() vs promises() vs asyn await () please
It's not only event loop video, I am always excited for any of your video Akshay.
Thanks for clearing out the concepts one more time. đâ„ïž
Mind blown by javascript, only because you explain in easy way!
Akshay , your videos are really helpful , thank you for sharing these with us and waiting for more. And one request , could you please create a video on callback hell and (call , apply , bind) methods of JS.
Call Apply Bind video is already there on my channel. Please check out the other playlist. đș
I needed this in reactjs closures behaviour is very different than used useCallback hook to solve this issue of denouncing bcoz needed to implement the denouncing but was unable to implement directly in React jsđ
Why don't you try to code it yourself, a great opportunity brother.!
@@akshaymarch7 i tried but for every render it create new instance of that closure function to keep reference to same function for every render i need to use useRef or useCallback hook
Really I have not seen such a practical,indepth n end to end explanation except Namasthe javascript series.........I wish to gain more and more knowledge from you
I have been working on JS for about 2 years, but never understood these concepts properly. Thank you so much Akshay bhaiya.
Life has so many questions. But one of the most important question that we all should ask is !
20:12
How does the eventListener on Js File and Inline html onClick event differs? Do they differ on Garbage collections?
Wow, amazing question. I would suggest you to open your devtools and try it out. Try to find out yourself, it will be super fun. â€ïžđ„
This is a very good question, I found this stack overflow link helpful. Posting it here so that others can get some info as well stackoverflow.com/questions/6348494/addeventlistener-vs-onclick
@@baibhavkumar6031 love this article. thanks
Working for 7-8 months using JS without knowing these things. This stuff is just amazing !!!
You teach the concepts so well. I like the way you keep linking one concept to another like execution context to call stack and call stack to closures. This not only helps me to better understand the new topic but also helps me in remembering the previous ones.
It really requires a lot of hard work to make videos with such amazing content along with your job.
A big fan of you sir â€đ
who are these people who give thumbs down ? Just Curious.
Probably they are Antiscripts(Antichrists)
Might be other JS channel people who come, learn, steal ideas and concepts and dislike...lol :)
When dealing with deeply nested async functions, I sometimes run into maximum call stack exceeded error. I read that async functions need to end with a return statement but still sometimes I end up with this issue. Appreciate if you could make a video on how to properly handle async functions to avoid this error. Thank you.
This is a great video nonetheless.
Bhai ke videos are like next episode of a blockbuster series where people wait eagerly for next episode
I am super excited for the event loop video. Great efforts Akshay. Every week I eagerly check for your channel for your videos. Thank you for your contribution to js community.đ
Akshay my friend , watching your videos from Israel and I must tell you , I paid a lot of money on courses that suppose to learn js but never passed the knowledge you passing in 30 min of video , keep the excellent work , waiting to see more and to realy understand the architecture of js
Best drum roll I've heard! Thank you for the TOP quality videos, they really help.
We need more teacher as passionate as you, Akshay!!
this is a very rare series in javascript and a good opportunity for our beginners thank you Akshay bro
Your excitement of teaching is the motivation.
No matter what every time i learn something from you even though i know the concept.
Best explanation. Theory + practical. Everything is so clear now. Just awesome. đ
All the concepts I learned here are really helpful and looking forward to the event loop videos :)
this playlist is pure gold.....đ§Ą
Eagerly waiting for this video...I'm watching each and every video and loving all.....
One of best videos out there to learn. He absolutely makes it easy.
Presentation feels very friendly Feels like a friend talking about js,
You are doing an amazing job of explaining behind the scene. Thanks so much for teaching in depth
after watching your javascript playlist , I feel very confident in js đŠŸđŠŸ, thanku â€
yes i did understand and i was blown away by dev tools explanation as well havent seen them anywhere else
i have taken one most rated JS courses from udemy, they didn't clear all the doubts but with the help of dev tools, you cleared all doubts for me with dev tools is more helpful with crystal clear
if sometimes I don't feel to learn JS concept and next open your videos and your enthusiasm fill my mind with excitement to learn.
Very informative video! I now, don't have to rely upon a lot of resources and get confused. So, your channel acts as an one step solution for problems dealing with JS.
Thanks Akshay. This video is awesome. The way you demonstrate all the concepts of callback, closure, event listeners, and data privacy in the dev tool is really amazing. Now I am feeling more comfortable and confident on these topics. Thank you !!
Thank full đ JavaScript depth series. Because many step are make easy watching this series. All interview questions is solve.
My life make easy So lot of thanks đđ
Akshay Sir.
Yess, I am very much excited.
And the dev tools explanation are really helpful.
you make the things so easy to grasp
The way to explain concepts is superb. This Javascript series is really helpful for us
That drumroll moment was hilarious....
Understood callback functions...Thank you
I do appreciate the way, you explain the dev tool in depth
After watching this playlist's videos I start geting confidence on javascript.
Really awesome.