Understanding Asynchronous Javascript with Callbacks

Zulhariz Merican — Sat, 10 Sep 2022 09:06:41 +0000

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.

First post

Zulhariz Merican — Wed, 19 Jan 2022 14:05:53 +0000

This is my first time posting this , hopefully to look back years from now and to see how far i have come.

DEV Community: Zulhariz Merican

Understanding Asynchronous Javascript with Callbacks

First post