Top community members
All Wiki Articles Create Wiki Article

In the past we had a dream,
to have place where we could share IT knowledge,
to ask questions without fear that someone will judge us.

Now we are a group of people who make this dream come true. ❤ 💻

If you think sharing knowledge and helping other is valuable.

join our community - Click here

What is Polyfill in JavaScript with code example

0 contributions
3 points

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
0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey 👋
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more