Javascript Manual: `Array.prototype.includes()` vs. `Array.includes()`

Question

Incoming "noob" question:

Javascript has an includes method on arrays.

It looks like:

Array.includes()

But when I go to the Javascript Manual to understand this method, the heading on that page (for an appropriate technical reason, I realize) is:

Array.prototype.includes()

Similar things in the Javascript Manual have caused me to not like the manual at all (and alas, I rely on W3Schools more than the manual).

However, I really really want to learn to interpret the manual.

So, my question is: what's the significance of including the word .prototype in Array.prototype.includes() in the documentation, when the actual usage looks like: Array.includes()?

(Also, if anyone has suggestions on how I can improve my comprehension of the official Javascript Manual, I'd appreciate suggestions.)

Answer 1

JavaScript is often described as prototype-based language, prototypes is simply how inheritance works in JavaScript.

What does prototype means ?

Both of us agree that almost everything in JavaScript is an object (I said "Almost" because primitives are not considered objects) cool? Okay, now every Object in JS has an internal property called [[Prototype]] and by internal I mean that you can't access it directly the same way you access a JS object's property.

If we want to know the prototype of an object that we have created we either pass the instance of our object to Object.getPrototypeOf or through the __proto__ property of our object

For example:

let myArray = [1,2,3,4];
console.log(myArray.__proto__)
// Expected output: Array []

If you expand the resulting object you get from the little code snippet above you will find the includes method you were asking about and all of the methods available on any array you create in a JS code! That's because myArray and all arrays in JavaScript are said to share the properties and methods defined on Array.prototype!

Now, if you look again at the methods of the resulting object which you have from the code snippet above you will notice a method called constructor, defined on the Array.prototype just like includes and the other methods

That's the function invoked when you create an instance of the JavaScript Array object!

What do we mean by the JavaScript Array object? It's a global JavaScript object that is used in the construction of arrays, it's the Array in Array.prototype.includes() (you may call it a class for convenience buuuuut classes did not exist practically until the release of ES6...before then there was no such thing as class in JS)

So to keep it simple and wrap it up think of Array as the global object that alll JS arrays are instances of, and think of Array.proto as it's prototype which wraps the properties and methods that all of its instances share!

And regarding the documentation, being able to read the documentation and have a considerable understanding of what you read is actually something good so I believe you're just fine !

Answer 2

So, my question is: what's the significance of including the word .prototype in Array.prototype.includes() in the documentation, when the actual usage looks like: Array.includes()?

The significance is that actual usage doesn't look like Array.includes():

Array.includes();

That will throw a TypeError: Array.includes is not a function because Array.includes doesn't exist. Accessing a non-existing property evaluates to undefined, so Array.includes evaluates to undefined and thus Array.includes() is trying to call undefined as if were a function.

You can see that in action here:

console.log(Array.includes);

undefined();

The includes() method is defined on the prototype of the Array global object so that you can call it on instances of Array:

[].includes();

You can see that [].includes is a function:

console.log([].includes);

Compare this to Array.from which is defined on the Array constructor, not on the Array prototype:

console.log(Array.from);

You can use it like this:

console.log(Array.from({ length: 10 }, (_, num) => num << 2));

Answer 3

If the documentation said Array.includes() you would literally type it like this (example):

Array.includes(1);

Instead it says Array.prototype.includes() which means it isn't called on the Array type itself, but on an instance of it. So in this case you would write:

const numbers = [1, 2, 3];
numbers.includes(1);