JavaScript Polyfilling & Transpiling

JavaScript is constantly evolving, with updates to its syntax and features that may not be compatible with older browsers. This can lead to significant challenges, as some browsers may not support the latest features, labeling them as experimental or potentially unsafe due to their powerful capabilities.

This issue is particularly relevant because JavaScript is primarily used for developing client-side applications, meaning the successful execution of programs depends on the version of JavaScript that the client's browser supports. A simplistic approach would be to limit functionality to what can be run on the client's browser, but this is not an ideal solution. Instead, it's crucial to address these compatibility issues to ensure a smooth user experience across different environments.

There are two primary techniques that a developer can use to "bring" the newer features of JavaScript to the older browsers namely:

Polyfilling

Polyfilling is a technique used in web development to provide support for features that may not be available in all browsers, particularly older ones. A polyfill is essentially a piece of code (usually JavaScript) that implements the functionality of a newer feature in browsers that do not support it natively.

Polyfilling can be used to replicate the behavior of modern JavaScript features in older browsers, such as those predating ES2015. Here’s a useful snippet to create a polyfill for Number.isNaN

// Check if Number.isNaN already exists.
// If False then proceed.
if (!Number.isNaN) {

    // Define explicitly for older browsers.
    Number.isNaN = function isNaN(x) {

        // This is a property of NaN.
        // No two NaN can be equal to the other.
        // Because NaN is a concept not a comparable value.
        return x !== x;
    };
}

• Existence Check: We first check if Number.isNaN is already defined. If it exists, we avoid redefining it.
• Defining the Polyfill: If the method is not present, we define it using the unique property of NaN: it is the only value in JavaScript that is not equal to itself. Thus, if x is NaN, the expression x !== x will return true, and we can return this result as the output of our polyfill.
• Simplicity: This polyfill is straightforward and effectively replicates the behavior of Number.isNaN.

Note: While many new features can be polyfilled, not all of them can be implemented without deviations in behavior. Therefore, when creating polyfills, it’s crucial to understand the underlying workings of the features being polyfilled. Many developers prefer using well-established polyfills that are already available, such as:

• ES6 Shim
• ES5 Shim

Transpiling

New JavaScript versions introduce syntactical updates that cannot be polyfilled, as they would result in syntax errors in older JavaScript engines. This is where a transpiler comes into play. The term "transpiler" combines two operations: Transformation + Compiling.

What is a Transpiler?

A transpiler is a tool that converts code written in newer syntax into equivalent code that older environments can execute. This process is known as transpiling.

Development Practice:

While using a transpiler, it’s important to write your code using the newer syntax during development. However, when deploying your project, you should utilize the transpiler—similar to how you would use a minifier or linter—to create a version of your code that is compatible with older browsers.

Why Use Newer Syntax?

You might wonder why it’s worth writing in newer syntax if the final deployed code will be older. Here are some compelling reasons:

• Improved Readability and Maintainability: Newer syntax is designed to enhance code readability and maintainability. The updates typically provide cleaner and more efficient alternatives to older code.
• Performance Optimizations: By transpiling for older browsers while serving newer syntax to modern browsers, you can take advantage of specific performance optimizations available in those environments.
• Robust Testing and Feedback: Using newer syntax allows for more thorough testing in real-world scenarios, providing valuable feedback. If issues are identified early, they can be addressed before becoming permanent language design mistakes. This makes the newer syntax more reliable in the long run.

Let us take some examples of Transpiling. ES2015 added a new syntaxial feature of default parameter value, it can be implemented using the following.

// Default Parameter Value Example.
// If no parameter is passed a will be 5.
function myFunc(a = 5)
{
    console.log(a);
}

myFunc(96); // Logs 96.
myFunc(); // Logs 5 as default.

As you can see, if the parameter is not supplied we take the default parameter value in account but this syntax will not get recognized in pre-ES2015 engines. Thus after transpiling, we will get the older equivalent as the following.

// Default Parameter Value Example.
// If no parameter is passed a will be 5.
function myFunc()
{
    // Using Ternary Operator to assign default
    // 5 if undefined.
    var a = (arguments[0] !== undefined) ? arguments[0] : 5;
    console.log(a);
}

myFunc(96); // Logs 96.
myFunc(); // Logs 5 as default.

As seen in the example above we can use a ternary operator to assign the default value if the argument is found to be undefined this will produce similar results to the ES6 equivalent. For next example let us see the thick arrow methods of ES6.

// Function Defining is now this easy.
let myFunc = () => {
    console.log("This is a function.");
}

myFunc(); // This is a function.

As you can see in the example above we can define a function without even using the keyword function and that also without hampering the readability, but this will not get recognized in pre-ES6 engines thus the equivalent code will be as following.

// Function Defining is now this easy.
let myFunc = function() {
    console.log("This is a function.");
}

myFunc(); // This is a function.

After learning about Transpilers it will be very odd to end this article without knowing some of the greatest of Transpilers available. The following is a small list of such tools.

• Babel
• Traceur

Hopefully, we have covered enough to gain knowledge of what these methodologies are and why the use of both of them is not only important to the developer but also for the development of JavaScript itself.