DEV Community: Sagar Rout

Never again, be stumped by JS Abstract Equality 🤔

Sagar Rout — Sun, 07 Feb 2021 12:36:57 +0000

JavaScript has Strict Equality a.k.a === comparison and Abstract Equality a.k.a == comparison. It is the latter's lack of understanding which might cause bugs.

Contents
Rules
ToPrimitive, ValueOf, ToString
Implementing ToPrimitive

Rules

These are the rules which come into effect while resolving the abstract equality -

If x=null and y=undefined, return true;
If x=undefined and y=null, return true;
If Type(x) is same as Type(y) then perform strict equality comparison.
If Type(x)=Number and Type(y)=String, return result of x==ToNumber(y)
If Type(x)=String and Type(y)=Number, return result of ToNumber(x)==y
If Type(x)=Boolean, return result of ToNumber(x)==y
If Type(y)=Boolean, return result of x==ToNumber(y)
If Type(x) is either String, Number or Symbol & Type(y) is Object, then return result of x==ToPrimitive(y)
If Type(y) is either String, Number or Symbol & Type(x) is Object, then return result of ToPrimitive(x)==y

Type, ToNumber, ToBoolean are all abstract operations, they are implemented by the JS engine

ToPrimitive, ValueOf, ToString

8th and 9th cases are quite interesting. It involves the conversion of a non-primitive value to a primitive one.

According to the spec, the ToPrimitive method accepts two arguments - Input and optional PreferredType hint (it could be either string, number or default).

An object utilizes the following two methods for conversion if the ToPrimitive is not available for the object -

valueOf - takes precedence in case of number hint i.e during numerical comparisons, followed by a call to toString, if the former does not yield a primitive value
toString - takes precedence in case of string hint, followed by a call to valueOf, if the former does not yield a primitive value

For the default hint case, it's considered as number unless the object is of Date type.

Enough talking, let's see code in action for the above statements

Implementing ToPrimitive

Symbol.toPrimitive is the way to implement an object's toPrimitive operation. If this method does not return a primitive, then an error is thrown. The snippet below shows how one could implement any custom logic for object coercion.

Reference:

That's all people!

🚀 Demystifying Async/Await as Generators + Promises

Sagar Rout — Sun, 07 Feb 2021 00:00:45 +0000

Async/Await solves the problem of Inversion of Control with callbacks.

Generators build-up to Async/Await

Contents
Introduction
Async/Await
Generators
Async/Await through generators

Introduction

JavaScript being single-threaded, should not be blocked for long-running tasks.
Callbacks are the answer to execute such tasks without blocking the main thread. However, they cause Inversion of Control. The invocation of callbacks is passed to a function over which you do not have control.

Async/Await solves that problem. In this article, we would compare the same example and break down the similar working of the async/await function with the help of generators.

Async/Await

Async functions help us write asynchronous code (Promises) in a more synchronous manner.

Things to note about async functions -

Async functions always return a Promise, returned values are enclosed in a promise if they are not thenables.
Await keyword can only be used within an async function, it is used to await the value of a promise.

In the above snippet, the invocation of the async function returns us the data, without having to do a .then over the two promises returned from the fetch API and its parsing process.

Generators

Generators are functions that do not run to completion. They can be paused and resumed. Until the function is completed, its context is preserved. It returns a generator object which has the information about the function context. It can be inspected by logging an execution of a simple generator function. This helps us write asynchronous code in a somewhat synchronous manner.

The generator object is compatible with the Iterable protocol, thus a .next() can be invoked to get subsequent values i.e. control goes back within the generator function.
Values are exchanged between the generator function and outer code via next/yield.

Async/Await through generators

Understanding the generators is essential for the last part of the article. It is where Promises and Generators will be composed to create our own async/await implementation.

The above code snippet is analogous to the async/await code snippet at the top. Here is the breakdown of the steps -

A generator function is required for it, yield is analogous to the await keyword.
The asyncify function returns a Promise, which embodies the await logic.
The manual invocation of the iterator.next() method which was seen in the generator's example is done within the promise body.
The logic would be recursively invoked until the IteratorResult has 'done' as true

Ultimately, the asyncified function would be consumed in a similar manner as an async function is. As it returns a Promise, it should be consumed via a success and error handler.

All above snippets can be run here
Reference: ExploringJS

That's all people!

An overview of Event Loop, Tasks, and Microtasks

Sagar Rout — Thu, 08 Aug 2019 12:27:35 +0000

The browser uses an event loop to effectively switch between scripting, rendering, painting, networking, eventing, and similar other jobs.

Although JS is single-threaded, concurrency is possible with help of an Event loop and a bunch of Web APIs.

What is Task (Macro task)?

The task is code to be executed until completion. For each turn of the event loop, one task is executed. A task can schedule other tasks (asynchronous in nature). Multiple task queues are maintained by the browser.

Task sources are - DOM Manipulation, UI Events, History Traversal, Networking

Taking into account the use of setTimeout, it helps us defer code execution. After resetting of timer for each setTimeout method, the callback function will be pushed to the tasks queue for processing. Each timer runs separately from the main thread. This way it does not block the main thread.

What is Microtask?

This is code that needs to be executed after the currently executing task is completed.

Tasks (Macro, Microtasks) can schedule more tasks and they get added to their respective queues. Microtasks are kind of blocking in nature. Unlike macro tasks, the main thread will be blocked until the microtask queue is empty. All of it will be processed in the same turn of the event loop

Microtask sources are - Promise.resolve, Promise.reject, MutationObservers, IntersectionObservers etc.

The blocking nature of microtasks can be exhibited in the above code by increasing the iterations in for loop to a large value.

The microtasks queue is processed before the next rendering and painting jobs. If they are long-running then it will lead to visual degradation.

Summary

The summarised version of the event loop algorithm -

Process the oldest task from the tasks queue
If there is a microtasks queue, process all entries until its emptied
Do rendering, painting, and so forth
Repeat the above steps if the tasks queue is not empty, otherwise wait