Before diving into the difference between callbacks and promises first we need to talk about what synchronous and asynchronous code is. Typically javascript runs synchronous code meaning it executes the code from top to bottom. Asynchronous code allows us to run functions simultaneously in javascript. Callbacks and Promises are both ways to write asynchronous code. Asynchronous code is useful when writing code whose response time is unknown, such as HTTP requests to an outside API. It allows for the code to go about doing other things as it waits for the response to the async code.
Callbacks are the classic way to write asynchronous code in Javascript. Callbacks are created when a function has another function as an argument. They are commonly seen in higher-order functions and further utilized in async code.
A callback is called a callback because it is a function that is only called when the outer function calls it back.
function one() {
setTimeout(() => {
console.log('1. First thing setting up second thing');
setTimeout(() => {
console.log('2. Second thing setting up third thing');
setTimeout(() => {
console.log('3. Third thing setting up fourth thing');
setTimeout(() => {
console.log('4. Fourth thing');
}, 2000);
}, 2000);
}, 2000);
}, 2000);
}
Callback Hell occurs when you have callbacks calling callbacks that callback callbacks. While in small doses callback hell isn’t too daunting or worrisome, when code gets more involved callback Hell starts to become more real.
Callback hell is a symptom of a bigger problem in your code. If you are entering the fiery pits of callback hell there is probably an opportunity to break your code up and make it more modular and less dependable upon other functions and therefore easier to debug.
Promises are a way to make callbacks easier to read. They do not change what the callbacks are doing, nor do they change the time complexity of your code. If in callback hell promises will only shove your coding problems in the closet so guests can visit.
Promises are instantiated by using the new keyword and the promise constructor. Promises, in essence, say “I promise to do this whenever that is true. If it isn’t true, then I won’t.
let promise = new Promise(function(resolve, reject) {
// things to do to accomplish your promise
if(/* everything turned out fine */) {
resolve('Stuff worked')
} else { // for some reason the promise doesn't fulfilled
reject(new Error('it broke'))
}
})
Promises have three states, solid, liquid and gas. Just checking if you are paying attention. Promises have three states, pending, fulfilled, and rejected. The initial state of a promise is pending this is before the promise operation begins. When an operation is completed the promise is considered fulfilled. If an operation did not complete it is referred to as Rejected. Usually when a promise is rejected an error is thrown.
The fun thing about promises is that they can be chained using the then() function.
let promise = new Promise(function(resolve, reject) {
// things to do to accomplish your promise
if(/* everything turned out fine */) {
resolve('Stuff worked')
} else { // for some reason the promise doesn't fulfilled
reject(new Error('it broke'))
}
})
The important thing to remember is that promises and callbacks accomplish the same thing, but promises are prettier and easier to read and keep you out of callback hell. They do not, however, fix your code and you should still make it your goal to write more modular code.
Top comments (0)