Understanding the difference between callback, promise and async await in JavaScript.

learnasynchronous.js

/*-----------------------
 * CALLBACK
 *-----------------------
 */
function get (callback) {
    return setTimeout(() => callback('learn'), 100);
}

function process (value, callback) {
    return setTimeout(() => callback(`${value} asynchronous`), 100);
}

function main () {
    get(value => {
        process (value, res => console.log(res));
    });
}

main();
/* ---- END OF CALLBACK ---- */


/*-----------------------
 * PROMISE
 *-----------------------
 */
function get (callback) {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve('learn'), 100);
    });
}

function process (value, callback) {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(`${value} asynchronous`), 100);
    });
}

function main () {
    get()
        .then(process)
        .then(result => console.log(result));
}

main();
/* ---- END OF PROMISE ---- */


/*-----------------------
 * ASYNC AWAIT
 *-----------------------
 */
async function get (callback) {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve('learn'), 100);
    });
}

async function process (value, callback) {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(`${value} asynchronous`), 100);
    });
}

async function main () {
    let val = await get();
    let result = await process(val);
    console.log(result);
}

main();
/* ---- END OF ASYNC AWAIT ---- */