object oriented programming in Javascript (part 3)
Tags: javascript, programming, tutorial, beginners
Published: 2022-03-28 17:54:00

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
``` javascript
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
``` javascript
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
``` javascript
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
``` javascript
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
``` javascript
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
``` javascript
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
``` javascript
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", "alex@gmail.com", "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.