Languages
[Edit]
EN

What is Polyfill in JavaScript with code example

3 points
Created by:
AnnLen
9220

1. Overview

In this post I'd like to explain what is Polyfill in web development with simple practical JavaScript example. 

What is Polyfill in JavaScript - Image intro
What is Polyfill in JavaScript - Image intro

2. Definition of Polyfill in Web Development

We can see definition of Polifill on wikipedia:
In web development, a polyfill is code that implements a feature on web browsers that do not support the feature. Most often, it refers to a JavaScript library that implements an HTML5 web standard.

So in short - polyfill is code that allow us programmers to use new API in older browsers. Usually we use some library that add missing functionality or we can implement
missing methods by ourselves.

For example we can take JavaScript String API - method includes. String includes method was added to the ECMA Script 2015 and Internet Explorer doesn't support it.

Let's check mozilla documentation of String includes method. And from this documentation we see that Internet Explorer is the only browser that doesn't support this method.

3. Practical explanation with code

I prepared 2 code examples.

3.1 Example 1 - without polyfill

In first code example we use String includes method provided by our browser. In my case I use chrome and this example works great. When we open this example with Internet Explorer we get error.

Filename: polyfill_explain_v1.html

<!doctype html>
<html lang="en">
<body>
<script>

    var str = 'great weather';

    console.log(str.includes('great')); // true
    console.log(str.includes('not')); // false

</script>
</body>
</html>
<!--
IE 11
SCRIPT438: Object doesn't support property or method 'includes'
polyfill_explain_v1.html (9,5)
-->

Console output from Chrome, Firefox and other browsers:

true
false

Console output from Internet Explorer 11 (Default under Windows 10):

SCRIPT438: Object doesn't support property or method 'includes'
polyfill_explain_v1.html (9,5)
SCRIPT438: Object doesn't support property or method 'includes' polyfill_explain.html (9,5)
Screenshot from IE 11 - Object doesn't support property or method 'includes' 

3.2 Example 2 - with polyfill

And in this moment we will go to second example where we have implemented String includes method for browsers which don't support this method. In this second example we polyfill String.prototype.includes method and browsers which don't support this method will enter the code and add includes functionality to the String.

Filename: polyfill_explain_v2.html

<!doctype html>
<html lang="en">
<body>
<script>
    if (!String.prototype.includes) {
        console.log("This browser doesnt't support String includes() yet.");

        // polyfill method
        String.prototype.includes = function(searchString, position) {
            "use strict";
            if (searchString instanceof RegExp) {
                throw TypeError("First argument can't be a RegExp");
            }
            if (position === undefined) {
                position = 0;
            }
            return this.indexOf(searchString, position) !== -1;
        };
        console.log("From now on we can use String includes()");

    } else {
        console.log("This browser supports String includes()");
    }

    var str = "great weather";

    console.log(str.includes("great")); // true
    console.log(str.includes("not")); // false

</script>
</body>
</html>
<!--
in this example we polyfill String.prototype.includes method
and browsers which don't support this method will enter to the part of the code
and add includes functionality to the String
-->

Console output from Chrome, Firefox and other browsers:

This browser supports String includes()
true
false

Console output from Internet Explorer 11 (Default under Windows 10):

This browser doesnt't support String includes() yet
From now on we can use String includes()
true
false

4. Video tutorial

References

  1. Polyfill (programming) - wikipedia
  2. String.prototype.includes() - Browser Compatibility - Mozilla Docs
Native Advertising
50 000 ad impressions - 449$
🚀
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

❤️💻 🙂

Join