🚨 All you need to know before using modern JavaScript features

The JavaScript language is constantly evolving. I bet you’ve heard of ES6 which is so far the most popular version of this language. It was released back in 2015 and since then, JavaScript has been receiving a new version every year.

Each version introduced some new functions or syntax (or both). An example might be ES12 which have introduced:

• String.prototype.replaceAll function
• Separators for numeric literals e.g. 10_000 (easier to read equivalent of 10000)

and some more features which I won’t mention in this article.

Does it mean you can start using new features immediately? The answer is yes, that’s what we’re getting them for! But… you might need to use some polyfills and a transpiler.

Why do we need polyfills and transpilers?

JavaScript may run in different environments. Those environments evolve simultaneously with JavaScript, but their previous versions don’t support new syntax nor functions. For example, a script using mentioned before String.prototype.replaceAll function will work fine if run on NodeJS v15+ but will fail to run on NodeJS versions prior to v15. Why is that? Because NodeJS v15 have added support for ES12. To make a script work on older versions of NodeJS, we need to use a polyfill function.

Note: We could update our NodeJS version to v15+ instead, but that’s something usually harder to do than adding a polyfill, especially if our app have a lot of dependencies.

Polyfills

Polyfilling is a concept of implementing a fallback function if the environment running our code doesn’t have one implemented yet. Polyfills make it easier to write code that will run the same way on different environments. Polyfill functions should be implemented on top of your app, before any app related code so that missing functions have been polyfilled before executing your app’s code.

A polyfill function for String.prototype.replaceAll would look like:

// If statement checks if we need a polyfill
if (!String.prototype.replaceAll) {
 String.prototype.replaceAll = function(str, newStr){

  // If a regex pattern
  if (Object.prototype.toString.call(str).toLowerCase() === '[object regexp]') {
   return this.replace(str, newStr);
  }

  // If a string
  return this.replace(new RegExp(str, 'g'), newStr);

 };
}

/**
 * Author: Chris Ferdinandi
 */

With the polyfill implemented, we’re safe to run our code on older (than v15) versions of NodeJS and it won’t throw errors any more! 🎉

Usually you don’t have to write a polyfill funtion on your own. There’s a high chance that somebody has already released a polyfill you’re looking for. Google your feature name + “polyfill” and you’ll most likely find something. Some polyfills are also available on NPM.

Note: Do not polyfill your code “just in case”. If you’re sure, that target environments do support the feature you’re about to polyfill — you’re safe, no polyfill needed!

Transpilers

Transpiler is a software which translate source code into another source code. It looks for usages of modern syntax and replace it with equivalent code written using older syntax which is widely supported, so that your code will run on more environments seamlessly.

Let’s take a look at the example of code using syntax called “nullish coalescing operator” ( ?? ) which has been introduced by ES11.

// Original source code
const errorMessage = errorMessage ?? 'Default error message';

// Transpiled source code
const errorMessage = 
  (errorMessage !== undefined && errorMessage !== null) 
    ? errorMessage 
    : 'Default error message'

Transpiler rewrote our modern code using older syntax which is now understandable by environments not supporting ES11 features yet.

In JavaScript world, the most popular transpiler is Babel. Visit their website and play with their online code editor and it’s different settings to find out what your source code gets transpiled to.

Transpilers are most often integrated with bundlers like Webpack, Rollup etc. which transpile the code “under the hood” e.g. during the build process.

Tools

There are several tools that allow you to check what features are supported by which environment. Worth knowing are:

caniuse.com — Browser oriented. Useful especially for Front-end developers. Supports JS & CSS features.
node.green — Node.js oriented. Useful for Back-end developers.

Summary

Polyfills and transpilers let you write modern code and run it on older environments.

• Polyfills are used to fill the gap of missing functions
• Transpilers are used to replace modern syntax with equivalent older syntax

---

Hope you’ve enjoyed and learned something new. Thank you for reading!