Having "fun" with YavaScripts

yavaScripts-00.js

// Classic completionHandler callback scenario

// Creating the timerFunction()

const timerFunction = function(completionHandler) {
  console.log('Setting first timeout of 1 second');

  setTimeout(function() {
    console.log('Setting second timeout of 2 seconds');

    setTimeout(function() {
      console.log('Setting third timeout of 3 seconds');

      setTimeout(function() {
        console.log('We have completed all the timers');

        completionHandler();
      }, 3000);
    }, 2000);
  }, 1000);
};

// Using the timerFunction()

timerFunction(function() {
  console.log('We have completed everything');
});

/*

Output:

Setting first timeout of 1 second
Setting second timeout of 2 seconds
Setting third timeout of 3 seconds
We have completed all the timers
We have completed everything

*/

// Now using promises

// setTimeout wrapper that returns a promise

const timerWrapper = function(time) {
  return new Promise(function(resolve) {
    setTimeout(resolve, time);
  });
};

// Creating the anotherTimerFunction()

const anotherTimerFunction = function(completionHandler) {
  console.log('Promise setting of the first timeout of 1 second');

  timerWrapper(1000)
    .then(function() {
      console.log('Promise setting second timeout of 2 seconds');

      return timerWrapper(2000);
    })
    .then(function() {
      console.log('Promise setting second timeout of 3 seconds');

      return timerWrapper(3000);
    })
    .then(function() {
      console.log('We have completed all the promise timers... again');

      completionHandler();
    });
};

// Using the anotherTimerFunction()

anotherTimerFunction(function() {
  console.log('We have completed everything using promises');
});

/*

Output:

Promise setting of the first timeout of 1 second
Promise setting second timeout of 2 seconds
Promise setting second timeout of 3 seconds
We have completed all the promise timers
We have completed everything using promises

*/

// Now using async/await

// Creating the yetAnotherTimerFunction()

const yetAnotherTimerFunction = async function() {
  console.log('Async setting of the first timeout of 1 second');

  const timer1 = await timerWrapper(1000);

  console.log('Async setting of the first timeout of 2 second');

  const timer2 = await timerWrapper(2000);

  console.log('Async setting of the first timeout of 3 second');

  const timer3 = await timerWrapper(3000);
  
  console.log('We have completed all the async timers');
};

// Consuming the yetAnotherTimerFunction() with async/await pattern

const callYetAnotherTimerFunction = async function() {
  await yetAnotherTimerFUnction();
  
  console.log('We have completed everything with async/await');
}

// Using the callYetAnotherTimerFunction()

callYetAnotherTimerFunction();

/*

Output:

Async setting of the first timeout of 2 second
Async setting of the first timeout of 3 second
We have completed all the async timers
We have completed everything using async/await

*/

Thanks! I made the changes. BTW, I think I vaguely read something about let and const having different scoping rules. Is this true? If so, can you elaborate?