JS async and await

What is async and await?

• async and await are used to handle asynchronous operations in a cleaner way.

Why Do We Need Asynchronous Code?

• JavaScript is single-threaded — it can only do one thing at a time. But many real-world tasks (fetching data from a server, reading a file, waiting for a timer) take time. If JS waited for each of these to finish before moving on, the browser would freeze and become unresponsive.
• Asynchronous programming allows JS to start a slow task, continue running other code, and then come back to handle the result when it's ready — without blocking the main thread.
• Fetching data from an API (network request)
• Reading/writing files (Node.js)
• setTimeout / setInterval (timers)
• Database queries

Evolution : Callbacks → Promises → Async/Await :

Callbacks(Old way) :

setTimeout(()=> {
        console.log("Prepping");  
        setTimeout(() => {
                console.log("Cooking");
                setTimeout(() => {
                        console.log("Eating");

                }, 3000)
        }, 5000)
},1000)

prepping();

Promises(Better) :

function prepping(){
        return new Promise((resolve,reject) =>
        setTimeout(()=> resolve("Prepping"),1000) 
 )

} 
function cooking(){
        return new Promise((resolve,reject) =>
        setTimeout(()=> resolve("Cooking"),5000) 
)
} 
function eating(){
        return new Promise((resolve,reject) =>
        setTimeout(()=> resolve("Eating"),3000) 
)
} 

prepping()
.then((response)=> {
        console.log(response); return cooking()
})
.then((response)=>{
        console.log(response); return eating()
})
.then((response)=> console.log(response))

async/await(Moderna and Cleanest) :

function prepping() {
        return new Promise((resolve, reject) =>
                setTimeout(() => resolve("Prepping"), 1000)
        )

}
function cooking() {
        return new Promise((resolve, reject) =>
                setTimeout(() => resolve("Cooking"), 5000)
        )
}
function eating() {
        return new Promise((resolve, reject) =>
                setTimeout(() => resolve("Eating"), 3000)
        )
}


async function asynfunction() {

        const prep = await prepping();
        console.log(prep);
        const cook = await cooking();
        console.log(cook);
        const eat = await eating();
        console.log(eat);
}


asynfunction();

Syntax Rules :

• The async keyword placed before a function declaration or expression.
• Makes the function always return a Promise, even if a plain value is returned.
• Only inside an async function await can be used.

async function greet(){
       return "Hello";
}

console.log(greet()); //Promise {<fulfilled>: 'Hello'}
greet().then((response)=> console.log(response)); //Hello