At first I thought this is a really complicated example because i am new to functional programming, but then after watching this video over and over many times , and after doing different operations through different .txt files, i really understood callback functions. Love this video! For people who are completely new to functional programming, I would suggest watching a few beginner videos about .filter function, .map function, .reduce function, beginner videos about callback functions and working out a few basic examples on them (really important) and then watching this video to gain perfection on callbacks. This video is aptly titled 'Mastering JavaScript Callbacks'
Excellent tutorial! You presented this confusing topic in a straightforward, simple way, while demonstrating best practices for writing callbacks. Your video has helped me gain a much clearer understanding of Javascript callbacks and how to implement them:)
Love the tut, but had to watch in a few times, and pause in places to follow. You're obviously a guru, I think maybe you're moving a little to quickly for this to be easy to follow. For the rest of you who don't agree... you're guru's as well. LOL Loved the tut... can't wait to see more.
Wow!! great lesson, I found it really helpful even tho I don't understand everything that is going on with node.js and some other stuff. I will study more and comeback to watch this video again and hopefully it will make more sense and I will learn even more. Thank you!
Dude, you're focusing too much on doing logic for your bears and nothing in the synchronous and asynchronous calls. Please try to think about the people who really would like to learn and master those calls. Thanks
Thank you and greetings from Bulgaria. Please, one off topics question. Regarding the nowadays' fashion for architectural patterns, unit testing and breaking functions to small testable chunks, will it be possible to test compareBears() and next() inside their enclosing function ?? And so in all regards what would be their best place ??
Kyle, that was an amazing video. I had a question though. Is the stuff written inside these functions synchronous ? Consider the compareBears function. Does the bear line run after the dict line, is that part synchronous ?
Thanks! All lines in JS run synchronously. You only have to consider, does this sync line schedule a function call to run some time in the future aka asynchronously?
Hello Kyle, I have a question for you. I may be silly, I don't know. But I would ask. Its related to the way you have written the code. If I am not wrong you have written it all in nested way(indirectly) like getBears readFile1 readFile2 compare(indirectly nested) right ?? why didn't you write the readFile1, readFile2 and Compare function at the same level. like getBears{ readFile1{} readFile2{} compare{} } getBearInvoked{} wouldn't that be correct.?? About myself, I am just a new comer to node.js and JS. If you could answer this question, I would be great. Thanks in Advance,
+Vikas Gautam Welcome to Node.js! This is because the functions I'm using are asynchronous. So if you called each function at the same level, readFile2 or the compare function will get called before readFile1 has finished. Let's pretend the file that readFile is reading a very large file and takes 10 seconds to read the entire file into memory. When you call readFile() it starts reading that file. Nanoseconds later, JavaScript then moves onto the next line and calls compare() even though readFile hasn't finished. It will only call the callback function to let you know it has finished, 10 seconds later. The alternative would be to use readFileSync(). That function is synchronous and your second example would work like that. When you call readFileSync() it will block the JavaScript process making your app stall for 10 seconds until it has finished reading the file. So for small, less often opened files that is ok. But for most operations, async functions are preferred to avoid blocking your application process.
+Kyle Robinson Young Thanks Kyle Sir, You just nailed it with your explanation. When you said readfile1 and readFile2 are async, the whole story clicked in my mind. Your code is perfect in all sense. Thank you so much. :) :)
I really enjoyed this video and these are great examples of callbacks, but it would have been nice to have a better explanation of callbacks themselves. Also, it would have been nice to see a few refreshes of the browser to demonstrate the bears loading in different orders. Or perhaps they never will because the file sizes don't change? Not sure...
I notice you don't use semicolon in your javascript. Is this a good practice? Do you have any comments or idea behind your habit? Or did you read any article regarding this? By the way, nice tutorial!
Thanks! I did a video about why I don't use semicolons when teaching: ruclips.net/video/gsfbh17Ax9I/видео.html When I started with JavaScript, I was told that a lot of scary things would happen if I didn't use semicolons, so I always did. But then I began contributing to a project in which the author preferred omitting semicolons. After a year helping out on that project, none of those bad things happened. So now I personally don't use them and advocate for people to try both ways and use what feels best for them.
+Mark Thompson FWIW, I'm less likely to hire someone if they have strong opinions on semicolons. It means they either don't know the language well enough or worse... they do know the language, have strong opinions on non-issues and will likely be toxic member on my team. I think Max Ogden said it best, "There are two types of people, those who have strong opinions on semicolons and those who don't. I only want to work with the latter."
Kyle Robinson Young latter means sir? I'm New in webDev... you mean sir Kyle... it's better to work with a team who can explain when to use or not the semicolon? By the way awesome video sir.
JavaScript runs on a single thread. So a synchronous call will stop everything else until it finishes vs an asynchronous call will let other operations continue to run as the original call finishes. An analogy is, think of a line or queue at a bank as a thread. The bank teller, JavaScript, can only help one person, or call, at a time. There is only one line. Everything is fine until someone comes with a big bag of pennies and begins counting one at a time. The entire line needs to wait for that person to finish counting those pennies. That is synchronous. Now imagine they open up multiple lines. Now JavaScript is able to help other people in those other lines while that one person finishes counting their pennies. JavaScript can still only help one person at a time but no longer needs to wait for slow people in certain lines in order to help other people in other lines. That is asynchronous.
where can i watch the video that explains the image() function being called? is there a way to show an image to the screen without having to include an image() function?
new Image() is a browser API to create an image tag: developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image Another way is to create the element instead: var img = document.createElement('img') img.setAttribute('src', 'image.jpg') document.body.appendChild(img) But var img = new Image() does the same thing and is shorter.
I'm having a problem running the image loading example. For some reason, it can't find the Image() constructor. var img = new Image() ^ ReferenceError: Image is not defined My code appears to be exactly the same as shown in the video. Any idea what the problem could be? Thanks in advance.
+Purplejacket Are you running it on a browser in the client side? Because Image is not available in Node.js on the server side so it will say Image is not defined.
fs.readfile(filepath,function(err, bears){ if(err) return done(err) } If there is err in above code, will done cb be executed with err parameter and we get the error message OR it will just return the done cb with err something like: var returnvalue= getBears('bears.txt',function(err,bears) { console.log(bears); } and after we can execute: returnvalue();
getBears() is async, so we don't use anything it returns. Instead we only rely on the callback we gave it to be called with an err or bears. return is only used in that function to escape early, like a break in a loop. You can also return a value in an async function but generally it's better to pick only one to avoid confusion: return with sync function and call a callback with async functions.
That video is great! Thanks for sharing! My videos are purposefully short and focused on specific topics with the intent for viewers to continue learning about the subject more in depth through other resources. As I believe a beginner is not as likely going to watch a 30 min talk on the event loop just to understand how to use callbacks but to each their own.
Are going to have another video to explain this video?
I thought it was just me. I'm more confused now than before the video.
s
I have been programming in Java for 10 years and for me the Js callbacks, npm and budo blow my mind...
thanks for this great video.
+cafeta Awesome! Thanks for watching!
@Juan2003gtr Any argument as to why?
At first I thought this is a really complicated example because i am new to functional programming, but then after watching this video over and over many times , and after doing different operations through different .txt files, i really understood callback functions. Love this video! For people who are completely new to functional programming, I would suggest watching a few beginner videos about .filter function, .map function, .reduce function, beginner videos about callback functions and working out a few basic examples on them (really important) and then watching this video to gain perfection on callbacks. This video is aptly titled 'Mastering JavaScript Callbacks'
thanks for making callbacks more bearable! (...)
Hehe
Frickin' awesome explanation! I've been trying to understand callbacks for days now, but i finally "get it" thanks to you! I will pay it forward.
This tutorial is what made callbacks finally click for me. Thanks a ton!
Nice! Also you have a very good name!
Excellent tutorial! You presented this confusing topic in a straightforward, simple way, while demonstrating best practices for writing callbacks. Your video has helped me gain a much clearer understanding of Javascript callbacks and how to implement them:)
+Brian Francoeur Awesome! Glad to hear! :D
Love the tut, but had to watch in a few times, and pause in places to follow.
You're obviously a guru, I think maybe you're moving a little to quickly for this to be easy to follow.
For the rest of you who don't agree... you're guru's as well.
LOL Loved the tut... can't wait to see more.
Came for call backs, stayed for bears.
In all seriousness this helped a ton! Finally clicked for me.
Thanks!
Jonathan Lake \o/ ˁ˚ᴥ˚ˀ
It could not get any more clear. Thank you so much Kyle!
Wow!! great lesson, I found it really helpful even tho I don't understand everything that is going on with node.js and some other stuff. I will study more and comeback to watch this video again and hopefully it will make more sense and I will learn even more. Thank you!
+Ismael Rod Excellent! Glad to hear. Thanks!
This was the tut I was searching for. Thank you dude n.n
This was helpful, Kyle, thank you.
This was a really helpful tutorial, thanks a lot man !
Dude, you're focusing too much on doing logic for your bears and nothing in the synchronous and asynchronous calls. Please try to think about the people who really would like to learn and master those calls. Thanks
Thanks for the feedback!
ohh come now.. bears rule.. don't like it? film your own stuff and post it.. Kyle, you are fun to watch teaching.. keep it up, good job
Oh my god!! that was a nice tutorial, Thank You :).
Are you planning to do some node.js series?
We will be happy.
Vikram Jadhav Thanks! :D Yes! I have a bunch planned for node.js. Feel free to request anything specific here: github.com/shama/letswritecode/issues/1
Thank you and greetings from Bulgaria.
Please, one off topics question. Regarding the nowadays' fashion for architectural patterns, unit testing and breaking functions to small testable chunks, will it be possible to test compareBears() and next() inside their enclosing function ?? And so in all regards what would be their best place ??
Awesome tut! I have some questions though. Any way I can contact you anywhere?
this guy love bears, btw nice tutorial :)
ʕ•͡ᴥ•ʔ/ Thanks!
Kyle, that was an amazing video. I had a question though. Is the stuff written inside these functions synchronous ? Consider the compareBears function. Does the bear line run after the dict line, is that part synchronous ?
Thanks! All lines in JS run synchronously. You only have to consider, does this sync line schedule a function call to run some time in the future aka asynchronously?
Got it, thanks :)
Please explain how it works more that why we use it. As someone from Java, I'm completely lost.
function(err, bears) { *stuff*}
Hello Kyle,
I have a question for you. I may be silly, I don't know. But I would ask.
Its related to the way you have written the code.
If I am not wrong you have written it all in nested way(indirectly) like
getBears
readFile1
readFile2
compare(indirectly nested)
right ??
why didn't you write the readFile1, readFile2 and Compare function at the same level. like
getBears{
readFile1{}
readFile2{}
compare{}
}
getBearInvoked{}
wouldn't that be correct.??
About myself, I am just a new comer to node.js and JS. If you could answer this question, I would be great.
Thanks in Advance,
+Vikas Gautam Welcome to Node.js! This is because the functions I'm using are asynchronous. So if you called each function at the same level, readFile2 or the compare function will get called before readFile1 has finished.
Let's pretend the file that readFile is reading a very large file and takes 10 seconds to read the entire file into memory. When you call readFile() it starts reading that file. Nanoseconds later, JavaScript then moves onto the next line and calls compare() even though readFile hasn't finished. It will only call the callback function to let you know it has finished, 10 seconds later.
The alternative would be to use readFileSync(). That function is synchronous and your second example would work like that. When you call readFileSync() it will block the JavaScript process making your app stall for 10 seconds until it has finished reading the file. So for small, less often opened files that is ok. But for most operations, async functions are preferred to avoid blocking your application process.
+Kyle Robinson Young
Thanks Kyle Sir,
You just nailed it with your explanation.
When you said readfile1 and readFile2 are async, the whole story clicked in my mind.
Your code is perfect in all sense.
Thank you so much. :) :)
I really enjoyed this video and these are great examples of callbacks, but it would have been nice to have a better explanation of callbacks themselves. Also, it would have been nice to see a few refreshes of the browser to demonstrate the bears loading in different orders. Or perhaps they never will because the file sizes don't change? Not sure...
Thanks for the feedback!
I notice you don't use semicolon in your javascript. Is this a good practice? Do you have any comments or idea behind your habit? Or did you read any article regarding this?
By the way, nice tutorial!
Thanks! I did a video about why I don't use semicolons when teaching: ruclips.net/video/gsfbh17Ax9I/видео.html
When I started with JavaScript, I was told that a lot of scary things would happen if I didn't use semicolons, so I always did. But then I began contributing to a project in which the author preferred omitting semicolons. After a year helping out on that project, none of those bad things happened. So now I personally don't use them and advocate for people to try both ways and use what feels best for them.
Checked more of your vids and I think you have a nice obsession with bears :D
ʕ•͡ᴥ•ʔ/
I hope you will use semicolons in your code soon....
Bogdan Martinescu I just published a video which explains why I don't: ruclips.net/video/gsfbh17Ax9I/видео.html ;)
+Mark Thompson FWIW, I'm less likely to hire someone if they have strong opinions on semicolons. It means they either don't know the language well enough or worse... they do know the language, have strong opinions on non-issues and will likely be toxic member on my team.
I think Max Ogden said it best, "There are two types of people, those who have strong opinions on semicolons and those who don't. I only want to work with the latter."
Kyle Robinson Young latter means sir? I'm New in webDev... you mean sir Kyle... it's better to work with a team who can explain when to use or not the semicolon? By the way awesome video sir.
@@xarbyx2207 what?
Great video! Thanks :)
Nice vid as always, but I'm missing the application of bind() and apply() methods here :).
+noherczeg Thanks! I covered bind/apply/call in an earlier video just about functions, check it out: ruclips.net/video/jEx9V4uUcg0/видео.html
Will do thanks! :)
I am sorry I am a newbie.. Just curious what did you mean by "any sync call is going to Block the thread"?? Great vid though !!
JavaScript runs on a single thread. So a synchronous call will stop everything else until it finishes vs an asynchronous call will let other operations continue to run as the original call finishes.
An analogy is, think of a line or queue at a bank as a thread. The bank teller, JavaScript, can only help one person, or call, at a time. There is only one line. Everything is fine until someone comes with a big bag of pennies and begins counting one at a time. The entire line needs to wait for that person to finish counting those pennies. That is synchronous.
Now imagine they open up multiple lines. Now JavaScript is able to help other people in those other lines while that one person finishes counting their pennies. JavaScript can still only help one person at a time but no longer needs to wait for slow people in certain lines in order to help other people in other lines. That is asynchronous.
Thanks much that analogy helps.. !!
I really liked your video
Great video! I subscribed. :)
+Ionut Thank you! :D
thank you. i am growing tired of people using external modules as the panacea.
where can i watch the video that explains the image() function being called? is there a way to show an image to the screen without having to include an image() function?
new Image() is a browser API to create an image tag: developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image
Another way is to create the element instead:
var img = document.createElement('img')
img.setAttribute('src', 'image.jpg')
document.body.appendChild(img)
But var img = new Image() does the same thing and is shorter.
thanks. so thats all you need to print an image onto your website. the built in html 5 image function image()
Man, please add panda to the list of bears "We bare bears". btw, love your vids!
+Diego Balduini Ha! Thank you!
I'm having a problem running the image loading example. For some reason, it can't find the Image() constructor.
var img = new Image()
^
ReferenceError: Image is not defined
My code appears to be exactly the same as shown in the video. Any idea what the problem could be?
Thanks in advance.
+Purplejacket Are you running it on a browser in the client side? Because Image is not available in Node.js on the server side so it will say Image is not defined.
+Kyle Robinson Young
Yeah, I was running it on the server side. Thanks for the fast feedback.
Great video!
+Francisco Valenzuela Thanks! :D
Place those god damned semicolons!!! :D
Nice tut, keep it up XD
Cosor Alexandru Thanks!
I have almost totally abandoned using semicolons in javascript. You rarely need them.
what sofware did u use ?
I use atom.io as my editor.
where is Image coming from? when you do image = new Image
It's a global variable provided by the browser: developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image
fs.readfile(filepath,function(err, bears){
if(err) return done(err)
}
If there is err in above code, will done cb be executed with err parameter and we get the error message OR
it will just return the done cb with err something like:
var returnvalue= getBears('bears.txt',function(err,bears)
{
console.log(bears);
}
and after we can execute:
returnvalue();
getBears() is async, so we don't use anything it returns. Instead we only rely on the callback we gave it to be called with an err or bears. return is only used in that function to escape early, like a break in a loop.
You can also return a value in an async function but generally it's better to pick only one to avoid confusion: return with sync function and call a callback with async functions.
Thank you Sir, atom ftw
Good tutorial men!!!!!!
great man!
cheers
+Julio Cezar G. Freitas Thanks!
whats with the bears why does everyone use bears as an example??
The bear lobby is very influential in the government. I am required by law to use bears as examples when writing code.
lmfao, great video dude.
What is it with bears?! lol!
+mmahgoub ¯\_ʕ•͡ᴥ•ʔ_/¯
thanks.
i cant believe you didn't call your 'compareBears'-function 'comBear' :p
I'm going to now regret that for the rest of my life. Thanks.
Please zoom in or increase font size next time
Will do! Thanks!
Very good explanation but the video quality is very poor
thanks alot ..
thank u :)
bears cares dares snares pares
thx nice code
semi
fking
colons
Using Node to explain callbacks not a good thing. Using done() without explaining much of it. This video is just for showing off.
oh ok
i was a bit unfair. i am not a node guy. good video though
Man your explanation for beginners about asynchronous callbacks is terrible ..
Thanks! Very kind of you to say!
That video is great! Thanks for sharing!
My videos are purposefully short and focused on specific topics with the intent for viewers to continue learning about the subject more in depth through other resources. As I believe a beginner is not as likely going to watch a 30 min talk on the event loop just to understand how to use callbacks but to each their own.
But he should!