You Don't Know JS -p1

The book series "You don't know JS" is listed in the following six parts :

1. Up and going

2. Scope and Closures

3. This & Object Prototypes

4. Types & Grammar

5. Async & Performance

6. ES6 & Beyond

Up and going

To get one started and pretty much Up, the first book deals with just the basics of the language.

The variables, scope, module model, closures, strict mode, etc. are listed and explained in brief. Most of these topics will be covered in-depth in the upcoming books of this series.

Throwing lights on the topics I found to be the most interesting.

Polyfilling :

Let me quote the definition from MDN :

A polyfill is a piece of code used to provide modern functionality on older browsers that do not natively support it

An interesting example listed in chapter 2 is :

if (!Number.isNaN) {
    Number.isNaN = function isNaN(x) {
        return x !== x;
    };
}

Understand what is happening ->

We are all aware of the fact that with ES6 came some life-saving features such as async/await, arrow functions, literals, destructuring... the list goes on.

Let's see what the ECMAScript Language Specification has to say about isNan() :

It Returns true if the argument coerces to NaN, and otherwise returns false.

The same is shown in the example above. Here, the function isNan() is already available in the ES6 browsers hence, the if statement is guarding against applying polyfill in such browser engines and defining it for only those browsers that do not support ES6 yet.

Intersting Fact:

NaN is the only value in the whole language that is not equal to itself and thus would make x !== x be true.

Transpiling

Transforming + Compiling

Let us quote Kyle Sampson to understand Transpiling better.

There’s no way to polyfill new syntax that has been added to the language. The new syntax would throw an error in the old JS engine as unrecognized/invalid.

Okay, what to do now? How to tell the old browsers about the newer form of code that we are so much in love with, maybe because of the performance upgrade offered or how easy it is to use and understand it.

Worry not !! Transpilers to the rescue

Transpiler converts our source code authored in the new syntax form to its older code equivalent. As other tools (linters and hooks) are embedded into the build process using the scripts in our 'package.json' file. Transpiler requires no extra effort ( apart from configuring package.json, Of course !! ) and our code is automatically transformed to the older syntax and compiler to be used by the older engines.

Commonly used Transpilar -> _Babel _

Thanks for reading.
CIAO !! 👋