Lesson Tuesday

When we look at Mozilla's documentation for JavaScript methods, we'll often see the term prototype. For instance, if we look up JavaScript's concat() method on Mozilla, we'll actually discover that there are two different concat() methods:

  • String.prototype.concat()
  • Array.prototype.concat()

While we are already familiar with strings, we haven't learned about arrays yet. Don't worry! We'll begin learning about arrays in the next lesson.

Before we do that, let's discuss exactly what a prototype is in JavaScript. This will be a general overview - we'll also cover prototypes in greater depth in the next section on object-oriented JavaScript.

According to the Mozilla documentation:

Prototypes are the mechanism by which JavaScript objects inherit features from one another.

This is really the key thing we need to know for now. Prototypes are just a way for an object to inherit functionality from another object. In the JavaScript Primitives lesson in the last section, we discussed how everything is either a primitive or an object. We've worked with just about all of the primitive types (other than symbols), including strings, numbers, and booleans. Since everything that isn't a primitive is an object, we've also worked with quite a few objects, too, because things like functions are objects.

But wait a minute... if a primitive isn't an object, how is it using a prototype to inherit features from elsewhere? Well, JavaScript creates temporary object wrappers around primitives when needed (such as for accessing methods), and when we are done using them, the wrappers disappear. You don't ever need to worry about understanding this process since it's fairly esoteric, but the point here is just to clarify why primitives have access to prototypes, too.

When we refer to String.prototype.concat(), we are referring to a concat() method that all strings inherit. When we say Array.prototype.concat(), we are referring to a concat() method that all arrays inherit. Even though these methods have the same name, they are actually different methods. Sure, they do essentially the same thing: they put things together. When called on strings, they put two strings together. When called on arrays, they add something to the end of the array.

How do arrays or strings know how to concat()? Well, they have to be taught somehow. Just as a baby inherits certain traits when it is born, JavaScript objects inherit methods and properties when they are created. They do so through prototypal inheritance, a concept that boggles the minds of many experienced developers. For that reason, it's not necessary to dig into it too deeply right now.

So let's reiterate what we do need to know. We'll often see prototype in the following context when we are looking at documentation: Array.prototype.join(). In this case, prototype refers to a method that can be called on a type of object. This is relevant because we are about to add a different kind of object to our toolbox - arrays - and we need to be clear that arrays have a different set of methods than strings and other objects, even though these methods sometimes have the same names.

Also, from now on, when we introduce a new JavaScript method, we will do so just as the Mozilla documentation does. For instance, we'll state String.prototype.concat() or Array.prototype.concat(). We want to make sure you're not confused when we start doing this. It's just a way to make things clearer.

And if you really have to look into prototypal inheritance more to get a grasp on all of this, see the Mozilla documentation on Object prototypes. This is an advanced topic - and at this point, we recommend steering clear of it. Many experienced developers find it confusing, too.

Lesson 2 of 16
Last updated September 13, 2020