Nice explanation, but just to add even if you put setTimeOut 0ms it will still excecute last after all synchronus code is done and stack is empty. Thats because async funtions appear on the stack at call time and are immediately pushed off and added to webapis stack where count down begins and since its 0 so the callback of setTimeout gets immediately it gets pushed to task queue ( not call stack ), where spinning event loop is gonna pop this callback function on the main stack once its empty. So even if you have 5 set time outs with 0 ms and 1 console log at the end set timeouts gonna run after console.log because as i mentioned above async functions are pushed back on stack only after main stack is empty
seems that, if you get things confused, you can replace synchronous with the word "sequential"execution ... and asynchronous with "parallel" execution. Which type blocks will also become clear as well.
"Not every single function that takes an argument is asynchronous, but in general, most function that takes function argument are going to be asynchronous" Thank you, this line clears things for me. Much appreciated
100% crystal clear explanation. I was looking at videos that are lengthy, I could not get my head around them. Really liked the way you explained async with then example. Thanks tons.
you are the best youtube web dev creator. Love the show. My tip is that instead of having to type console.log() each time. Just type log and vscode will auto complete the code for you. THanks for the video
Thanks alot. I have learned promises callbacks and async await but still I was confused between async and sync terms. Your example completely cleared all concepts async JS.
I searched and searched, nothing helped me...and on top of that, those things made me confused :(, but you just made it soo easy for me!!!! Thank you! subbed!
Keep it simple and objective just as you are. You clarify the web dev in a way its much easier to learn. For a non native english speaker, your chanel is one of my favorite learning resource. Thank you very much and my best reggards from Brazil. (:
Describing Javascript execution as multi-threaded (as at 1:15) is a bad idea and teaches the wrong mental model. Look up concepts like run to completion, event loop, call stack to understand what's going on better. For example, in the setTimeout call, even if you put the delay to 0 instead of 100 it will still print 10. If you understand the concepts I mentioned you will know why.
Asynchronous code won't execute until the call stack is empty. So you you set a setTimeout function to run with 1ms but then called a function that did a lot of work, the code inside the setTimeout function won't run until the other function was popped off the call stack even though more than 1ms would have already passed. Technically JavaScript is a synchronous language with only 1 thread but it has some clever ways of emulating multi-threaded programming.
Hey Kail. At 6:33, I think what you were trying to say was: Every asynchronous function takes a function argument, but not every function that does so is asynchronous. You actually said the second part in two ways. Can you please tell us more about promise and fetch functions: I really did not get it with this video. Thanks !
A promise operates in an async manner by default thereby it wait till all the data is fetched in the .then function.... Its similar to using async and await in a fetch method (typical synthetic sugar)
Isnt 06:00 supposed to print a value to be 1 since it is inside a closure function which is stored at the memory with the value of (a) which was 1 at the time the execution saw the closure function and stored it in memory ?
I don't think fetch returns quicker than set time out. Fetch returns first because it gets put in to the micro-task queue and setTimeout gets put in to the callback queue. Anything in the micro-task queue gets preference and will be executed before anything in the callback queue even if setTimeout is faster than fetch.
So basically if you would have 3 synchronous functions, first function number 1 needs to run and finish. Then function number 2 needs to run and finish. Then finally function number 3 runs and finishes. But if you have 3 asynchronous functions, all of them run at the same time so you don't need to wait for each function to finish in order to run another one. Do I get this correct?
Please make vid about error handling in async code try/catch vs then/catch mixing callbacks/promises/async-await, chaining promises, rewriting one style to another and also some best and worst practises in async programming. Beside async programming please make vid about writing backend (dco dto repository swagger etc) Thank you
he answers that at 4:50, it doesn't matter who came first in the code between setTimeout and fetch, it matters who finishes first, that's what decides which function will enter the event loop queue first
I'm just learning this too, but I guess if you want to use an outside variable inside your async functions, you can always clone the value into another variable inside that function. Like in this case setTimeOut(() => { let b = a; code with b }, 100) I guess? :P
great video. I am more confused about scope within the Async function. can you assign a value to global variables within an Async function. for some reasons, I cannot seem to get that to work
You need to pass that asynchronous function a callback, have it return a promise, or make that function async and await its completion. If you can't do any of that, then there isn't a really good clean way to do it.
I love that you are straight to the point with a clear and short explanation. It makes things a lot easier. Appreciated! 🤩
u just want him to blow your back out
Yes😀
Nice explanation, but just to add even if you put setTimeOut 0ms it will still excecute last after all synchronus code is done and stack is empty. Thats because async funtions appear on the stack at call time and are immediately pushed off and added to webapis stack where count down begins and since its 0 so the callback of setTimeout gets immediately it gets pushed to task queue ( not call stack ), where spinning event loop is gonna pop this callback function on the main stack once its empty. So even if you have 5 set time outs with 0 ms and 1 console log at the end set timeouts gonna run after console.log because as i mentioned above async functions are pushed back on stack only after main stack is empty
lucid explanation, thanks man
seems that, if you get things confused, you can replace synchronous with the word "sequential"execution ... and asynchronous with "parallel" execution. Which type blocks will also become clear as well.
My good sir, that's such a great way to summarize it
@@GerardBeaubrun Not quite. JavaScript isn't parallel as it is runs as a single threaded process. For asynchronous functions is uses an event loop.
@@datboijdope exactly
@@datboijdope smart man
"Not every single function that takes an argument is asynchronous, but in general, most function that takes function argument are going to be asynchronous"
Thank you, this line clears things for me. Much appreciated
100% crystal clear explanation. I was looking at videos that are lengthy, I could not get my head around them. Really liked the way you explained async with then example. Thanks tons.
every single video from your channel clears so many concepts in my head, i cant even start to tell you..thank you so much from the core of my heart
Always a great resource for me, short and full of relevant info. Plus I like the clicky keyboard sounds. Awesome video, yet again! Thanks, Kyle!
I totally agree. Especially the clicky keyboard part!
Wow, as someone who feels more intermediate than total beginner, I felt that you really validated my learning curve. Thank you!
you are the best youtube web dev creator. Love the show. My tip is that instead of having to type console.log() each time. Just type log and vscode will auto complete the code for you. THanks for the video
I am a big big fan of your short & crisp concept clearing videos 🧡🧡🧡
Thanks alot. I have learned promises callbacks and async await but still I was confused between async and sync terms. Your example completely cleared all concepts async JS.
Short and helpful, thank you very much! =]
You're welcome!
Your videos are straight to the point and that just amazing. Thank you for making them.
I searched and searched, nothing helped me...and on top of that, those things made me confused :(, but you just made it soo easy for me!!!! Thank you! subbed!
Thank you for getting to the point, and explaining this concept in clearest possible terms.
Spot On. The way you explained everything so easily. it is appreciable.
Keep it simple and objective just as you are. You clarify the web dev in a way its much easier to learn. For a non native english speaker, your chanel is one of my favorite learning resource. Thank you very much and my best reggards from Brazil. (:
the best explaination of the async feature in js ever
Dude, you just gave the best start to learn more about Async Programming.
btw, whats your VS code theme, font, setup...
Love all of your videos! You make everything so easy to understand! Thank you!!
Simple , Short , Concise. Thank You.
Short, clear video on Async Programming. Thanks.
{2021-07-20}
You have explained the concept so well! Thank you : )
Very straightforward I wonder why they're not just teaching like that in schools
Thank You sir , You have cleared the doubts that were blowing my head ❤
Whaaat, didnot know of this before your video. Thank you very much for sharing this
thank you brother!! very well explained!! keep it coming!!
Describing Javascript execution as multi-threaded (as at 1:15) is a bad idea and teaches the wrong mental model. Look up concepts like run to completion, event loop, call stack to understand what's going on better. For example, in the setTimeout call, even if you put the delay to 0 instead of 100 it will still print 10. If you understand the concepts I mentioned you will know why.
It took me watching 4 videos until I found this one. It was perfect!
Wow very straight to the point.... Awesome! Double thumbs up
Such a simple and effective way to explain this. 🤙🏻🖤
Explained wonderfully 🙏
I love your keyboard sound whenever you typed which makes me motivated.
Thank you it's really helpful for me.
You're welcome!
The best in explaining stuff.......big ups man
Wooooow I couldn’t understand the difference between synchronous and asynchronous code until a I watched his video thank you!
Thanks, your clear explanation helped me understand this concept better. :)
Asynchronous code won't execute until the call stack is empty. So you you set a setTimeout function to run with 1ms but then called a function that did a lot of work, the code inside the setTimeout function won't run until the other function was popped off the call stack even though more than 1ms would have already passed. Technically JavaScript is a synchronous language with only 1 thread but it has some clever ways of emulating multi-threaded programming.
Even if you make it 0ms what you said is true
Killer explanation, you made some stuff clearer for me in no time.
pretty clear and straightforward explanation ..... Thanks !!
Thanks sir. It was really simple explanation!
very clear explanation, good examples
thank you man 👌👌👌
Hey Kail. At 6:33, I think what you were trying to say was: Every asynchronous function takes a function argument, but not every function that does so is asynchronous.
You actually said the second part in two ways.
Can you please tell us more about promise and fetch functions: I really did not get it with this video. Thanks !
A promise operates in an async manner by default thereby it wait till all the data is fetched in the .then function....
Its similar to using async and await in a fetch method (typical synthetic sugar)
Love your newsletter
Thank you!
Awesome! Thanks for this video.. You have explained the concepts very well
Thank you so much, This tutorial helped me a lot to get the concept clear.
Very straightforward explanation thank you and godbless you.
I’ve noticed a guitar in the background in your videos. Did you make the intro riff :P
Thank you ! Learned a lot in just 7 minutes !
Note that JS async is single threaded on both browser and NodeJS.
Very good explanation of the concept.
Nice explanation. Simple and clear!!
Thanks, The first video that helped me!
Isnt 06:00 supposed to print a value to be 1 since it is inside a closure function which is stored at the memory with the value of (a) which was 1 at the time the execution saw the closure function and stored it in memory ?
This is how good teachers teach. Thanks a lot
This was very helpful Kyle, thank you!
Alas! I found one great example of what Async really is.
I don't think fetch returns quicker than set time out. Fetch returns first because it gets put in to the micro-task queue and setTimeout gets put in to the callback queue. Anything in the micro-task queue gets preference and will be executed before anything in the callback queue even if setTimeout is faster than fetch.
in my task manager, theres something called "sink to asyncronis something" should i end that task??
Thank You So Much Brother.......🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻
Thank you, Kyle!
Hi sir, i just want to know where to learn such synchronous and asynchronous programming after completing my masters of computer application.
Thanks a lot, I really tapped into the concept
So why does
let res = await fetch()
console.log(“a”)
console.log(res)
Result in synchronous blocking code?
Thank you man ! That was very helpful
Thanks for the video, i can get more understanding about async js 👍
thanks, bro you have clear this concept abut sync and async with nice example
I'm glad I could help
Given the scenario mentioned in the video, how can we get a =1 instead of a becoming 10 for an async operation?
So basically if you would have 3 synchronous functions, first function number 1 needs to run and finish. Then function number 2 needs to run and finish. Then finally function number 3 runs and finishes. But if you have 3 asynchronous functions, all of them run at the same time so you don't need to wait for each function to finish in order to run another one. Do I get this correct?
I think so good. But I just learn this...
Thank you i love the way you explain things .
Please make vid about error handling in async code try/catch vs then/catch mixing callbacks/promises/async-await, chaining promises, rewriting one style to another and also some best and worst practises in async programming.
Beside async programming please make vid about writing backend (dco dto repository swagger etc)
Thank you
Thank you for the explanation
Well explained! Best I have seen.
great explanation. thanks!!
excellent video mate! Really helpful!
Thank you. Good video, very clear.
Thank you so much, this was helpful
Thank you very much it was concise and helpful
Hi, Can you make a video on how javascript works while executing the code internally? Thanks a lot! And amazing videos thank you!!
thanks for the video Kyle
Unfortunately, I get the following error: ReferenceError: fetch is not defined
Can someone help me out?
You most likely are on a browser that does not support fetch. Try a newer browser like Chrome.
JS run time model is based on event loop that uses queue , and queue is in FIFO manner then why does setTimeout not get executed before fetch?
he answers that at 4:50, it doesn't matter who came first in the code between setTimeout and fetch, it matters who finishes first, that's what decides which function will enter the event loop queue first
Very good explanation
thank you for this great explanation
Brilliantly explained!
Great video man! You helped a lot.
Thanks I got a clear understanding about asynchronous programing :-)
what should we do when we want to pass the variable "a" with its at the time we are calling the Settimeout async function?!
I'm just learning this too, but I guess if you want to use an outside variable inside your async functions, you can always clone the value into another variable inside that function.
Like in this case
setTimeOut(() => {
let b = a;
code with b
}, 100)
I guess? :P
Thank you! This makes a lot of sense
great video. I am more confused about scope within the Async function. can you assign a value to global variables within an Async function. for some reasons, I cannot seem to get that to work
Very cool, Do make a complete vedio on nodejs
Very good explaination
Very well explained
THANK YOU!! FINALLY SOMEONE
Is there a way to execute something only after a specific asynchronous function has finished executing?
You need to pass that asynchronous function a callback, have it return a promise, or make that function async and await its completion. If you can't do any of that, then there isn't a really good clean way to do it.
when i am define fetch its gives me error fetch is not defined
at Object. (here path of file and line number)
i am confused why i am getting this eror
Helpful and very very clear
great explanation thanks!
Your videos are so ... I am lost the words wonderful.
Awesome explanation!!!!