My first encounter with Asynchronous javascript was definitely difficult for me to get a real grasp on the concepts. So then i started laying out the distinctions between each concepts to get a birds view on the matter at hand.
To start of, i think there are 3 terms that you must fully understand ,
- Functions
- Asynchronous
- Callbacks
lets uncover each.
- Functions - Functions are set of reusable code that will start computing after ** INVOKING**. (In Other words , do this code , when i call you.)
e.g.
function dugong(){
//some code (reusable code)
}
dugong();//invoking || called , so start doing.
- Asynchronous - Javascript reads and executes code line by line this is what we call (Synchronous) , and that fine if you just want to execute a code which is just really straightforward but say you have a highly scalable website , it doesnt make sense to just wait for a particular task at hand to complete while the website just stays idle or freezes.
So to tackle this , asynchronous javascript comes to play.
Essentially asynchronous javascript is doing something without disrupting the main flow of the environment.Encounters of asynchronous javascript are events, say you 'click' a button then only it starts executing the code within it. (In Other words , do this(code) when i do this (click) )
e.g.
btn.addEventListener('click' , ()=>{
//some code
}
//this means after CLICKING then only it will execute.
- Callbacks - Callbacks are functions that are nested in another function.
//higher order function
function dugong(not_dugong){
//some code
not_dugong(); // callback function
}
okay now that we've laid the terms , lets start showing an example.To make this interesting lets have a Scenario.
Scenario - You asked a girl out on a date , you buy her flowers you take her to the movies , you buy her dinner and then you confessed to her that you love her , she being unsure with her feelings she asked you to give her time to think about it. But because you are not a simp and not to wait on her , you asked anna and donna out while she still thinks about making a decision. (okay , lets start coding this silly story ..... player !)
//here we have a function structure , lets take the first function example the " function lets_date(callback)" , the First Content of this function is that it will execute the "console.log('lets go on a date')"
function lets_date(callback){
console.log('lets go on a date');
callback(); // Moving on to the second line it finds that we INVOKED a function with a name of callback(); but there is no code content in the callback function , so it looks to the parameter of the main function (lets_date (parameter) ) and we can start constructing a batch of different code to execute there and so forth and if you want to call//invoke a set of other functions like in this case the "flowers() function" we include it in the callback function for it to be executed.
}
function flowers(callback){
console.log('buy flowers');
callback();
}
function movies(callback){
console.log('go to the movies');
callback();
}
function dinner(callback){
console.log('im broke but going to pay you for dinner');
callback();
}
function confess(callback){
console.log('You : i love you');
console.log('Her : give me sometime to think about it')
callback();
}
function not_a_simp(callback){
console.log('i am not simp');
callback();
}
function others(callback){
console.log('ask anna out');
callback();
}
function the_others(){
console.log('ask dinnie out');
}
function love(){
lets_date((callback)=>{ // you can just leave it an empty bracket also its fine , but im just trying to point out that this is the callback function and we state that in this callback function we have declared//invoked//called "flowers function"
flowers((callback)=>{
movies((callback)=>{
dinner((callback)=>{
confess((callback)=>{
not_a_simp((callback)=>{ // in this function we have a callback which have an async function which is SetTimeOut
setTimeout((callback)=>{ // here would be asynchronous
const yes = ()=>{ return console.log('One eternity later , Her : i love you too bro');
}
if(yes){
yes();
console.log('You : i love you too back');
console.log('You: lets get married')
}else {
console.log('She rejected you , You : fcuk you');
}
} , 15000)// here would be asynchronous
others((callback)=>{
the_others();
})
})
})
})
})
})
})
}
love();
But this is not an ideal way , because then you'll have nested functions on top of nested functions which can be daunting , we call this ( callback hell ). This is where we can use Promises or async await to make our code more readable.
I hope this was insightful, understanding this concept really helps me and i hope it does for you too. If you need more clarification on this do let me know in the comments. I'll set up a new post regarding Promises and async in the future.
Top comments (0)