Understanding Polyfill JavaScript with window.ShowModalDialog()

JavaScript Polyfill is code that implements the functionality not supported by certain browsers in a non-native way.
The unsupported functionality does not only indicate old browsers but also there could be certain functionalities not supported in the new browsers too.

An example of using polyfill -window.ShowModalDialog()

Window.showModalDialog() is a popular method to display a modal dialog box with a specified HTML.

As per the documentation in MDN this feature has been removed from Chrome 43 and Firefox 56.

If you are using window.showModalDialog() in a website you would encounter error in the browser console.
The error message "window.ShowModalDialog() is not a function" clearly indicates that the function is not recognised by the unsupported browser.

There might be situation where you would still want to use this feature probably because it is heavily used in your legacy application in IE8 and now you want to make your application Chrome Compatible and support IE8 as well.

Polyfill would be one approach to solve this problem. As per the official documentation of MDN there is link to ShowModalDialog Polyfill.
showModalDialog Polyfill

With this approach we would use a JavaScript file defines the window.ShowModalDialog() function explicitly. The method is defined in such a way that it works as per the expected functionality if the method is defined and has a not null value. If the method is not defined then a custom implementation of window.showModalDialog() is used.

This JavaScript file is the polyfill for the window.showModalDialog() function. It is providing with an alternate method of window.showModalDialog() for unsupported browsers.

This documentation covers the implementation details of the polyfill code developed , the syntax to use and the link to live demo.

Likewise we can write polyfill or use polyfill to bridge the gap between the compatibility in the browsers.

But remember that there might be certain differences in the actual native implementation and the non-native implementation as a polyfill in terms of functionality to some extent or performance.

This technique should be used when you do not have any other way to bridge the gap between the functionality you want to achieve.

Why would a browser not support certain functionality?

The browsers understand JavaScript code and to be very specific the JavaScript in the browser is understood by the JavaScript Engines.

JavaScript Engines are responsible for parsing, interpreting, executing and optimizing the code.

Now every browser has its own JavaScript engines. The JavaScript engines used by some of the browsers is mentioned below –

Browser	JavaScript Engine
Internet Explorer	JScript
Microsoft Edge	Chakra
Mozilla Firefox	Spidermonkey
JavaScriptCore	Safari
Google Chrome	V8

V8 is a very popular JavaScript Engines that is used in all chromium based browsers and node, deno and v8.net.

So far we have understood that all the browsers have different JavaScript Engines.

Now the question is Why do the browsers need different JavaScript engines?

JavaScript is a language that conforms to the specification provided by ECMAScript standard.

ECMA stands for European Computer Manufacturer's Association. ECMAScript is a Standard for scripting languages such as JavaScript, JScript, etc...

If you are a developer you might have heard the term ES6 a lot of times.

ECMAScript releases its revised specification with new features every year.

In the year 2015 ECMA released new features ECMAScript 2015 which popularly came to be known as ES6 because it is the 6th Edition of the ECMA-262 standard.

Ok, so now we got what is ECMAScript and ES6 . But what about the need of different JavaScript Engines.

The JavaScript engines are the ones which executes JavaScript. They have their own method of implementation.

When a new ECMAScript is released the changes are not immediately incorporated in all the JavaScript engines at once.

It is an evolving process. Some JavaScript engines implement the changes early and some take some time to implement the same.

Some of the JavaScript engines are faster as compared to the other due to the difference in the implementation of the ECMAScript standard.

Now since the JavaScript engines used by different browsers is different we notice that some of the JavaScript features are supported by one browser which might not be supported by the other.

It might also be possible that JScript has a different method for implementing a feature which might be implemented differently by V8. Hence certain functions are present in IE and similar behavior can be achieved in chrome using a different method.

Please check out the link below to see the compatibility table for the different editions of ECMAScript and the support from different browsers.

Compatibility Table

I hope you might have got a basic understanding of Polyfill JavaScript and why is it needed. :)