prototype in javascript

NOTES:

# Intro

We're going to be talking about Prototypes in JavaScript.

This is a fundamental concept to understand the language, and I promise will bring you enlightenment once you understand it.

That said, this is not something that I expect you to just get right away. Honestly, it's kind of weird at first.

My goal with this lesson is to help you get to the 'click' or 'aha!' moment with it, and have the pieces fall into place.

We're going to go slow...

## What are "Prototypes"

Well, this word gets used a lot in a lot of different contexts in the tech world, like "hey can you build me a prototype?" or "it has a lot of bugs, but it's just a prototype".

That's not the kind of prototype we're talking about in JavaScript.

In the language of JavaScript, "prototype" has a very specific meaning. And Prototypes are at the core of how the language works.

A prototype is basically a simpler form of something you make, that other things are based off of.

In JavaScript, everything's simplest form is an Object. All the amazing things you make, if you drill down to their most basic level in JavaScript, end with an Object.

An array, a string, a number, boolean...even these primitive values are accessed as objects when you need them.

## You've seen this before

Prototypes aren't actually something new to you. You've been using them the whole time.

When we have looked at Strings and run `.length` we have actually been using a kind of "prototype method" that exists on all strings.

We didn't need to define `.length` as a function that would count the number of characters of the string and return it to us, the function was already there.

This will be our starting point for understanding how prototypes work.

## How do Prototypes Work - Part 1

So what happens when we run `.length` on  string?

A JavaScript engine, like one in a browser, runs the code. It looks for a `length` method on your string (as a String Object), and since it is a built-in method that all Strings have, it finds it and calls it.

But let's say we defined an object called `MyBigObject`. And we define a couple properties on that object. We `console.log()` them out, and we see them. Now, what would happen if we called `.MyForgottenProp` on our object, but we forgot to define that property on our object?

You get an `undefined`...

But what's the process by which JavaScript gives you that?

If you want a little time to think about this, pause the video here.

What JavaScript actually does is it first looks at exactly the thing you are giving it: `MyBigObject` and tries to find `MyForgottenProp` on it. We didn't define `MyForgottenProp`, so JavaScript will go up a level and go look at the default Object in JavaScript. Since the default Object, or *'Object Prototype'*, doesn't have `MyForgottenProp` there, JavaScript will try to look a level up, but actually can't, because it's told a level up from the Object prototype is `null`, which is always the end of the line.

That's how JavaScript works. And that trail is called the *Prototype Chain.*

## How do Prototypes Work - Part 2

Like we mentioned a few minutes ago, the Object prototype is fundamental in JavaScript. When you define an array for instance, the prototype chain goes up to an Array Object, if it can't find what it's looking for there, goes to Object prototype, and if it can't find it there, it reaches a dead-end.

Same goes for everything else, it's just a matter of how many levels JavaScript needs to go. If you make an object, which has a prototype of another object, which has a prototype of another object, and so on, if JavaScript can't find what it's looking for at one level, it will keep going until it can find it, or it reaches the Object prototype which has a prototype of `null`

## What Can You Do with Prototypes

So, now that you have a basic idea of how prototypes work, and their fundamental importance to JavaScript, what can you actually do with them?

Imagine you make an app for organizing restaurants in Jacksonville. Maybe you want to have 'cheap' restaurants separate from 'expensive' ones.

CheapRestaurants = {
    dailySaleSpecials: {
        monday:{
            special: string;
            price: number;
        },
        tuesday...
    }
    name: string;
    location: string;
    phoneNumber: string;
    ...
}

ExpensiveRestaurants = {
    wineSelection: {
        Chateau SuperPricey: {
            year: number,
            price: number
            ...
        }
    }
    name: string;
    location: string;
    phoneNumber: string;
}

We just repeated ourselves a lot. Why not create a base `Restaurant` that we can extend to the other...

Restaurant = {
    name: string;
    location: string;
    phoneNumber: string;
}

This way, CheapRestaurant and ExpensiveRestaurant can just *inherit* from the Restaurant. Restaurant becomes their *prototype*.

Even more so, any specific restaurant can just be an instance of CheapRestaurant or ExpensiveRestaurant and inherit from those prototypes, which inherit from the Restaurant prototype...which has a prototype of the built-in Object prototype in JavaScript.

This is a very, very powerful pattern, and you will see it all over the place, even if it's somewhat hidden sometimes.

The prototype chain and prototype inheritance is how JavaScript works, and the only way to have one thing inherit properties from another.