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:
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:
Asynchronous Functions/Code
Now that we understand how JavaScript runs its code and synchronous code, we can now define asynchronous code.
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:
- Pending- Initial state of the program before the promise passes or fails.
- Resolved- A successful promise.
- 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:
Returns:
The above example are both examples of basic synchronous code. Lets see what happens when we add an asynchronous method to one of them:
Returns:
🤔
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:
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:
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. 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 :)
Top comments (0)