A polyfill is code that adds a standard feature to an environment that doesn't have it yet, such as Promise.any or Array.prototype.flat in an older browser. It's written in plain JavaScript that the old environment can already run, and it follows the specification, the document that defines how the feature behaves, as closely as it can. Code written for new browsers then works in old ones too. The name comes from Polyfilla, a paste for filling cracks in walls: a polyfill fills the gaps in a browser.
A real polyfill checks for the feature first, as in if (!Promise.any), and defines it only when it's missing, so a browser that has the built-in keeps its own version:
if (!Array.prototype.flat) {
Array.prototype.flat = function flat(depth) {
// the steps the specification lists, written in plain JavaScript
};
}
Every array gets its methods from one shared object, Array.prototype, and every function from Function.prototype. So a method added there appears on every array or function in the program, even ones created before it was added, and inside it this is the array or function it was called on. Careful polyfills add it with Object.defineProperty rather than = as above, so that, like the built-ins, it isn't enumerable and doesn't show up in a for...in loop.
When an interviewer asks you to write a polyfill, they mean: reproduce a built-in's behaviour yourself, without calling it. It shows you know exactly what the built-in does, beyond its everyday use. The details are the point, because code written against the standard relies on them too:
| Built-in | Everyday use | Details a polyfill must match too |
|---|---|---|
Array.prototype.map | [1, 2].map((n) => n * 2) is [2, 4] | thisArg, holes, and the TypeError for a callback that isn't a function, thrown even when the array is empty |
Function.prototype.bind | A function with a fixed this | Preset arguments, and calling the result with new |
Promise.all | Waits for several promises | Plain values among them, an empty input, and an argument that isn't iterable |
Object.create | An object that inherits from the one you pass | null as the prototype, and a TypeError for one that's neither an object nor null |
JSON.stringify | Turns data into text | undefined and functions, toJSON, and a TypeError on cycles |
These tasks give your version its own name, such as Array.prototype.myMap, Object.myCreate, or JSON.myStringify, or make it a stand-alone function, such as promiseAll(iterable) or objectIs(a, b). Replacing the real method would change it for every other piece of code on the page, and leave you no built-in to compare yours with.
In production you rarely write polyfills by hand: libraries such as core-js provide them, and Babel can add the ones your target browsers need. A polyfill can only add missing objects, functions, and methods. New syntax, such as ?. or class, can't be added that way: a compiler has to rewrite it as older syntax, which is called transpiling.
An array's length counts slots, and a slot can be empty: no element at all, not even undefined. That empty slot is called a hole, and an array with holes is called sparse. Reading a hole gives undefined, the value you get for any property that doesn't exist, so it looks like an element holding undefined. Object.keys, which lists the indexes an array really has, tells the two apart:
const withHole = [1, , 3]; // nothing between the commas
const withUndefined = [1, undefined, 3];
withHole.length; // 3
withUndefined.length; // 3
withHole[1]; // undefined
withUndefined[1]; // undefined
Object.keys(withHole); // ["0", "2"]: there's no element at index 1
Object.keys(withUndefined); // ["0", "1", "2"]: there is one, and its value is undefined
Holes appear in a few ways:
| How | Example | Result |
|---|---|---|
| A gap in an array literal | [1, , 3] | A hole at index 1 |
new Array with one number | new Array(3) | Three holes, and length is 3 |
delete on an element | delete arr[1] | Index 1 becomes a hole, and length doesn't change |
| Writing past the end | arr[5] = 6 on [1, 2, 3] | Holes at indexes 3 and 4, and length is 6 |
Making length bigger | arr.length = 5 on [1, 2, 3] | Holes at indexes 3 and 4 |
Consoles mark holes so you can spot them: Chrome shows [1, , 3] as [1, empty, 3], and Node as [ 1, <1 empty item>, 3 ].
Built-in methods don't agree on what to do with a hole: some skip it, some keep it in their result, and some read it as undefined, or write null in JSON. That's why every task that rebuilds one of them says exactly what to do with holes. Here's [1, , 3] going through a few:
| Call | Result | What happened to the hole |
|---|---|---|
[1, , 3].filter(() => true) | [1, 3] | Skipped: the callback isn't called for it, and the result has no hole |
[1, , 3].map((n) => n * 10) | [10, , 30] | Skipped, but kept: the result has a hole in the same place |
[1, , 3].reduce((sum, n) => sum + n) | 4 | Skipped: 1 starts the total, and the callback runs once, to add 3 |
[1, , 3].flat() | [1, 3] | Dropped |
Array.from([1, , 3]) | [1, undefined, 3] | Read as undefined, which becomes a real element |
JSON.stringify([1, , 3]) | "[1,null,3]" | Written as null |
Write JSON.myStringify(value), which returns the same text as JSON.stringify(value) for the values described here, without calling JSON.stringify. There's no replacer or space argument, and no spaces in the output.
true, false, and null are written as they are. Finite numbers are written the way String(number) writes them, and NaN, Infinity, and -Infinity become null.
Strings go in double quotes. Inside them, " and \ get a backslash in front; backspace, form feed, newline, carriage return, and tab become \b, \f, \n, \r, and \t; any other character whose code is below 32 (U+0020, the space) becomes \u and four lowercase hex digits, like \u001f. Every other character is written as it is.
An array becomes its elements between [ and ], separated by commas, with holes written as null. Any other object becomes "key":value pairs between { and }, separated by commas, for its own enumerable string keys in Object.keys order. Keys are quoted and escaped like strings.
undefined, functions, and symbols have no JSON form. As an object's property they're left out, in an array they're written as null, and on their own JSON.myStringify returns undefined, not a string.
If an object has a toJSON method, call it with the object's key (the property name, the index as a string inside an array, or "" at the top level) and write what it returns instead. That's how a Date becomes its ISO string.
Throw a TypeError for an object that contains itself, directly or further down (a cycle). The same object appearing twice without a cycle is fine.
BigInts, boxed primitives like new String("a"), and lone surrogates are out of scope.
JSON.myStringify({ name: "Ada", tags: ["x", undefined], skip: undefined });
// {"name":"Ada","tags":["x",null]}
JSON.myStringify({ when: new Date(0) });
// {"when":"1970-01-01T00:00:00.000Z"}
JSON.myStringify('say "hi"\n');
// "say \"hi\"\n"
JSON.myStringify(() => {});
// undefined
expect(JSON.myStringify(42)).toBe("42");
expect(JSON.myStringify(-1.5)).toBe("-1.5");
expect(JSON.myStringify(1e21)).toBe("1e+21");
expect(JSON.myStringify(-0)).toBe("0");
expect(JSON.myStringify(true)).toBe("true");
expect(JSON.myStringify(false)).toBe("false");
expect(JSON.myStringify(null)).toBe("null");
expect(JSON.myStringify(NaN)).toBe("null");
expect(JSON.myStringify(-Infinity)).toBe("null");
expect(JSON.myStringify("hi")).toBe('"hi"');
const samples = ['say "hi"', "back\\slash", "line\nbreak", "tab\tand\rreturn", "\b\f", "\u0001\u001f", "café ✓"];
for (const text of samples) {
expect(JSON.myStringify(text)).toBe(JSON.stringify(text));
}
expect(JSON.myStringify([1, "a", [true, null], []])).toBe('[1,"a",[true,null],[]]');
expect(JSON.myStringify({ b: 1, a: { c: {} }, 2: "two", 1: "one" })).toBe('{"1":"one","2":"two","b":1,"a":{"c":{}}}');
const child = Object.create({ inherited: 1 });
child.own = 2;
expect(JSON.myStringify(child)).toBe('{"own":2}');
expect(JSON.myStringify({ 'say "hi"': 1 })).toBe('{"say \\"hi\\"":1}');
const value = { a: 1, b: undefined, c() {}, d: Symbol("d"), e: "kept" };
expect(JSON.myStringify(value)).toBe('{"a":1,"e":"kept"}');
expect(JSON.myStringify({ only: undefined })).toBe("{}");
expect(JSON.myStringify([undefined, () => {}, Symbol("s")])).toBe("[null,null,null]");
expect(JSON.myStringify([1, , 3])).toBe("[1,null,3]");
expect(JSON.myStringify(undefined)).toBeUndefined();
expect(JSON.myStringify(() => {})).toBeUndefined();
expect(JSON.myStringify(Symbol("s"))).toBeUndefined();
const date = new Date(Date.UTC(2024, 0, 2, 3, 4, 5));
expect(JSON.myStringify({ when: date })).toBe('{"when":"2024-01-02T03:04:05.000Z"}');
const keys = [];
const item = {
toJSON(key) {
keys.push(key);
return { id: 7 };
},
};
expect(JSON.myStringify({ item, list: [item] })).toBe('{"item":{"id":7},"list":[{"id":7}]}');
expect(JSON.myStringify(item)).toBe('{"id":7}');
expect(keys).toEqual(["item", "0", ""]);
const shared = { n: 1 };
expect(JSON.myStringify({ a: shared, b: [shared] })).toBe('{"a":{"n":1},"b":[{"n":1}]}');
const loop = { name: "loop" };
loop.self = loop;
expect(() => JSON.myStringify(loop)).toThrow(TypeError);
const list = [];
list.push({ list });
expect(() => JSON.myStringify(list)).toThrow(TypeError);
const builtIn = JSON.stringify;
JSON.stringify = function () {
throw new Error("myStringify called the built-in JSON.stringify");
};
let result;
try {
result = JSON.myStringify({ a: [1, "b", null], c: true });
} finally {
JSON.stringify = builtIn;
}
expect(result).toBe('{"a":[1,"b",null],"c":true}');
Run tests runs every test on your code, here in your browser. The problem is solved when they all pass.
Ctrl + Enter runs the tests (⌘ + Enter on a Mac).
I'm here to help with JSON.stringify. I give hints, never the solution, so you get to solve it yourself. Ask for a hint, select code to ask about it, or press Ask Tuto why on a failing test.
Your first 3 answers need no account. for free to keep asking.