Quick Guide to Synchronous vs Asynchronous JavaScript and Callback Functions + Fetch
Tags: javascript, beginners, webdev
Published: 2022-09-21 10:03:35

People and programmers alike will encounter many things/expressions when learning to code and/or coding. A few of these expressions are the different ways people will describe certain functions. A couple of these are _synchronous_, _asynchronous_, and _callback_ functions.

**Callback Functions**
Let's start with callback functions. The simple way to define callback functions is that they are functions that are passed as arguments into other functions. This function is then **invoked** and completes some type of action. You will use callback functions quite a lot and quite more often as you code. They are very useful tools! A good example of their uses are that they are the specific 'arguments' that have to be passed in: Array iterator methods, eventListeners, etc. 
Example:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ms1j5zg1blhgqpu9x6g3.png)
**Synchronous Functions/Code**
Before we define synchronous and asynchronous functions we must first understand how JavaScript runs. JavaScript is a single threaded language. This means that JavaScript will only perform one action or piece of logic at a time when running code. With this being understood, we can now define synchronous functions/code. The definition of the word synchronous is, 'existing or occurring at the same time'. This is a good way to think of synchronous code. JavaScript runs the code sequentially from top to bottom, waiting only for the previous line of code. This type of code is one we're most used to.
Examples of synchronous code are:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uf80qoiootnrejw1ng7r.png)

**Asynchronous Functions/Code**
Now that we understand how JavaScript runs its code and synchronous code, we can now define asynchronous code.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ld1mvgw3wasveq44s70j.png)
This type of code runs _asynchronously_. Meaning that when JavaScript runs its code, it will read that line of code and put it on the "back-burner" while JavaScript does other work- until that code or function finishes its work. This method returns a **promise** to JavaScript. A promise is essentially in the name- a promise. You promise JavaScript the eventual completion or failure of an asynchronous operation. A promise can be in one of three states: 
1. **Pending**- Initial state of the program before the promise passes or fails.
2. **Resolved**- A successful promise.
3. **Rejected**- A failed promise.

Two examples of asynchronous code/functions are the setTimeout() and fetch(_<--more on this later_) methods. Lets look at a couple examples of sync vs async code:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p6xvwtz5pb8xuos9xf0t.png) Returns:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ubibu5jc2d0lfm89x48m.png)
The above example are both examples of basic synchronous code. Lets see what happens when we add an asynchronous method to one of them:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kklwy68y5s1czgkwwlx9.png) Returns:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nuvevu2eunw8lp0kts9z.gif)🤔
The above example here is a bit of synchronized code on the 2nd line and an asynchronized piece of code on the first line! This gives you an idea on how JavaScript will "back-burner" that code and run other code until the "back-burner" code finishes.

**Fetch()**
One method, touching again on the promise concept, and another example of  asynchronous functions are fetch requests. Fetch() is a global method that is used to retrieve data. The path link to the data that is in the parentheses is this function's **argument**.This argument is a promise object.
Example:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yddakafx7d0dtpqx520l.png)
In the above example as you can see the fetch request is followed by two .then's. Tying together what we touched on in the beginning, they both take a **callback function** as an argument. The first .then extracts the JSON content from the promise object by using JavaScript's built in .json() method (resp => resp.json()), making the data useable for us! The second .then uses it's callback function to do whatever we want with this data (.then((data) => console.log(data));)! Fetch essentially touches on everything we covered earlier from callback functions to asynchronous functions! Fetch has _several_ requests that you can make with several different ways to use it. Here are some good resources to cover the different requests:

- [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
- [GET](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET)
- [POST](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST)
- [PATCH](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/PATCH)
- [DELETE](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/DELETE)

**Conclusion**
Here we learned what callback functions are, the difference between synchronous vs asynchronous code/functions, and how fetch() can tie all of these things together. These concepts can be kind of hard to grasp for the unfamiliar, but as always the best thing you can do is practice. If you would like to read a bit more on asynchronous JavaScript, you can [here](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous). If you made it this far, thank you for your time reading through. I hope you could have learned something new or maybe refreshed yourself on existing knowledge. Be well, never stop moving forward, and happy coding :)