Introduction To Properties, Methods & The Prototype

Open the project folder

Properties and methods

So far, we have covered various words such as object type, properties and methods and it is useful to at least have a basic understanding of what these mean.

Looking at the starter files, we have 3 arrays:

const margherita = ['dough', 'sauce', 'cheese'];
const vegetarian = [
  'dough',
  'sauce',
  'cheese',
  'peppers',
  'onions',
  'jalapenos',
];
const pepperoni = ['dough', 'sauce', 'cheese', 'pepperoni'];

We have also briefly looked at some of the things we can do with arrays, and these were properties and methods:

// properties: length
// methods: push, splice

But what is the difference between a property and a method, and where do these come from?

First, we will look at where these come from. Think about this, we have 3 arrays, and we could have many more in larger programs. If all the arrays we create carry all these methods, and there is a lot more that we have not yet covered, this is a lot of duplicated weight to have attached to each array.

It would make sense to be able to create multiple arrays and have all of these extra things like methods in once central location to access when needed, rather than have them attached to each array. And this is what happens with object types such as an array.

JavaScript has a concept called prototypes, which is a way for one object to inherit the features from another one. Let’s take a look at this in the console:

console.log(Array);

This is the same array constructor we looked at previously, it is kind of like a template for other arrays we create, and our own arrays inherit it's methods.

The prototype

We can see these by logging the prototype:

console.log(Array.prototype);

You can open this up in the console and see push and splice amongst others. This prototype is a property that points to another object, in our case the parent object, and therefore inheriting it's methods.

Objects also have this too:

console.log(Object.prototype);

Just to recap, when we create a new object, or a new array, it automatically has this prototype property added, which allows us to access methods on another object, and this is where these extra methods come from.

We can also create our own objects and add our own methods, but later we will come back to this and look at some more complex examples.

Now if we log one of our own array copies of this array constructor:

console.log(pepperoni);

Open this in the console, and at the bottom we see the Prototype property:

(4) ['dough', 'sauce', 'cheese', 'pepperoni']
0: "dough"
1: "sauce"
2: "cheese"
3: "pepperoni"
length: 4
[[Prototype]]: Array(0)

Expand this Prototype by clicking on the drop down arrow, this gives us access to all the methods associated with the Array:

[[Prototype]]: Array(0)
at: ƒ at()
concat: ƒ concat()
constructor: ƒ Array()
copyWithin: ƒ copyWithin()
entries: ƒ entries()
every: ƒ every()
fill: ƒ fill()
filter: ƒ filter()
find: ƒ find()
...

And this inheritance is how our own arrays can perform these methods such as push and splice, without creating them ourselves.

Also in the log is the length property, outside of the prototype. And here lies the difference between a method and a property. Since any of the methods can be used on any of our arrays, they can be shared via the prototype.

The length property, however, is specific to each array, since each array can be a different length, it makes sense to not share this.

We will dive deeper into this subject a bit later, but now we know where array methods come from, let’s discover how we can use some more of them in the next sections.