object oriented programming in Javascript (part 3)

in the last post we explained how constructor functions really work and we added a couple of methods to our function
in this post we will talk about a better way to add methods using the concept of prototypes

What are prototypes

to understand how prototypes work let's create a new array like this

const list = [];

if you don't already know every list you create is an instance of the built-in blueprint Array we can further confirm this by doing

console.log(list instanceof Array) //true

we used the instanceof keyword to check if our list is an instance of Array and it returns true meaning that indeed it is.
now since this is an array we can use all of the array methods on our list like push and unshift

list.push(1);
list.push(2);
list.unshift(0);
console.log(list); // [0, 1, 2]

now here is a question: does all the methods that we can use in our list exists inside of the list object itself ?
the answer is no.
in any object in Javascript the methods does not exist on that function itself but they exist on it's prototype, so you can think of prototypes as containers or holders of the object methods.
the object and it's prototype are both linked and that explains why Javascript finds the method you try to use.
here is another question: if you declare 2 lists names and ages

const names = ["Alex", "Anthony", "Mark"];
const ages = [25, 27, 30];

does each list have it's own prototype ?
again the answer is no because all objects from the same constructor function share the same prototype so no duplication is needed there.

Accessing an object's prototype

hopefully now you understand what prototypes are and how they work.
first let's try to access our list's prototype

const list = [1, 2, 3];
console.log(Object.getPrototypeOf(list)); 
// [constructor: ƒ, concat: ƒ, copyWithin: ƒ, fill: ƒ, find: ƒ, …]

//or
console.log(Array.prototype);

// [constructor: ƒ, concat: ƒ, copyWithin: ƒ, fill: ƒ, find: ƒ, …]

that's how we can access the prototype in Javascript
you may have already guessed it but the prototype itself is an object, and like any object we can add more methods to it

Adding custom methods to the prototype

have you ever wished for a certain method to be built-in in strings or arrays ? well now you can add them to the prototype and use them.

Example

let's implement a new method for strings that count how many words it has

const myName = "Alex Morgan";

String.prototype.countWords = function () {
  return this.split(" ").length;
};

console.log(myName.countWords()); // 2

there it is, simply grap the prototype from the String constructor function and add the method to it like a normal object, it is that simple
note that the this keyword inside the method always points to the object you calling the method on.

Adding methods to the Customer blueprint with prototypes

try doing it on your own as an exercice and see if you can do it

Solution

function Customer(name, email, password, settings, cart) {
  this.name = name;
  this.email = email;
  this.password = password;
  this.settings = settings;
  this.cart = cart;
}

Customer.prototype.setSettings = function (newSettings) {
  this.settings = newSettings;
};

Customer.prototype.orderFood = function (food) {
  console.log(`ordering ${food}`);
};

const customer = new Customer("Alex", "[e-mail]", "12", {});

customer.setSettings({ notifications: true });

customer.orderFood("Pizza"); // ordering Pizza

The problem with arrow functions

notice that i wrote the methods with a regular function style instead of arrow functions because if i use arrow functions it won't work, the reason is that arrow functions does not have the this keyword which means that this inside the setSettings method will no longer point to the object you called the method on so don't use arrow functions in methods at all

A quick word

thank you for reading this post and i hope you now understand prototypes well.
please let me know in the comments if these posts are helpful and informative and feel free to provide your feedback.