Promise, Callback Hell, Synchronous and Asynchronous in Javascript

Promise:
A Promise is an object in JavaScript that represents the result of an asynchronous operation. It acts like a placeholder for a value that will be available in the future (success or failure).

If the work is successful, then it will give result (resolve).
If the work fails, then it will give error (reject).

A promise has 3 states :

Pending → The operation is still running.

Fulfilled (Resolved) → The operation finished successfully, and we got a value.

Rejected → The operation failed with an error.

Example:

<script>
function task(step, result) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(step);

            if (result) {
                reject(step + " failed ");
            } else {
                resolve(step + " completed ");
            }

        }, 1000);
    });
}

task("Analysis")
    .then(() => task("Planning"))
    .then(() => task("Design", true))   
    .then(() => task("Development"))
    .then(() => task("Testing", true))
    .then(() => task("Deployment"))
    .catch((err) => console.log("Error:", err))
    .finally(() => console.log("Workflow finished"));
</script>

Callback Hell:
A callback is simply a function passed as an argument to another function, and it is executed later when a task is done. When we do many tasks one after another using callbacks, the code keeps going deeper inside. This makes the program hard to read and understand. This problem is called Callback Hell.

For building a software project, it often involves moving step by step like this:

Analysis → Understand the requirements

Planning → Make a roadmap

Design → Decide how it should look and work

Development → Write the code

Testing → Check if everything works correctly

Deployment → Release the application

Example:

setTimeout(() => {
    console.log("Analysis");
    setTimeout(() => {
        console.log("Planning");
        setTimeout(() => {
            console.log("Design");
            setTimeout(() => {
                console.log("Development");
                setTimeout(() => {
                    console.log("Testing");
                    setTimeout(() => {
                        console.log("Deployment");
                    }, 1000);
                }, 1000);
            }, 1000);
        }, 1000);
    }, 1000);
}, 1000);

Synchronous function:
A synchronous function is a function that runs line by line, in order. Each task must finish first before the next one starts. The program waits until the current function is done.

Example:

console.log("Start")
console.log("Task done")
console.log("End")

Output: Start
Task done
End

Asynchronous function:
An asynchronous function is a function that allows the program to continue running without waiting for the task to finish. The task runs in the background. Other code keeps running while waiting for the result. When the task is finished, it notifies the program (using callbacks, promises, or async/await).

Example:

console.log("Start")
setTimeout(() => {
    console.log("Task done")
}, 2000)
console.log("End")

Output: Start
End
Task done
Here, "Task done" is executed after a 2-second delay.

DEV Community

Promise, Callback Hell, Synchronous and Asynchronous in Javascript

Top comments (0)