DEV Community: Yo

Callbacks

Yo — Thu, 21 Apr 2022 17:26:29 +0000

Callbacks

Functions are first class objects in JS. Meaning, you can pass a function as an argument into another function and
execute as per the need.
Asynchronous callbacks are often used as a continuation of the program after an async operation.
Callbacks are by far the most common way that asynchrony in JS programs (Before ES6 promises).

Imagine you have an ajax utility to fetch a resource and based upon the result you need to make further request

// Nested callbacks
listen("click", function (event) {
  ajax("http://example.com/first", function (respone1) {
    if (response1) {
      ajax("http://example.com" + response1, function (response2) {
        console.log("Response", response1 + response2)
      })
    }
  })
})

One of the problem with Callbacks, easily we end up in nested callbacks, or sometimes it is referred to as
Callback hell. But there is more to Callback hell than just nested callbacks. It is difficult to imagine sequential way
of flow using callbacks, it is always jumpy when you have more async callbacks

doA(function () {
  doC();

  doD(function () {
    doF();
  });

  doE();

});

doB();

Outputs: A -> B -> C -> D -> E -> F (if all the above functions are async)

what if doA() or doD() aren't async. The output would be A -> C -> D -> F -> E

Handling Failures

There is no norm how to handle error handling in Callbacks. Few libraries (NodeJs API) follow err first argument
approach followed by actual response.

function response(err, data) {
  if (err) {
    console.error(err);
  } else {
    console.log(data);
  }
}

Each team or library follows different conventions of handling callbacks and how they do error handling.
err and data needs to be checked for all callbacks which adds more redundant code. Imagine you have to do for sequence of async callbacks A -> B -> C.
Nesting along with error handling and redundant checks are the ones which make Callbacks Hell

Trust issues with Callbacks

Imagine you have a third party utility to do certain async action and post that your callback executes some important
stuff.

    thridParty.doAction(function () {
  // Important stuff for your app goes here which needs to be executed  
})

What if there is a bug in third party utility, and probably you must think of different possibilities

If the callback is never called
If the callback is called more than once
How errors/exceptions are handled? Are they swallowed or propagated to the callback

Above trust issues with callback hell and more boilerplate code for error handling are bottleneck for scaling
applications. That lead us to next asynchronous way of handling Promises

Now & Later

Yo — Sun, 17 Apr 2022 11:08:57 +0000

You Don't Know JS - Async & Performance

I'm currently reading You Don't Know JS series(Async & Performance) book, I'm planning to make notes of important concepts and code snippets in this series.

More details about the series:https://github.com/getify/You-Dont-Know-JS

Now & Later

In JavaScript, program/function can either run Now or Later. The relationship between them is the heart of asynchronous programming.

let answer = 1;

function now() {
  return answer;
}

function later() {
  answer = answer * 2;
  console.log("Answer:", answer);
}

now(); // 1

setTimeout(later, 1000); // Answer: 2

All the statements in the above program run Now except for the body of later() function. i.e,

  answer = answer * 2;
  console.log("Answer:", answer);

Another example is how we make Ajax requests to fetch data from the server.

  // ajax() is some utility to make Ajax requests
  const data = ajax("example.com");
  console.log(data); // Oops, you won't get data as expected

  // Both the above statements run Now, ajax calls is a Network call so it would take some time to fetch results. That's the reason we won't get data to be resolved.

Event Loop

Javascript just recently before (ES6) has never had asynchrony built into it. JS engine doesn't run in isolation, it is always supported by Hosting environment like Browsers, and NodeJs.

One common "thread" of all the environments does the magic to execute multiple chunks of your program over time at each moment invoking the JS engine, called the "Event Loop"

Find more about the Event Loop
Visualise how Event Loop works (Call Stack, Micro Task Queue, Task Queue)

Jobs

As of ES6, there is a new layer on top of the event loop called Jobs queue. There are a few special async events handled by this queue like Promises. There is a difference in how the event loop handles timers like setTimeout and Promises.

Timers
Timers are always added to the next tick of the event loop.

Promises
Promises are added to the Jobs queue which is handled by end of the ongoing tick in the event loop instead of the future tick.


console.log('A');

// Timers
setTimeout(function () {
  console.log('B');
}, 0);

// Promises
const p = Promise.resolve('C');
p.then(function (value) {
  console.log(value)
});

Output: A C B instead of A B C though we set the timer to 0 milliseconds.

Titbits: Promises

Yo — Thu, 14 Apr 2022 18:53:24 +0000

// Example 1:

const p = Promise.resolve('A');

p.then(function (val) {
  console.log(val);
  p.then(function () {
    console.log('D');
  });
  console.log('B');
});

p.then(function () {
  console.log('C');
});

// Example 2:

const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('A');
  }, 100);
});

p.then(function (val) {
  console.log(val);
  p.then(function () {
    console.log('D');
  });
  console.log('B');
});

p.then(function () {
  console.log('C');
});

What is the output of Example 1 and 2?

Both logs same output: A B C D

Few things to observer

It doesn't matter if the promise is immediately resolved (Example 1) or took 100ms in (Example 2), the output remains the same. Because promises behaves asynchronous all the time.
We are calling p.then multiple times, i.e A promise is once resolved it has immutable value either resolved or rejected.
Why can't the output be A D B C?

// Step 1
p.then(function (val) {
  // Step 2
  console.log(val)
  p.then(function () {
    // Step 3
    console.log('D')
  })
  console.log('B')
})

Promises are added to job queues in the Event loop, it has a tick which loops and executes any callback event queues scheduled. For every one such tick or end of one async loop, it checks for the job queues and runs execute any callbacks.

In the above example inside Step 2, JS engine starts printing first console and adds p.then to job queue and prints B. And finally job queue picks up after the async loop and executes Step 3.

Event loop

Yo — Thu, 07 Apr 2022 16:17:35 +0000

This is my first dev blogpost and doesn't matter if it is just couple of sentences. Couple of sentences are still better than not writing at all. This week I'm writing brief about Event Loop

Event Loop

Javascript engine runs chunks of JS code on a single thread process. Usually it co-exists with hosting environment like Browser or Node JS. Typical job of the JS engine is to just run the chunks on-demand basis. Overall orchestration of when to run a chunk of code is handled by the hosting environment Event Loop .

Event Loop as the name says it is loop which iterates over the events. Each iteration of the loop is called as Tick in which it tries to execute the events scheduled in the callback queue. These events are nothing but the callbacks functions. Imagine you are fetching a resource over REST API and it is an asynchronous event and when it is complete in due time you would like your function invoked with response of API. This function is nothing but the Callback which gets executed by the event loop when the API is successful.

There are other different queues other than callback queues in the Event loop like Job Queues and there is special way timers(setTimeout) are handled in Event loop.

Hello world! Everyone has to start somewhere...

Yo — Thu, 07 Apr 2022 15:16:12 +0000

Hello everyone, I'm planning to write a dev blog every Thursday. I have 10+ years of experience in software development and I always use to shy away from writing any kind of blogs/tech writings. Probably because I'm too scared that others would point out mistakes or there is already good content on that topic or I suck at writing.

I want to improve my tech skills by blogging about it. It doesn't matter if I write mistakes in my blog posts. I want to get better and improve at least 1% from my previous mistakes. I will start small and try to write on every Thursday.