Polyfill Factory

⏱️ ~3-minute bite · solve the sandbox to master

0%lesson

🧒

5-Year-Old Metaphor

— The physical, real-world picture. No jargon.

🪣 Polyfilla — the wall filler that gave JavaScript its compatibility glue.

Etymology

In 2009, Remy Sharp needed a word for "code that fills browser gaps." He reached for Polyfilla — the British spackling compound used to fill holes in walls before painting. The metaphor is exact: a polyfill fills in missing functionality so the rest of your paint (your app) can go on smoothly.

polyfill ≠ transpile. Polyfills add missing runtime APIs. Transpilers rewrite syntax at build time.

🏭 The Factory Line Analogy

A polyfill factory has three stations:

🔍

Quality Control (Feature Detection)

Check if the machine already exists: `if (!Array.prototype.map)`. Never ship a replacement part if the factory already has the real one. Feature detection checks actual capability — UA sniffing checks the name plate and gets it wrong.

🔧

Assembly (Spec-Compliant Implementation)

Build a replacement that matches the spec exactly: handle sparse arrays, coerce length with `>>> 0`, bind `thisArg`. The replacement must behave identically to the native — even on edge cases.

📦

Silent Installation (Object.defineProperty)

Mount it on the prototype without making it visible to `for...in`. Use `Object.defineProperty(..., { enumerable: false })` so legacy code that iterates arrays doesn't accidentally see your polyfill as a key.

📐 Three Compatibility Techniques

Technique	What it does	When applied
Polyfill	Adds missing runtime API (Promise, Array.from)	Runtime, conditional
Transpile	Rewrites syntax (arrow fn → function)	Build time, always
Shim	Patches/normalises existing buggy API	Runtime or build time

You cannot polyfill syntax. You can only polyfill APIs. That is the line between polyfill and transpile.

🔢 The `>>> 0` Trick

Every array polyfill starts with var len = O.length >>> 0. Unsigned right shift converts any value to a 32-bit unsigned integer — the exact type array lengths must be per the ES spec (ToUint32).

-1 >>> 0→4294967295wraps negative

3.9 >>> 0→3truncates float

undefined >>> 0→0normalises undefined

null >>> 0→0normalises null

'5' >>> 0→5coerces string

Infinity >>> 0→0normalises Infinity

🎛️

Interactive Sandbox

— Move something, see it react instantly.

Pick a polyfill to trace:

Detection guard

1	if (!Array.prototype.map) {
2	// install polyfill below
3	}

Implementation

1	Array.prototype.map = function(callback, thisArg) {
2	if (this == null) throw new TypeError("null/undefined");
3	if (typeof callback !== "function") throw new TypeError();
4
5	var O = Object(this); // wrap primitives
6	var len = O.length >>> 0; // coerce to uint32
7	var A = new Array(len); // pre-size result
8
9	for (var k = 0; k < len; k++) {
10	if (k in O) { // skip holes (sparse)
11	A[k] = callback.call(thisArg, O[k], k, O);
12	}
13	}
14	return A;
15	};

Spec: ES5 §15.4.4.19 — ToObject(this), ToUint32(len), then iterate with `k in O`.

Test call

1	[1, 2, 3].map(x => x * 2)

Expected: [2, 4, 6]

Execution trace — step 1/5

O = Object([1,2,3]), len = 3 >>> 0 = 3. A = new Array(3)

A = [___, ___, ___]

Key gotcha: The `k in O` check is essential — it skips holes in sparse arrays. Without it, [1,,3].map() would call callback on the hole.

🎯

Challenge

Explore all 5 polyfills. Trace each one step-by-step to understand the spec edge cases.

Try it

🎯

Why Should I Care?

— The exact interview question + the bug it kills.

🎤 Interview Questions

Q: Implement Array.prototype.map from scratch.

1	Array.prototype.map = function(callback, thisArg) {
2	var O = Object(this);
3	var len = O.length >>> 0;
4	var A = new Array(len);
5	for (var k = 0; k < len; k++) {
6	if (k in O) {
7	A[k] = callback.call(thisArg, O[k], k, O);
8	}
9	}
10	return A;
11	};

Three gotchas interviewers check: (1) `>>> 0` for length coercion, (2) `k in O` to preserve sparse holes, (3) `callback.call(thisArg, ...)` — not just `callback(O[k])`.

Q: Why does [NaN].indexOf(NaN) return -1 but [NaN].includes(NaN) return true?

1	[NaN].indexOf(NaN) // -1 — uses ===, NaN !== NaN
2	[NaN].includes(NaN) // true — uses SameValueZero
3
4	// The NaN self-check in the polyfill:
5	if (el !== el && searchElement !== searchElement) return true;

SameValueZero is like === but treats NaN as equal to itself. The self-inequality trick (`x !== x` is only true for NaN) is the idiomatic implementation without Number.isNaN.

Q: What breaks if you assign a polyfill directly instead of using Object.defineProperty?

1	// WRONG — enumerable polyfill
2	Array.prototype.myMethod = fn;
3
4	for (var key in [1, 2, 3]) {
5	console.log(key); // "0", "1", "2", "myMethod" ← BREAKS
6	}
7
8	// CORRECT — non-enumerable
9	Object.defineProperty(Array.prototype, "myMethod", {
10	value: fn, writable: true, configurable: true, enumerable: false
11	});

Direct assignment is enumerable. `for...in` on arrays (bad practice but common in legacy code) then iterates polyfill names as keys, breaking iteration logic.

🔥 Production Risks

⚠ Prototype Pollution via Object.assign

1	// Malicious JSON payload:
2	var payload = '{"__proto__":{"isAdmin":true}}';
3	Object.assign({}, JSON.parse(payload));
4	// Now ALL new objects have isAdmin: true

Sanitise untrusted input before passing to Object.assign. Use Object.create(null) for pure data bags.

⚠ Spec Divergence in Edge Cases

1	// Polyfill bug: checking length before Symbol.iterator
2	// Spec says: prefer Symbol.iterator if present
3	// Buggy polyfill: Array.from(set) uses length, skips iterator
4	// Set has no numeric length → result is [] ← silent bug

Polyfill libraries like core-js have comprehensive test suites. Rolling your own for complex APIs is risky.

⚠ Bundle Bloat — Everyone Pays

1	// Without differential serving, ALL users download polyfills
2	// Even Chrome 120 downloads the IE11 polyfill bundle
3
4	// Fix: differential serving
5	// <script type="module" src="modern.js"></script>
6	// <script nomodule src="legacy.js"></script>

Modern bundle can be 20–40% smaller with no polyfills. Old browsers get the full legacy bundle.

🧰 Modern Toolchain

1	// .browserslistrc
2	last 2 versions
3	ie 11
4
5	// babel.config.json
6	{
7	"presets": [
8	["@babel/preset-env", {
9	"useBuiltIns": "usage",
10	"corejs": 3
11	}]
12	]
13	}
14
15	// Result: Babel reads browserslist, automatically injects ONLY
16	// the core-js polyfills your code uses AND your targets need.
17	// For modern Chrome: injects nothing.
18	// For IE 11: injects Promise, Array.from, Object.assign, ...

"entry"

Import all core-js polyfills for all targets at entry. Safe but larger.

"usage"

Import only polyfills for features actually used. Smaller but needs analysis.

🔬

The Deep Dive

— Spec refs, engine internals, the minutiae.

📚 Object.defineProperty Deep Dive

Property descriptors control visibility and mutability. Every polyfill should use the full descriptor form:

1	Object.defineProperty(Array.prototype, "map", {
2	value: function(cb, ta) { /* ... */ },
3	writable: true, // allows Array.prototype.map = newFn
4	configurable: true, // allows delete / redefine
5	enumerable: false, // HIDDEN from for...in ← the important one
6	});
7
8	// Read-only constant (e.g. polyfilling Math.TAU):
9	Object.defineProperty(Math, "TAU", {
10	value: Math.PI * 2,
11	writable: false,
12	configurable: false,
13	enumerable: false,
14	});

Accessor descriptors (get/set) are a third form — used in Vue 2 reactivity and legacy observability patterns to intercept property reads/writes.

🔬 Sparse Arrays — map vs filter vs forEach

1	const sparse = [1, , 3]; // length=3, index 1 is a HOLE
2	// "1 in sparse" === false ← key distinction
3
4	// map PRESERVES holes (hole position → hole position)
5	sparse.map(x => x * 2);
6	// → [2, empty, 6] (length 3, hole at index 1 preserved)
7
8	// filter COMPACTS (holes are excluded from result)
9	sparse.filter(x => x > 0);
10	// → [1, 3] (length 2, no holes, sequential indices)
11
12	// forEach SKIPS holes (callback never called for holes)
13	sparse.forEach(x => console.log(x));
14	// logs: 1, 3 (index 1 silently skipped)
15
16	// Gotcha: hole !== undefined
17	console.log(sparse[1]); // undefined (reading returns undefined)
18	console.log(1 in sparse); // false (but it is NOT a property)
19	console.log(sparse.hasOwnProperty(1)); // false

⚡ Differential Serving

html

1	<!-- Modern browsers: support ES modules, ignore nomodule -->
2	<script type="module" src="/dist/app.modern.js"></script>
3
4	<!-- Legacy browsers: ignore type="module", run nomodule -->
5	<script nomodule src="/dist/app.legacy.js"></script>
6
7	<!-- Modern bundle: ~80KB (no polyfills, ES2020+ syntax) -->
8	<!-- Legacy bundle: ~130KB (core-js polyfills + transpiled) -->
9
10	<!-- ⚠️ Edge 18-79 double-execution bug:
11	It runs BOTH scripts. Guard legacy with:
12	if (!window.__legacyRan) {
13	window.__legacyRan = true;
14	// actual app code
15	} -->

🧠 Common Edge Cases

Array.from on a string (iterable, not array-like first)

1	Array.from("abc") // ["a", "b", "c"]
2	// Uses Symbol.iterator — NOT .length

Object.assign skips non-enumerable source properties

1	const src = {};
2	Object.defineProperty(src, "hidden", {
3	value: 42, enumerable: false
4	});
5	Object.assign({}, src); // {} ← "hidden" not copied!

includes with fromIndex > length (out of range)

1	[1,2,3].includes(1, 10); // false (search starts past end)
2	[1,2,3].includes(1, -100); // true (max(3-100,0)=0 → search from 0)

+0 and -0: includes vs Object.is

1	[+0].includes(-0); // true (SameValueZero: +0 === -0)
2	Object.is(+0, -0); // false (SameValue distinguishes signs)

🗺️ Polyfill Reference

Method	Added	Key gotcha	core-js
Array.prototype.map	ES5	k in O for sparse holes	es.array.map
Array.prototype.filter	ES5	compact result, no holes	es.array.filter
Array.prototype.includes	ES2016	SameValueZero, NaN works	es.array.includes
Array.from	ES2015	iterator > array-like priority	es.array.from
Object.assign	ES2015	shallow, own enumerable only	es.object.assign
Promise	ES2015	microtask queue semantics	es.promise
Array.prototype.flat	ES2019	depth param, default 1	es.array.flat
globalThis	ES2020	cross-env global reference	es.global-this

🎤

Interview Questions

— Real questions from real interviews — with answers.

Key concerns: `>>> 0` for length, `k in O` for sparse holes, `callback.call(thisArg, ...)` for context.

`indexOf` uses `===` (NaN ≠ NaN); `includes` uses SameValueZero (NaN = NaN).

Polyfills add missing runtime APIs; transpilers rewrite syntax at build time. You cannot polyfill syntax.

Direct assignment creates an enumerable property; `Object.defineProperty` with `enumerable: false` hides it from `for...in`.

Babel reads your browserslist, determines which APIs need polyfilling for those targets, and injects only the relevant core-js imports.

🎮

Memory Game

— Quick quiz — lock the concept in long-term memory.

1/4

What is `queueMicrotask()` and when would you polyfill it?