Built-in prototypes

Built-in methods live on shared prototypes

Arrays, strings, and functions come with ready-made methods. For example, every array has map and join. We call these built-in methods, because JavaScript gives them to you.

JavaScript does not copy these methods into every array. It keeps one copy of each method on a shared object, called a built-in prototype. For arrays, that shared object is Array.prototype.

You met prototypes in the lesson The prototype chain. Here is a quick reminder:

• Every object has a hidden link to one other object. That other object is its prototype.
• When you read a property the object doesn't have, JavaScript follows the link and looks in the prototype.
• If the property isn't there either, JavaScript follows the next link, and so on. This line of links is the prototype chain.

In this lesson you will meet Object.prototype, Array.prototype, and Function.prototype. You will also learn three things to do with them: borrow a method, leave them unchanged, and add a missing method safely.

Follow the prototype chain of almost any object, and you reach Object.prototype. After it comes null, which means the chain has ended.

So plain objects, arrays, functions, maps, and dates can all use the methods on Object.prototype. Here are three of them:

• obj.hasOwnProperty(key) tells you if key is an own property of obj. An own property is stored on the object itself, not found through the chain.
• a.isPrototypeOf(b) tells you if a is somewhere in the chain of b.
• obj.toString() turns the object into text.

Newer code often writes Object.hasOwn(obj, key) instead of obj.hasOwnProperty(key). It does the same check. But it lives on Object itself, so it still works when an object has no hasOwnProperty method, or has its own property with that name.

The playground below uses Object.getPrototypeOf(x). It gives you the prototype of x: one step up the chain. Pick a value. The playground keeps taking one step up until it reaches null.

Line 2 uses Object(value). For a string or a number, this makes a wrapper object (explained just below), so the walk has an object to start from. For an object, it gives back the same object.

1const value = [];2let current = Object(value);3while (current !== null) {4  current = Object.getPrototypeOf(current);5}

const word = "tea";
console.log(word.toUpperCase());
console.log(Object.hasOwn(Object(word), "toUpperCase"));
console.log(Object.getPrototypeOf(Object(word)) === String.prototype);

• Line 2 prints "TEA". JavaScript wraps the string for a moment and finds toUpperCase on String.prototype.
• Line 3 makes the wrapper on purpose, with Object(word). Then it asks if the wrapper owns toUpperCase. It prints false: the wrapper doesn't store the method itself.
• Line 4 prints true. The wrapper's prototype is String.prototype.

The wrapper lasts for just that one step. word stays a plain string. That is why you can't add your own lasting properties to a string.

An array stores its own items and its length. It does not store map, filter, join, or toString. Those live on Array.prototype.

Functions work the same way. A function does not store call, apply, or bind. It gets them from Function.prototype.

Step through the code below and watch where each method comes from. Line 5 uses .call(list). It runs Object.prototype.toString with list as its this. (this is the object a method works on.)

1const list = [1, 2];Run2const ownMap = Object.hasOwn(list, "map");3const mapped = list.map((n) => n * 10);4const arrayText = list.toString();5const objectText = Object.prototype.toString.call(list);

Lines 4 and 5 use two different toString methods:

• Line 4: JavaScript finds toString on Array.prototype first. That one joins the items, so you get "1,2".
• Line 5: you pick Object.prototype.toString on purpose. That one gives a type label, "[object Array]".

When two objects in a chain have a property with the same name, JavaScript uses the one it reaches first. We say the nearer one shadows (hides) the other.

const list = [1, 2];
list.map = "later";
console.log(Object.hasOwn(list, "map"));
console.log(typeof Array.prototype.map);

• Line 2 stores a string called map directly on this one array.
• Line 3 prints true: the array now owns a map property.
• Line 4 prints "function": the shared Array.prototype.map is still there.

But JavaScript finds the array's own map first. So list.map() would now fail, because list.map is a string, not a function.

This helps when you see an error like list.map is not a function. First check Object.hasOwn(list, "map"). If it is true, some code stored a property called map on the array. Delete that property, and the shared method works again.

const scores = { 0: 4, 1: 7, length: 2 };
const doubled = Array.prototype.map.call(scores, (score) => score * 2);
console.log(doubled.join(","));

scores is not an array. It is a plain object with number keys (0 and 1) and a length. We call an object like this array-like.

Line 2 runs Array.prototype.map on scores with .call. .call(x, …) runs a function with x as its this. map only needs number keys and a length, so it works. It returns a real array, [8, 14], and line 3 prints "8,14".

1function greet(name) {2  return "Hi, " + name;3}4const called = greet.call(null, "Ada");5const bound = greet.bind(null, "Lin");6const later = bound();

Line 4 uses greet.call, so called becomes "Hi, Ada". Line 5 uses greet.bind to make a new function, and line 6 calls it, so later becomes "Hi, Lin".

greet doesn't own call or bind. JavaScript finds both on Function.prototype. The lesson call, apply & bind shows how to use them.

The table lists common built-in prototypes. Each row says what the prototype holds and which values use it.

To borrow a method means:

1. Take a method from a built-in prototype.
2. Run it once on a different object, with .call.
3. Leave the prototype as it was.

It's like borrowing a library book for a school project. You use it and give it back. You don't write in it.

Borrowing only works if the method can handle your object. join needs just number keys and a length, so it works on array-like objects. map does too.

If you need many array methods, Array.from(obj) is often clearer. It makes a real array with the same items. Try a different separator, then step through.

1const letters = { 0: "a", 1: "b", 2: "c", length: 3 };Run2const joined = Array.prototype.join.call(letters, "-");3const copied = Array.from(letters);4const label = Object.prototype.toString.call(copied);

Line 4 borrows another method: Object.prototype.toString.call(value). It gives a type label, such as [object Array]. The lesson Checking types reliably uses this. It isn't perfect: an object can change its own label with Symbol.toStringTag.

Not every method can be borrowed by any object. For example, Map.prototype.get needs a real map. A map keeps its items in a hidden place that plain objects don't have. So Map.prototype.get.call({}, "a") throws a TypeError.

One more catch. Each page has its own set of built-ins, and so does each iframe (a page shown inside another page). One full set of built-ins is called a realm.

An array made inside an iframe links to the iframe's Array.prototype, not the page's. So in the page, arr instanceof Array gives false, because instanceof Array looks for the page's Array.prototype in the chain. Array.isArray(arr) works in every realm.

You can add your own method to a built-in prototype. For example, an app might add Array.prototype.last. But there is only one Array.prototype in a page. So every array in the page gets last, including the arrays inside libraries you use.

That causes three problems:

• A plain assignment makes the method enumerable, which means loops like for…in list it. A for…in loop over an array then shows last next to the index numbers.
• Another library may add its own last that works differently. One overwrites the other.
• A future version of JavaScript may add a real last method that works differently from yours.

The demo below runs this risky code safely, inside a hidden iframe. The iframe has its own built-ins, so this page is not changed. Line 1 adds last. The loop on line 6 then lists 0, 1, last. Line 11 removes last again.

1Array.prototype.last = function () {2  return this[this.length - 1];3};4 5const keys = [];6for (const key in ["red", "blue"]) {7  keys.push(key);8}9console.log(keys.join(", "));10 11delete Array.prototype.last;

Click Run. This page's own prototypes stay unchanged.

Old browsers lack some newer methods. A polyfill is code that adds a missing standard method, so an old browser works like a new one. "Standard" means the method is part of the official JavaScript rules.

A careful polyfill does three things:

1. It checks first if the method is missing. This is called feature detection. If the method is already there, the polyfill does nothing.
2. It adds the method with the same settings as real built-in methods. For example, it is not enumerable.
3. It handles the same special cases as the real method.

Check for the method itself, not for the browser's name. Two versions of the same browser can support different methods.

A full polyfill is hard to write. It must handle many special cases, such as odd inputs and very old engines. Real projects use tested packages such as core-js, added by build tools like Babel. The later lesson Transpilers & polyfills shows how.

In your own app code, a ponyfill is often safer. It is a plain function, such as at(array, index). It does the same job, but it doesn't touch any built-in prototype.

Here is a polyfill for at. array.at(i) gives the item at index i, and a negative i counts from the end.

• Line 1 checks if Array.prototype.at is missing.
• Line 2 uses Object.defineProperty. It adds a property and sets its settings in one step.
• Lines 3 to 8 are the method itself.
• Lines 9 to 11 set the settings: writable, configurable, and not enumerable.

1if (!Array.prototype.at) {2  Object.defineProperty(Array.prototype, "at", {3    value(index) {4      const length = this.length;5      const integer = Math.trunc(index) || 0;6      const position = integer < 0 ? length + integer : integer;7      return this[position];8    },9    writable: true,10    configurable: true,11    enumerable: false,12  });13}

1function at(array, index) {2  const length = array.length;3  const integer = Math.trunc(index) || 0;4  const position = integer < 0 ? length + integer : integer;5  return array[position];6}

This at does the same work as the polyfill, as a plain function. You call it as at(list, -1). No built-in prototype changes.

Every property has three settings, called flags:

• enumerable: loops like for…in list the property.
• writable: you can give the property a new value.
• configurable: you can delete the property or change its flags.

Object.getOwnPropertyDescriptor(obj, key) shows the flags of one property. Here it checks the real map method.

const descriptor = Object.getOwnPropertyDescriptor(Array.prototype, "map");
console.log(descriptor.enumerable);
console.log(descriptor.writable);
console.log(descriptor.configurable);

It prints false, true, and true. So map is hidden from loops, but it can still be replaced or deleted.

Where you'll use this

You'll use what you learned here when you:

• fix an error like x.map is not a function,
• check if a property belongs to the object or comes from its prototype,
• run an array method on an array-like object,
• read older code that changes built-in prototypes,
• decide whether to add a polyfill yourself or let your build tools do it.

const cards = { 0: "Buy milk", 1: "Send email", length: 2 };
const todo = Array.from(cards);
console.log(todo.map((card) => card.toLowerCase()).join(" | "));

Line 2 uses Array.from to make a real array from cards. Line 3 can then use map and join as usual. It prints "buy milk | send email".

When should you copy with Array.from, and when should you borrow?

• Use Array.from when you'll call several array methods. Readers also see right away that you made a copy.
• Borrow one method with .call when you need just one step and the object clearly fits.
• Neither one changes the prototype of the original object.

Array.from makes a new array, so it uses a little more memory. In most page code that doesn't matter. Pick the code that is easier to read.

Some short rules to keep:

• Use Object.hasOwn(obj, key) to check if a property is the object's own.
• Use Array.from(nodeList) to get array methods on a NodeList (a list of page elements).
• Borrow with .call when a method fits your object and you need it once.
• In app code, prefer ponyfills. Leave polyfills to tested packages.

Common misconceptions

const settings = Object.create(null);
settings.theme = "dark";
console.log(Object.getPrototypeOf(settings));
console.log(Object.hasOwn(settings, "theme"));
console.log("hasOwnProperty" in settings);

• Line 1 makes an object with no prototype.
• Line 3 prints null: there is no prototype.
• Line 4 prints true, because settings owns theme.
• Line 5 prints false. The in operator looks at the object and its whole chain, and there is no hasOwnProperty anywhere.

Key takeaways

• Built-in methods live on shared prototype objects, not on each value.
• Object.prototype is near the end of most chains. Objects made with Object.create(null) don't have it.
• Array.prototype holds the array methods. Function.prototype holds call, apply, and bind.
• Borrowing a method with .call changes nothing. Adding a method to a built-in prototype changes it for the whole page.
• A polyfill adds a missing standard method, carefully. A ponyfill is a plain function and changes no built-ins.

Up next: Object.create & null-prototype objects.