JavaScript polyfills: what they are (and how to write one)

A lot of people know what a polyfill is.

I did too.

And yet… when it came time to actually implement one, my brain did the classic move: “concept understood” → “hands don’t work.”

So I did what you do when something feels fuzzy: I opened it up, took it apart, and built a small one myself.

What is a polyfill?

A polyfill is a piece of code that adds a feature your JavaScript environment doesn’t have.

It’s basically:

• “This browser/runtime is missing X.”
• “So we’ll implement X in plain JavaScript.”
• “Now the app code can use X as if it always existed.”

The best polyfills are boring.

They make new capabilities feel inevitable, like they were always meant to be there.

Why polyfills exist

JavaScript runs in lots of places:

• old browsers
• weird embedded browsers
• locked-down enterprise environments
• server runtimes with different versions

The language evolves, but your users don’t magically upgrade.

So polyfills are the bridge.

A simple rule: don’t “break the world”

A real polyfill typically follows this pattern:

1
if (!Array.prototype.filter) {
2
  // define it
3
}

That way:

• if the feature already exists, you don’t touch it
• if it doesn’t exist, you provide it

For learning, though, I prefer implementing it as a separate function first.

Let’s dissect filter

What does filter feel like?

• It walks through an array.
• It asks a question (the callback) for each item.
• If the callback returns true, the item survives.
• If it returns false, it gets quietly removed.

That’s it.

Not complicated.

Just precise.

Implementing filter

Here’s a practical polyfill-style implementation.

It supports the important parts:

• throws if callback isn’t a function
• supports thisArg
• skips “holes” in sparse arrays (matches native behavior)

1
// A learning-friendly polyfill: Array.prototype.myFilter
2
// (Does not overwrite the built-in filter)
3
if (!Array.prototype.myFilter) {
4
  Object.defineProperty(Array.prototype, 'myFilter', {
5
    value: function (callback, thisArg) {
6
      if (this == null) {
7
        throw new TypeError(
8
          'Array.prototype.myFilter called on null or undefined',
9
        )
10
      }
11

12
      if (typeof callback !== 'function') {
13
        throw new TypeError('callback must be a function')
14
      }
15

16
      const array = Object(this)
17
      const len = array.length >>> 0 // force uint32
18
      const result = []
19

20
      // Make sure we're working with a real object (even if someone passes something array-ish)
21
      // Lock in a clean, non-negative length so the loop behaves
22

23
      for (let i = 0; i < len; i++) {
24
        // important: skip missing indexes in sparse arrays
25
        if (!(i in array)) continue
26

27
        const value = array[i]
28

29
        // Call the function with the right context. No surprises.
30
        if (callback.call(thisArg, value, i, array)) {
31
          result.push(value)
32
        }
33
      }
34

35
      return result
36
    },
37
    writable: true,
38
    configurable: true,
39
  })
40
}

Another (simpler) way: assign directly to the prototype

This is the style you’ll often see in quick polyfill snippets:

1
// Simple polyfill-style assignment
2
// Note: in production, prefer Object.defineProperty (less enumerable surprises)
3
if (!Array.prototype.customFilter) {
4
  Array.prototype.customFilter = function (callback, thisArg) {
5
    if (this == null) {
6
      throw new TypeError(
7
        'Array.prototype.customFilter called on null or undefined',
8
      )
9
    }
10

11
    if (typeof callback !== 'function') {
12
      throw new TypeError('callback must be a function')
13
    }
14

15
    const array = Object(this)
16
    const len = array.length >>> 0
17
    const result = []
18

19
    for (let i = 0; i < len; i++) {
20
      if (!(i in array)) continue
21
      const value = array[i]
22
      if (callback.call(thisArg, value, i, array)) result.push(value)
23
    }
24

25
    return result
26
  }
27
}

Quick sanity check

1
const nums = [1, 2, 3, 4, 5]
2

3
console.log(nums.myFilter((n) => n % 2 === 0))
4
// [2, 4]

Sparse array behavior (the detail that makes it “real”)

1
const a = []
2
a[2] = 10
3

4
console.log(a.length) // 3
5

6
console.log(a.myFilter(() => true))
7
// [10]

That if (!(i in array)) continue line is doing the right thing.

This is the difference between “I wrote something that works for my demo”… and “I wrote something that behaves like the platform.”

The lesson

Polyfills aren’t magic.

They’re taste.

You take an idea that should exist everywhere, and you make it exist everywhere.

No drama.

No new API.

No new mental tax.

Just:

“Here. It works.”

That’s the whole point.

When you should (and shouldn’t) polyfill

Good reasons:

• you support older environments
• you want consistent behavior
• you’re shipping a library and don’t control the runtime

Bad reasons:

• “I can’t be bothered upgrading”
• “I want to rewrite the language”

Polyfills should feel like infrastructure.

Quiet.

Reliable.

Closing

I thought I understood polyfills.

But understanding the definition isn’t the same as understanding the mechanics.

Writing a small filter polyfill forced me to learn the real rules: types, this, sparse arrays, and why tiny details matter.

And once you do one polyfill properly, the rest stop being scary.