How to use polyfill in JavaScript ?

A polyfill in JavaScript is a script that adds modern features to older browsers that do not natively support them. To use it, include the polyfill script in your HTML or install it via a package manager, ensuring compatibility with older environments.

Polyfill and its features:

• Poly means that it could be solved using a wide range of techniques it wasn’t limited to just being done using JavaScript, and fill would fill the gap in the browser where the technology was needed. Polyfill can be seen as a material that fills the voids and cracks to smooth out any imperfections.
• The ES6 release introduced many new features that are not yet fully supported by all browsers. If we use ES6 or ES7 or ES8 features in our code, it might not work in some older browsers due to a lack of support for the new features. Besides syntax constructs and operators, new language features may also include built-in functions. Thus, we use polyfill along with a transpiler. A polyfill is a piece of code that adds functionality to older browsers that have incompatibility issues.

In older browsers, the following features require polyfill support by explicitly defining the functions:

Promises, Array.from, Array.includes, Array.of, Map, Set, Symbol, object.values, etc

How to use polyfill in javascript? 

We will explore how polyfill works in node.js in this article. 

Approach: We will use promises. We will be writing the promises in ES6 code and then converting it into ES5 code to avoid the incompatibility issues of older browsers. We will then add this ES5 code babel polyfill file from our node modules to our index.html file to run the code in our browser. 

Step 1: Environment setup

A Babel transpiler is a free, open-source tool that converts ECMAScript 2015 (ES6) code to a backward-compatible version of JavaScript that can run on old and new browsers.  

We’ll set up our project and look at the Babel polyfill.

• Make sure you have Node.js installed on your machine to run Babel polyfill.
• Create a new project directory and run the following command in your terminal to get started:npm init -y 

• Run the following command to install the babel cli, core and preset.

npm install @babel/cli @babel/core @babel/preset-env --save-dev

Package.json: It will look like this.