Callbacks vs Promises in JavaScript
- January 12, 2024
- Posted by: MainInstructor
- Category: BASIC Go Java JavaScript Node
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2024/01/1705099478_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: Callbacks vs Promises in JavaScript
Hi guys this is Amer today I’m gonna be talking about call back versus promises most people ask about what is the difference between these two concepts in JavaScript are a node GS that is the framework of JavaScript you might be confused with call back and promises and
Who in what scenarios we should use a call back versus a promises so I’ll be giving you examples that what is the difference between these two in which situation we need to decide whether we want to use a call back or we want to use a promise so let’s get started and
Write the code before writing the code I want to let all of you know that if you want to buy a book related to JavaScript and that is a really good book I’m gonna give the link of this book in the description below if you want to learn
The more advanced java script with examples then this is a really good book and that includes a really good examples for you to learn even if you already know javascript that will really help you in learning more advanced concepts of JavaScript so first of all I will
Talk about callback in JavaScript so far callback we need to define functions and each function will execute asynchronously and the second function will be dependent on the first function and the third function will be dependent on the second function and so on let me write an example that I’ll explain you
What it all about so first of all we need to define a function so I’m gonna define three functions that can be any number of functions like function first and that takes a value and takes a callback so I’m gonna copy this function and I’m gonna paste it two more times
And I’m going to change the name of these functions to second and third okay so now what I want to do is I want to call the first function and unless it doesn’t return me a nice cific result or a response I don’t want my second function to be called and
Similar for the third function so I will use a callback for making it dependent on each other so first of all I will call first function and I will send it a value so let’s say I’m sending a dove value to and after that I need to send
It a function as a parameter so function first result and if there is an error so what it means that I’m sending out to two will be received in this value and this whole function will be sent to this callback parameter all right and using this callback parameter that can be
Anything I’ve just written it called back that is more meaningful using this callback parameter I can return the value that can be received within this first result and then I can send out a boolean whether it’s a error or not so let me return like callback and the
First value is value plus two and after that I need to send out if there is an error or not so there is no error okay so in here I am checking if there is an error if there is no error then call the second function so I’m copying this
First function and after that I’m calling my second function and I am receiving the second result and in the second function I’m sending out the first result okay so just copy it and paste it call the third function and I will receive a third result from
Here and inside it I will check the result so third result okay so I’m gonna copy these callback statements okay so that’s it now what it is doing first of all I’m sending out to two is being received within this value and inside this first function I’m using this callback this is
A being refer to a function okay and using this function called back I am adding to within the value and returning this value and this boolean value in that callback function okay and then inside this function I’m checking out if there is an error if there is no error
Then I’m calling out the second function okay and inside the second function I am sending out the result of the first callback function okay and that will be received here and again I am adding up two and calling back and that callback will send out these two values in the
Callback function of this second function and that will be received in the second result and error and I’m checking out if there is no error that I’m calling out the third function and that can reach up to unlimited number of functions okay so the purpose of doing
It in this way is that if there is there I’m just adding up these two value and that takes no time okay but what if we are calling a server cause we are calling an API and we are fetching out a very big data that is actually take some
Time so and that data is need for this second function okay so I have called the second function within the first function it means that unless and until the first function doesn’t return a specific value right here don’t call this second function and if the second function this
Callback of the second function doesn’t return the result right here then until and unless don’t call the third function and same goes further okay and same for the third function of force function or fifth function or we can call a hundreds of functions like this okay so let’s try
It let’s dry run it first of all I’m sending out two that will be four folders will be received right here and four is sent out right here 4 plus 2 6 and 6 will be received here and 6 is going to send out here and that will be
Add up here and that will be become it and then it should be printed right here so let’s check out the result whether it’s working or not so I’m going to click on run and run script yes I’m using webstorm you might be using other IDE that can be other that can have
Other way to run the scripts but I have this way in webstorm so let’s click on run script and go to terminal and you can see it has shown me the result 8 and that is correct okay so let me first try and give you an overview that how it is
Working so first result and I’m copying this line and Here I am sending out the second result ok so now let’s run it again so now you can see it has printed 4 6 8 and you can see that first is printed the 4 and it didn’t print the
Result of the second function before the result of the first function because the second function calling is dependent on the result of the first function so that is like if we want to face the data from a server like we want to face the all the tweets are from Twitter and that
Tweets needs to be saved in database so we can’t save an empty data to the database first we need to verify whether the all the data have been fetched from the Twitter and if the all the data have been fetched from the Twitter then we will save that data to the database so
That is really helpful to use the callback function so now let’s talk about promises let me give you an example then I will compare callback and promises and give you an idea of what to use when and what is good for you people to use in various scenarios okay so I’m
Going to comment this much code okay and below that I’m going to use these same functions with the help of promises in fact I won’t be commenting this these functions I’ll be just commenting this first this usage of these three functions okay so right here there are
Many ways to use the promises in JavaScript and nodejs there are various modules available extensions available that provide promises but right now in JavaScript I will just give you an overview using a promise constructor function that is pretty basic and the general usage of promises and that is
Very easy to understand and I just want to give you guys an idea that what is promises and how to use it okay so now first of all I need to create a variable of a promise using a constructor promise function so I will use promise equals to new promise and it
Needs a function and that returns a result and reject and for returning the data from within the promise we need to use this resolved parameter and that is actually the function calling so inside Eid let’s return to okay so by using this promise we can execute a function
Or multiple functions so let’s execute only one function first and see whether it’s working or not so using this promise dot then and function and response and inside it let’s bring the response right now I’m not calling the first second and third function so these are just a return here
These are not being used right now so let’s save this file and I’m going to click on run and run script and you can see it has printed – okay so what it is doing is using this promise variable it is using this then function make sure
And remember that if you are using a constructor promise function and in most of the cases most people use the same technique of using promises they use then it means that don’t call don’t execute this function that is within the then function unless and until this promise return the result okay and when
This promise will Reiser return the result when this resolve will be caught and we can call a server call inside it we can call a database call we can call any kind of API right now it not take any time but if you are calling a server
Call that might take time so we need to add promises inside it or even we can use callbacks inside the promises as well okay so now let’s create and use these more functions inside these promises so first of all let me remove this control double yolk response
And I’m going to use this function okay so so I’m going to remove this function and before using these functions let me remove the callback because we are using promises so we don’t need call back right here and instead of these callbacks we need to return these values
Okay so let’s copy this line and copy here and copy here okay so now let’s use this promise dot then and we need to call the functions so then first dot then second dot then third dot then and function and response and console dot log and response okay so let’s run it
And you can see it has printed eight so let me explain you how is it working so promise dot then and I’m using this function and it is calling this function I’m not sending out any value inside it instead it will automatically receive the value from the previous function
Right here the previous result of this promise is this this promise this function and whatever will be returned from this resolve is becoming the parameter that is going to be sent from within this then and this first function okay so this is being sent out to right
Here and then two plus two equals to 4 and then 4 is being used in the second function and then four three is being received here 4 plus 2 equals to 6 and it is called third and third is receiving 6 and then
6 plus 2 equals to 8 and then 8 is being received within this response and that response is being logged out and that’s why you have seen that result 8 ok so let’s compare the callbacks and the function we are executing the same kind of functionality using the
Callbacks and the functions we can also use before returning right here we can also use callback function we can use the promises within the callbacks or a callback within the promises so it’s up to us that how we want to use it ok we need to use a callback right here if
Within this first function we need to fight the data from somewhere that will take time so we don’t want to return the value from here until it it it receives the data from that server ok so we need to wait for the server to send the data
And then we will receive we can return the data within that callback function okay so right here let me bring it up a bit so in callback we use this bunch of code right here but in promises we just wrote this function so you can see that the in
Promises we have the minimal lines of code and that is more cleaner and in callbacks that becomes more messy and that is very difficult to understand if we want to see and revise our code after a few months then we must be able to remember it that what I did and right
Now these are just three callbacks but in real-time applications we might have 20 plus or the 50 plus callback functions within the other function so that will become really messy and that messiness is generally known as callback hell so contact hell lead us to the promises and that forced us to use the
Promises because promises are more cleaner and more easy to remember or easy to revise in the future okay so that’s why if we want to use promises or if we want to call so many functions that are dependent on the other function results then it is recommended that we can use promises and
We need to use promises we can also use callbacks but that will not be a good practice for other people who are your team members who want to see the code that will be difficult for them to get the idea what is happening here so that is the actually reason both are the
Things are saying both perform the same functionality there is nothing that a callback can do that a promise can’t do and same as the promise there is nothing that promise can do that a callback can’t do so it’s up to you it’s up to us
That how we want to use both the things we can merge both the things so but we want to follow the best practices and make our code more cleaner and more good-looking so that’s it for this video I hope that you have liked it if you have any question just comment below and
I just want to remember you that in the next video I will be talking about asynchronous programming in node.js and that will be very helpful for you guys who wants to write asynchronous nowadays and many things is asynchronous so we need to learn that what are the best practices of writing asynchronous code
Using node so wait for it make sure to subscribe my channel don’t forget to subscribe that is really helpful for us that really support us that encouraged us to create more and more new videos thanks for watching stay tuned
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Very good explain
Your lessons are incredible. One of the better js tutorials on here
thank you lot , i am doing mern stack course , pls help if there is any internship
👍👍👌
Awesome!! You nailed it.
so how do we pass vaues to rejects in promises (when the call fails). Does it takes false after any timeouts or anyother way?
TOO MUCH ADDS DISTURB ME
Could this be more confusing?!?!?
Wooow….. You made very simple way of explaining Call back and promise !!! Kudos !!!!
VERY WELL EXPLAINED
Oi bai 2014.2016 quelion
Could you help me, please. Well, first let me thank you for all those wonderful videos you took time to produce and share online. God bless you for that.
In your example regarding promises you set your resolve value to a hard coded value of 2.
To my understanding this value will be returned after every "then". Which should bring the end result to 2 regardless of what "first", "second" and "third" functions return.
Also how comes "first", "second" and "third" are called in "then" methods since they do not have a resolve clause.
Thank you.
Kind Regards
Nice
Good video! Thanks.
thx its helpful
bro, your tut is awesome.. i loved it.. i used promises many times but i never understood them.. but tut made me so easy
and don't forget to add .catch(error) in the end of promise chain
Set playback speed at x1.5
Nice bro
superb
You showed the resolve part. What about the reject part? How do you handle that?
Awesome video. I like the way you describe the thinks but needs a real time example so it clear more in real application way..
excellent teaching style
how to achieve synchronous forloops
Too many ads
Confusing
Thanks Omer, this is the best explanation I found on the net explaining the difference and use of both! Can I reach you by email?
forgot to explain 'reject' and catch method of promise
Thank you,…..very clear and detailed explanation….I benefited…..
nice , thanks
u make it more complicated
You are speaking slowly and clearly. This is great for a learner like us. Thanks for explaining
I'm pretty sure node.js is not a framework of JavaScript. Actually, it is a runtime environment for JS code.
It is great.
I totally get the problem. It happens alot to me on ajax calls. The line below my ajax call fires before I get the value from my ajax call..and I too used the same technique. That is added all cases inside the success callback of the ajax so that they only fire after the value is recieved
Awesome! Very well explained.
There is difference between promise and callback like Promise.all(). Using promise, we can call(asynchronously) all the promises inside an array.
thx
Confusing
Awais Mirza
In the "Java Game Programming – Develop a Brick Breaker Game"
the ball flies through the right wall. How to fix it?
+Awais Mirza can i ask you a question regarding intellij idea? i was trying to run on my computer command prompt to execute the intellij idea .java files. But i cant find the .java files and i always encounter "could not find main class". Could you help out? Really appreciate your java beginners video.
+Awais Mirza
Could you take a quick look at your video called: "JAVA DATABASE TUTORIAL WITH SQLITE Create School management System". I have a really important question
thanks
Sir teach Javascript with html with. .. the example