Learn callbacks, promises, Async/Await by Making Ice Cream 🍧🍨🍦
Tags: javascript, codenewbie, webdev, beginners
Published: 2021-06-22 14:42:53

Today we're gonna run an **ice cream shop** and learn **asynchronous JS**. Along the way, we'll understand how to use
   * Callbacks
   * Promises
   * Async / Await



![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b1j935dg72g9u8zvh2oi.png)


# Table of Contents -
   * What's Asynchronous JavaScript
   * Synchronous Vs Asynchronous JavaScript
   * Callbacks
   * Promises
   * Async / Await
   * Conclusion


## You can watch this tutorial on YouTube as well if you like

{% youtube n5ZtTO1ArWg %}

# What's Asynchronous JavaScript ?


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7yd96tgxvuowqmfgcx6b.png)

If you want to efficiently build projects, Then this is for you.

The theory of async javascript helps you to **break down** complex & **big project into smaller tasks.**

And then, using any 1 of these 3 techniques **(callbacks, promises or Async/await)** we are running those small tasks in a way that we get the final result

Let's Dive in !🎖️

# Synchronous VS Asynchronous ->

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/arzbf1rc3pi4yi6u8wup.png)



## Synchronous System

In this system, tasks are completed 1 after another.

Think of this like, you have just 1 hand to accomplish 10 tasks. So, you have to complete 1 task at a time.


Take a look at the GIF 👇


![Synchronous System](https://media.giphy.com/media/ICIS16DkE9qB9HVxtq/giphy.gif)


You can notice that, without loading the 1st image completely, the 2nd image doesn't load.


### Note :
By default JavaScript is Synchronous **[single threaded]** Think like this, 1 thread means 1 hand 

## Asynchronous System

In this system, tasks are completed independently. 

Here, Imagine that For 10 tasks, you're given 10 hands. So, each hand can do the task independently.

Take a look at the GIF 👇

![Asynchronous System](https://media.giphy.com/media/MMDnmJnE7uhX6KtcKc/giphy.gif)


You can notice that, All the images are loading on their own pace. Nobody is waiting for anybody.

## To summarize -


When 3 images are on a marathon, in ->

   * **Synchronous** : 3 images are on the same lane. Overtaking the other is not allowed. The race is finished one by one. If image number 3 stops, everyone stops.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1r9y4ghhq0t8wjb1u9h.png)


   * **Asynchronous**: 3 images are on different Lanes. They'll finish the race on their own pace. Nobody stops for anybody

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ehknx5shc4orh32s0ktk.png)




## Examples 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pzbnpcza9rbj8xgiby95.png)


Before starting our project, Let's look at examples and clear our doubts.


### Synchronous 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5m6p1qy522lj3auvl5ty.png)

To test The synchronous system, Write these on JavaScript

```javascript
console.log(" I ");

console.log(" eat ");

console.log(" Ice Cream ");
```


The result on console 👇


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54izy7zyo52j2z6netls.png)



### Asynchronous

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5d0o8unbe8c67qeqz0w.png)


Let's say it takes 2 seconds to eat ice cream,
Now, let's test The Asynchronous system, Write these on JavaScript.

**Note :** Don't worry, we'll discuss setTimeout() function in this article. 

```javascript
console.log("I");

// This will be shown after 2 seconds

setTimeout(()=>{
  console.log("eat");
},2000)

console.log("Ice Cream")
```

The result on console 👇


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o44c2t0r7bknkadoumgx.png)



























## Setup 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2mzbtcnm67v2iys7cix7.png)


   * For This project you can just open [Codepen.io](https://codepen.io/) and start coding. Or, you can do it on VS code. 

   * Open The JavaScript section

   * Once done, open your Developer console window. We'll write code and see the results on the console.  







# What are Callbacks?


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s5iloofqsv3lcdl4flsi.png)


Nesting a function inside another function as an argument are called callbacks.

An illustration of callback ->

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uz3pl56lmoc2pq7wzi2s.png)

**Note :** Don't worry, Examples are coming.



### Why do we use callbacks?

When doing a complex task, we break that task down into small steps. To establish relationship between these steps according to time(Optional) & order, we use callbacks.

Take a look at this 👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o05q7ortgctx2oeyntfn.png)


These are the small steps needed to make ice cream. Also note, order of the steps and timing are crucial. You can't just chop the fruit and serve ice cream.

At the same time, if previous step is not completed, we can't move to the next step.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2v1rn50smjul9arkneza.png)


To explain that in more details, let's start our ice cream shop business 

## But Wait....

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cq8exwor5aiciu2j6jwu.png)


We're gonna have 2 sides. 
   * The store room will have ingredients [Our Backend]
   * We'll produce ice cream on our kitchen [The frontend]


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i69bws707m5rvsj34i9o.png)



















## Let's store our data

Now, we're gonna store our ingredients inside an object. Let's start ! 


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ihezrht8dgg9xn8lm2k9.png)



store ingredients inside objects Like this 👇

```javascript
let stocks = {
    Fruits : ["strawberry", "grapes", "banana", "apple"]
 }
```

Our other ingredients are here 👇


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6dcwr770l0ubupv0r2gj.png)


Store them in JavaScript Object like this 👇

```javascript
let stocks = {
    Fruits : ["strawberry", "grapes", "banana", "apple"],
    liquid : ["water", "ice"],
    holder : ["cone", "cup", "stick"],
    toppings : ["chocolate", "peanuts"],
 };
```


The entire business depends on the **order** of our customers. Then, starts production and then we serve ice cream. So, we'll create 2 functions ->
   * order 
   * production



![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3bnzniiyamo0b9l7e806.png)









See this illustration 👇


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r8h8ra9wor8cs3dgddpb.png)


Let's make our functions.

**Note :** We'll use arrow functions 



```javascript
let order = () =>{};

let production = () =>{};
```

Now, Let's establish relationship between these 2 functions using a callback. see this 👇


```javascript
let order = (call_production) =>{

  call_production();
};

let production = () =>{};
```


## Let's do a small test


we'll use the console.log() function to conduct tests to clear our doubts regarding how we established the relationship between the 2 functions.  


```javascript
let order = (call_production) =>{

console.log("Order placed. Please call production")

// function 👇 is being called 
  call_production();
};

let production = () =>{

console.log("Production has started")

};
```


To run the test, we'll call the **order** function. And we'll place the 2nd function named production as it's argument.

```javascript
// name 👇 of our second function
order(production);
```

The result on our console 👇


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u41ugdxxed1q8coz5hol.png)








## Take a break 

So far so good, Take a break !



![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tnr74waq6noc0djln3qx.png)






## Clear our console.log

Keep these code and remove everything [don't delete our stocks variable]. On our 1st function, pass another argument so that we can receive the order [Fruit name]


```javascript
// Function 1

let order = (fruit_name, call_production) =>{

  call_production();
};

// Function 2

let production = () =>{};


// Trigger 👇

order("", production);
```


Here's Our steps, and time each step will take to execute.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rphpp2lqjnk7f0tv5g3d.png)



to establish the timing part, The function setTimeout() is excellent as it is also uses a callback by taking a function as an argument. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qwrg1taugyhvjnkx8xpp.png)


Now, Let's select our Fruit.

```javascript
// 1st Function

let order = (fruit_name, call_production) =>{

  setTimeout(function(){

    console.log(`${stocks.Fruits[fruit_name]} was selected`)

// Order placed. Call production to start
   call_production();
  },2000)
};

// 2nd Function

let production = () =>{
  // blank for now
};

// Trigger 👇
order(0, production);
```

The result on our console 👇

**Note:** Result displayed after 2 seconds.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/edwji5vauypoezj3bxdk.png)


If you're wondering how we picked the strawberry from our stock variable. Here's the code with format 👇



![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ia38z3x6b96xpq3aid91.png)



Don't delete anything. start writing on our production function.
Write these 👇

**Note:** We'll use arrow functions.


```javascript
let production = () =>{

  setTimeout(()=>{
    console.log("production has started")
  },0000)

};
```

The result 👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5yskzvg7rezo2sg4lklq.png)


we'll nest another setTimeout function in our existing setTimeout function to chop the fruit. Like this 👇
  

```javascript
let production = () =>{
  
  setTimeout(()=>{
    console.log("production has started")


    setTimeout(()=>{
      console.log("The fruit has been chopped")
    },2000)


  },0000)
};
```



The result 👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4659l1mua0rv40rwyem7.png)


If you remember, this is the list of our steps.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rphpp2lqjnk7f0tv5g3d.png)


Let's complete our ice cream production by nesting a function inside another [Also known as Callbacks ]

```javascript
let production = () =>{

  setTimeout(()=>{
    console.log("production has started")
    setTimeout(()=>{
      console.log("The fruit has been chopped")
      setTimeout(()=>{
        console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} Added`)
        setTimeout(()=>{
          console.log("start the machine")
          setTimeout(()=>{
            console.log(`Ice cream placed on ${stocks.holder[1]}`)
            setTimeout(()=>{
              console.log(`${stocks.toppings[0]} as toppings`)
              setTimeout(()=>{
                console.log("serve Ice cream")
              },2000)
            },3000)
          },2000)
        },1000)
      },1000)
    },2000)
  },0000)

};
```

Our result on console 👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5mq9bg6fqrc8apj7nu7b.png)


Feeling confused ?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/man5l5pwavp9prio1wc0.png)


This is called a callback hell. It looks something like this 👇


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d5rk7f8d920jzn22smjh.png)


What's the solution to this?





# Promises


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3neys1hxsrifgg5qm6x.png)

This was invented to solve the callback hell problem and to better handle our tasks.



## Take a break 

But first, Take a break !

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwfvel7kvm422gqvj0os.png)


This is how a promise looks like. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7qo1zheuin2825osozvc.png)

Let's Dissect Promises together !

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gozy5r1nfubzeq5t5t25.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ezi9ogz0ergprgkmu68a.png)


There're 3 states of a promise 
   * **Pending :** This is the initial stage. Nothing happens here. Think like this, your customer is taking his time to give an order. But, hasn't ordered anything.
   * **Resolve :** This means that your customer has received his food and is happy.
   * **Reject :** This means that your customer didn't receive his order and left the restaurant.


Let's adopt promises to our ice cream production.

## But wait......

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/634b6oyglkyoccsvr8l7.png)


We need to understand 4 more things ->
   * Relationship between time & work
   * Promise chaining
   * Error handling
   * .finally handler 


Let's start our ice cream shop and understand them one by one by taking small baby steps.


## Relationship of time & work 

If you remember, these are our steps & time each takes to make ice cream.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rphpp2lqjnk7f0tv5g3d.png)

For this to happen, Let's create a variable in JavaScript 👇

```javascript
let is_shop_open = true;
```

now create a function named [ order ] and pass 2 arguments named [ work, time ]

```javascript
let order = ( time, work ) =>{

  }
```

Now, we're gonna make a promise to our customer, "We will serve you ice-cream" Like this ->

```javascript
let order = ( time, work ) =>{

  return new Promise( ( resolve, reject )=>{ } )

  }
```

**Note :** Our promise has 2 parts ->
   * Resolve [ ice cream delivered ]
   * Reject [ customer didn't get ice cream ]

```javascript
let order = ( time, work ) => {

  return new Promise( ( resolve, reject )=>{

    if( is_shop_open ){

      resolve( )

    }

    else{

      reject( console.log("Our shop is closed") )

    }

  })
}
```


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3wik2xel68yue93yapm6.png)


Let's add the time & work factor inside our Promise using a [ setTimeout() ] function inside our [ if statement ]. Follow me 👇

**Note :** In real life, you can avoid the time factor as well. This is completely dependent on the nature of your work.

```javascript
let order = ( time, work ) => {

  return new Promise( ( resolve, reject )=>{

    if( is_shop_open ){

      setTimeout(()=>{

       // work is 👇 getting done here
        resolve( work() )

// Setting 👇 time here for 1 work
       }, time)

    }

    else{
      reject( console.log("Our shop is closed") )
    }

  })
}
```


Now, we're gonna use our newly created function to start ice-cream production. Let's start !

```javascript
// Set 👇 time here
order( 2000, ()=>console.log(`${stocks.Fruits[0]} was selected`))
//    pass a ☝️ function here to start working
```

The result 👇 after 2 seconds


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/erzjup8wt505j502e73n.png)


good job !

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8taajvjy6pfq35hu90nq.png)







## Promise chaining


In this method, we are defining what to do when 1st task is complete using the [ .then handler ].  It looks something like this 👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l27ytifkoedl22kc97lh.png)


The [ .then handler ] returns a promise when our original promise was resolved.

#### Example : 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qpeewo19qbhzj47goos.png)

Let me make it more simple, It's similar to giving instruction to someone. You're telling someone to " First do This, Then do this, then this, then...., then...., then...., etc. 
   * The first task is our [ original ] promise.
   * The rest are returning our promise once 1 small work is completed


Let's implement this on our project. At the bottom write these.  👇 

**Note :** don't forget to write the [ return ] word inside our [ .then handler ] Otherwise, it won't work properly. If you're curious, try removing the [ return ] word once we finish the steps

```javascript
order(2000,()=>console.log(`${stocks.Fruits[0]} was selected`))

.then(()=>{
  return order(0000,()=>console.log('production has started'))
})
``` 

The result 👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qhhjaakbi6zshxhi6afy.png)


using the same system, let's finish our project 👇

```javascript
// step 1
order(2000,()=>console.log(`${stocks.Fruits[0]} was selected`))

// step 2
.then(()=>{
  return order(0000,()=>console.log('production has started'))
})

// step 3
.then(()=>{
  return order(2000, ()=>console.log("Fruit has been chopped"))
})

// step 4
.then(()=>{
  return order(1000, ()=>console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} added`))
})

// step 5
.then(()=>{
  return order(1000, ()=>console.log("start the machine"))
})

// step 6
.then(()=>{
  return order(2000, ()=>console.log(`ice cream placed on ${stocks.holder[1]}`))
})

// step 7
.then(()=>{
  return order(3000, ()=>console.log(`${stocks.toppings[0]} as toppings`))
})

// Step 8
.then(()=>{
  return order(2000, ()=>console.log("Serve Ice Cream"))
})
```

The result 👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y0d0f4ys83ctnevkbgxs.png)



## Error handling

This is used to handle our errors when something goes unexpected. But first, understand the promise cycle 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jlm7zwonbxszeaccyohv.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z2ajcu52rxzwq64g81vp.png)


To catch our error, let's change our variable to false.

```javascript
let is_shop_open = false;
```

Which means our shop is closed. We're not selling ice cream to our customers.

To handle this, we use the [ .catch handler] . Just like the [ .then handler ], It also returns a promise, only when our original promise is rejected.

A small reminder here -
   * [.then] works when promise is resolved
   * [.catch] works when promise is rejected


come at the very bottom and write 👇

**Note :** There should be nothing between your previous .then handler and the .catch handler

```javascript
.catch(()=>{
  console.log("Customer left")
})
```

The result 👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lot6engklu29y05q8xyr.png)

**Note :**
   * 1st message is coming from the reject() part of our promise
   * 2nd message is coming from .catch handler

## .finally() handler

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdq3i0agj4volq46ycue.png)

There's something called the finally handler which works regardless whether our promise was resolved or rejected.

**For an example :** Serve 0 customer or 100 customers, Our shop will close at the end of the day

If you're curious to test this, come at very bottom and write these 👇


```javascript
.finally(()=>{
  console.log("end of day")
})
```


The result 👇


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t2j3jf2uofip1d6y2rtt.png)



Everyone ! Please welcome Async / Await !





# Async / Await

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ra7483f90b69pjl2cbae.png)

This is Claimed to be  the better way to write promises and helps to keep our code simple & clean.

All you have to do is, write the word [ async ] before any regular function and it becomes a promise.



## But first, Take a break 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vujyfxz7dg41jhjtcrx.png)


Let's have a look 👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/17f08ygj1odk28hgl9eq.png)

## Before 

To make a promise we wrote

```javascript
function order(){
   return new Promise( (resolve, reject) =>{

    // Write code here
   } )
}
```

## Now [ using Async / Await ]

In Async / Await method, we make promise like this 👇

```javascript
//👇 the magical keyword
 async function order() {
    // Write code here
 }
```














## But wait......


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1pjzw6zl0h21tyyh9u3.png)


You need to understand ->
   * try, catch usage
   * How to use the Await keyword















## Try, Catch usage


[ Try ] keyword is used to run our code [ catch ] is used to catch our errors. It's the same concept as of the one we saw on promises.

Let's see a comparison

**Note :** We'll see a small demo of the format, then we'll start coding

### Promises -> Resolve, reject

We used resolve & reject in promises like this ->

```javascript
function kitchen(){

  return new Promise ((resolve, reject)=>{
    if(true){
       resolve("promise is fulfilled")
    }

    else{
        reject("error caught here")
    }
  })
}

kitchen()  // run the code
.then()    // next step
.then()    // next step
.catch()   // error caught here
.finally() // end of the promise [optional]
```


### Async / Await -> try, catch


Here we work like this format


```javascript
//👇 Magical keyword
async function kitchen(){

   try{
// Let's create a fake problem      
      await abc;
   }

   catch(error){
      console.log("abc does not exist", error)
   }

   finally{
      console.log("Runs code anyways")
   }
}

kitchen()  // run the code
```

**Note :** don't panic, we'll discuss about the [await keyword] next

you can notice, the difference between promises, Async / Await 





## The Await keyword usage

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fry577xha7313ead96xy.png)


The keyword [ await ] makes JavaScript wait until that promise settles and returns its result.


### A practical example 

We don't know which topping customer prefers, Chocolate or peanuts?
We need to stop our machine, go and ask our customer, "Sir, which topping would you love ?"

Notice here, only Our kitchen is stopped, but our staff outside the kitchen will still work like
   * doing the dishes
   * cleaning the tables
   * taking orders, etc.


## A Code Example

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8r5w5aapofalnq882wat.png)


Let's create a small promise, to ask which topping to use. The process takes 3 seconds.

```javascript
function toppings_choice (){
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{

      resolve( console.log("which topping would you love?") )

    },3000)
  })
}
```

now, let's create our kitchen function with the async keyword at first.


```javascript
async function kitchen(){

  console.log("A")
  console.log("B")
  console.log("C")
  
  await toppings_choice()
  
  console.log("D")
  console.log("E")

}

// Trigger the function

kitchen();
```

Let's add other works below the kitchen() call.


```javascript
console.log("doing the dishes")
console.log("cleaning the tables")
console.log("taking orders")
```


The result 


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y0dr669gewtrrd5fd86p.png)


We are literally going outside our kitchen to ask our customer, "what is your toppings choice?" In the mean time, other works are done.


Once, we get the toppings choice, we enter the kitchen and finish the job.


### Small note 

When using Async/ Await, you can also use the [ .then, .catch, .finally ] handlers as well which are a core part of promises.


### Let's Open our Ice cream shop Again

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vzw8gp721oecwo2b3l6s.png)


We're gonna create 2 functions ->
   * kitchen : to make ice cream
   * time : assigning amount of time each small task will need to accomplish.


Let's start ! First, create the time function ->

```javascript
let is_shop_open = true;

function time(ms) {

   return new Promise( (resolve, reject) => {

      if(is_shop_open){
         setTimeout(resolve,ms);
      }

      else{
         reject(console.log("Shop is closed"))
      }
    });
}

```




Now, Let's create our kitchen ->

```javascript
async function kitchen(){
   try{

     // instruction here
   }

   catch(error){
    // error management here
   }
}

// Trigger
kitchen();
```


Let's give small instructions and test if our kitchen function is working or not

```javascript
async function kitchen(){
   try{

// time taken to perform this 1 task
     await time(2000)
     console.log(`${stocks.Fruits[0]} was selected`)
   }

   catch(error){
     console.log("Customer left", error)
   }

   finally{
      console.log("Day ended, shop closed")
    }
}

// Trigger
kitchen();
```

The result, When shop is open 👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lptup827qau72e83deuv.png)


The result when shop is closed 👇
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r8pjz1qlw58ap8pq7crz.png)


So far so good ! 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cnkgk63x51wth2byxzfe.png)

Let's complete our project. 

Here's the list of our task again 👇


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7wthn0jr5vw7vb02e4qg.png)

first, open our shop 

```javascript
let is_shop_open = true;
```

Now write the steps inside our kitchen() function following the steps 👇


```javascript
async function kitchen(){
    try{
	await time(2000)
	console.log(`${stocks.Fruits[0]} was selected`)

	await time(0000)
	console.log("production has started")

	await time(2000)
	console.log("fruit has been chopped")

	await time(1000)
	console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} added`)

	await time(1000)
	console.log("start the machine")

	await time(2000)
	console.log(`ice cream placed on ${stocks.holder[1]}`)

	await time(3000)
	console.log(`${stocks.toppings[0]} as toppings`)

	await time(2000)
	console.log("Serve Ice Cream")
    }

    catch(error){
	 console.log("customer left")
    }
}
```


The result 👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qs9yccq9209u7m9lquju.png)


























# Conclusion

Here's Your Medal For reading till the end ❤️

## Suggestions & Criticisms Are Highly Appreciated ❤️

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/usxsz1lstuwry3jlly4d.png)



   * **YouTube[ / Joy Shaheb](https://youtube.com/c/joyshaheb)**

   * **LinkedIn[ / JoyShaheb](https://www.linkedin.com/in/joyshaheb/)**

   * **Twitter[ / JoyShaheb](https://twitter.com/JoyShaheb)**

   * **Instagram[ / JoyShaheb](https://www.instagram.com/joyshaheb/)**



# Credits -

   * [Collection of all the images used](https://www.freepik.com/user/collections/promises-article/2046500)
   * [Unicorns](https://www.flaticon.com/packs/unicorn-4), [kitty avatar](https://www.flaticon.com/packs/kitty-avatars-3)
   * [tabby cat](https://www.pexels.com/photo/brown-tabby-cat-with-slice-of-loaf-bread-on-head-4587955/), [Astrologist Woman](https://www.pexels.com/photo/young-female-astrologist-predicting-future-with-shining-ball-6658693/), [girl-holding-flower](https://www.pexels.com/photo/woman-in-white-dress-holding-white-flower-bouquet-3981511/)
   * [Character emotions](https://www.vecteezy.com/vector-art/180695-people-mind-emotion-character-cartoon-vector-illustration)