# JS Async

i typed the entire thing on my phone, so please dont kill me for any mistakes

we can generally classify functions in JS into two categorsies Asynchrounous and non Asynchronus

when we write functions like this

function add(num_1, num_2){
    return num_1 + num_2
}

we are pretty sure that these are gonna get run immidiatly after the function has been called, or in a more broad sense the compile r doesnt have to wait for anything to execute the statement that is `num_1 + num_2`. since we have already given it the value and it can perform the operation without any delays.

but lets say i have a url to which i can give to values and it responds with its sum.

function add(number_1, number_2){
   return getSumFromServer(number_1, number_2) 
}

> imagin `getSumFromServer` as an imaginary function which calls does the sum operation in server.

in this case what do you expect the return value to be ?

in an ideal scenario you can say "sure, the return value will be the same as above, its gonna respond with the result"?

is possible, not not a good way to write it.

imagine a scenario where the server is down or our network is slow. so the server might take a 10 seconds to respond with a value. so what should be the response in that case ? should we stop the program till the server responds ?

what is the server is undergoing maintanace and we never get a response back should the program wait indefinitly ?

this is where asynchronus functions enter the picture

so asynchronus functions are a special kind of function which doesnt not stop the flow of execution. i will explain how.

function addWithDelay(num_1, num_2){
    setTimeout(()=>{
        console.log("i am printing the sum ", num_1 + num_2)
    }, 1000)
    
    console.log("i dont have time to wait for 1 second, i am too important")
}
addWithDelay(10, 20)

> `setTimeout` is function in JS which is used to make some code after a certain delay. in the above case the code inside the the setTimeout will run after 1s that is 1000 milli seconds

if you run the program above you will get a really weired result

i dont have time to wait for 1 second, i am too important
i am printing the sum 30

you may wonder why ? and might get really confused if you are coming from any other languages.

let me explain why

so when the js compiler run the code it will see that setTimeout is an asynchronus function(which means it does not stop the flow of the code execution waiting for the block to execute.). the compailer thinks, it gonna take a bit of time to execute so i am gonna make this run in the background. instead of waiting i will run the other pieces of cde i have to run then i will come back to it once 1000ms are over. so the JS executes the line after that and once 1000ms are over its gonna run the code inside setTimeout.

so when making network requests of anything which does not guarntee the response or something that does nt have to be executed immediatly it will make it run the the background and will only care about it when the server has given it a response.

watch this -> https://youtu.be/8aGhZQkoFbQ

it might seem too technical at start, but please sit through it will make it more clear as you reach the end. i was also really struggling with this before, but this video made it crystal clear for me and i hope i does the same for you as well