01/10/2023

Promises

Promises are object that are returned as soon as you call them allow the thread to continue processing and will return once the process inside the promise is complete. Here is a simple example:

function oneSecond(msg) {
    return new Promise((resolve) => {
        setTimeout(()=<span data-mdxt-exe="%0A%09%09%09resolve(msg)%3B%0A%09%09%7D%2C%201000)%3B%0A%09%7D)%3B%0A%7D%0A%0AoneSecond(%22Hello%20World%22).then((msg)%20%3D%3E%20%7B%0A%09console.log(msg)%3B%0A%7D)%3B%0Aconsole.log(%22Promise%20called!%22)%3B%0A%60%60%60%0A%0AThe%20expected%20output%20of%20this%20should%20look%20like%20this%3A%0A%60%60%60text%0A%3E%20%22Promise%20called!%22%0A%3E%20%22Hello%20Word%22%0A%60%60%60%0A%0AAs%20you%20can%20see%20the%20main%20process%20has%20continued%20to%20run%20letting%20the%20code%20in%20the%20promise%20complete%20in%20its%20own%20time.%0A%0A%23%23%23%23%20Callbacks%0ACallbacks%20work%20similarly%20to%20promises%2C%20below%20is%20the%20same%20example%20written%20with%20a%20callback%20instead.%20%0A%60%60%60%0Afunction%20oneSecond(msg%2C%20callback)%20%7B%0A%09setTimeout(()">
            resolve(msg);
        }, 1000);
    });
}

oneSecond("Hello World").then((msg) => {
    console.log(msg);
});
console.log("Promise called!");

The expected output of this should look like this:

text
> "Promise called!"
> "Hello Word"

As you can see the main process has continued to run letting the code in the promise complete in its own time.

Callbacks

Callbacks work similarly to promises, below is the same example written with a callback instead.

function oneSecond(msg, callback) {
    setTimeout(()</span>
            resolve(msg);
        }, 1000);
    });
}

oneSecond("Hello World").then((msg) => {
    console.log(msg);
});
console.log("Promise called!");

The expected output of this should look like this:

text
> "Promise called!"
> "Hello Word"

As you can see the main process has continued to run letting the code in the promise complete in its own time.

Callbacks

Callbacks work similarly to promises, below is the same example written with a callback instead.

function oneSecond(msg, callback) {
    setTimeout(()=<span data-mdxt-exe="%0A%09%09callback(msg)%3B%0A%09%7D%2C%201000)%3B%0A%7D%0A%0AoneSecond(%22Hello%20World%22%2C%20(msg)%20%3D%3E%20%7B%0A%09console.log(msg)%3B%0A%7D)%3B%0Aconsole.log(%22Callback%20called!%22)%3B%0A%60%60%60%0A%0A%23%23%23%23%20Differences%0APromises%20are%20returned%20by%20the%20main%20function%20while%20callbacks%20are%20not%20called%20until%20the%20code%20inside%20has%20been%20completed.%20Promises%20also%20have%20a%20couple%20of%20other%20features%20like%20the%20ability%20to%20run%20asynchronously%20and%20synchronously%20using%20the%20%60await%60%20keyword.%20Below%20is%20an%20example%20using%20the%20same%20%60oneSecond()%60%20function%20above.%0A%60%60%60%0Alet%20msg%20%3D%20await%20oneSecond(%22Hello%20World%22)%3B%0Aconsole.log(msg)%3B%0Aconsole.log(%22Promise%20called%22)%3B%0A%60%60%60%20%0A%0AThe%20output%20would%20look%20like%20this%20because%20the%20thread%20waits%20for%20the%20promise%20to%20fulfill%20itself%20before%20continuing.%0A%60%60%60%0A%3E%20%22Hellow%20World%22%0A%3E%20%22Promise%20called%22%0A%60%60%60%0A%0AAnother%20feature%20of%20promises%20is%20the%20ability%20to%20reject%20the%20promise%20if%20an%20error%20occurs.%0A%60%60%60%0Afunction%20oneSecond(msg)%20%7B%0A%09return%20new%20Promise((resolve%2C%20reject)%20%3D%3E%20%7B%0A%09%09if%20(msg.length%20%3C%205)%20%7B%0A%09%09%09setTimeout(()%20%3D%3E%20%7B%0A%09%09%09%09resolve(msg)%3B%0A%09%09%09%7D%2C%201000)%3B%0A%09%09%7D%20else%20%7B%0A%09%09%09reject(%22Message%20too%20long%22)%3B%0A%09%09%7D%0A%09%7D)%3B%0A%7D%0A%0AoneSecond(%22Hello%20World%22).then((msg)%20%3D%3E%20%7B%0A%09console.log(msg)%3B%0A%7D).catch((err)%20%3D%3E%20%7B%0A%09console.log(err)%3B%0A%7D)%0Aconsole.log(%22Promise%20called!%22)%3B%0A%60%60%60%0A%0AThe%20output%20would%20look%20like%20this.%0A%60%60%60%0A%3E%20%22Message%20too%20long%22%0A%3E%20%22Promise%20called%22%0A%60%60%60%0A%0AThe%20error%20message%20shows%20first%20because%20the%20if%20statement%20doesn't%20ever%20call%20the%20%60setTimeout%60%20function%20because%20the%20message%20is%20greater%20than%205%20characters.%20When%20the%20reject%20function%20is%20called%2C%20the%20output%20skips%20all%20of%20the%20%60then%60%20statements%20and%20just%20to%20the%20%60catch%60%20statement%20that%20handles%20all%20rejections">
        callback(msg);
    }, 1000);
}

oneSecond("Hello World", (msg) => {
    console.log(msg);
});
console.log("Callback called!");

Differences

Promises are returned by the main function while callbacks are not called until the code inside has been completed. Promises also have a couple of other features like the ability to run asynchronously and synchronously using the await keyword. Below is an example using the same oneSecond() function above.

let msg = await oneSecond("Hello World");
console.log(msg);
console.log("Promise called");

The output would look like this because the thread waits for the promise to fulfill itself before continuing.

> "Hellow World"
> "Promise called"

Another feature of promises is the ability to reject the promise if an error occurs.

function oneSecond(msg) {
    return new Promise((resolve, reject) => {
        if (msg.length < 5) {
            setTimeout(() => {
                resolve(msg);
            }, 1000);
        } else {
            reject("Message too long");
        }
    });
}

oneSecond("Hello World").then((msg) => {
    console.log(msg);
}).catch((err) => {
    console.log(err);
})
console.log("Promise called!");

The output would look like this.

> "Message too long"
> "Promise called"

The error message shows first because the if statement doesn't ever call the setTimeout function because the message is greater than 5 characters. When the reject function is called, the output skips all of the then statements and just to the catch statement that handles all rejections callback(msg); }, 1000); }

oneSecond("Hello World", (msg) => { console.log(msg); }); console.log("Callback called!");

#### Differences
Promises are returned by the main function while callbacks are not called until the code inside has been completed. Promises also have a couple of other features like the ability to run asynchronously and synchronously using the `await` keyword. Below is an example using the same `oneSecond()` function above.

let msg = await oneSecond("Hello World"); console.log(msg); console.log("Promise called");

The output would look like this because the thread waits for the promise to fulfill itself before continuing.

"Hellow World" "Promise called"

Another feature of promises is the ability to reject the promise if an error occurs.

function oneSecond(msg) { return new Promise((resolve, reject) => { if (msg.length < 5) { setTimeout(() => { resolve(msg); }, 1000); } else { reject("Message too long"); } }); }

oneSecond("Hello World").then((msg) => { console.log(msg); }).catch((err) => { console.log(err); }) console.log("Promise called!");

The output would look like this.

"Message too long" "Promise called"

The error message shows first because the if statement doesn't ever call the `setTimeout` function because the message is greater than 5 characters. When the reject function is called, the output skips all of the `then` statements and just to the `catch` statement that handles all rejections.