to talk to you about something called inheritance.

Inheritance in the context of object oriented programming

and JavaScript and ES6 classes.

Oof!

So, first of all,

there are three core foundational principles

to object oriented programming.

Let me write those down!

There's this idea of encapsulation,

there is this idea of inheritance,

that is the topic of this particular video,

and there is also the concept of polymorphism

which I will come back to.

And I have made videos on all of these topics before.

I can link to them.

Those videos, however,

were all made in the processing programming environment

and looking at these three principles

in the Java programming language.

Now I am talking about exactly the same thing

but in JavaScript.

And I have already made a whole set of videos about

encapsulation and object orineted programming in JavaScript

making use of something called ES6 classes.

So one of the things you have to get used to

if you choose to spend you life programming in JavaScript

is that it's just always changing

and there's 500 different ways to do the same thing

and everybody's got their opinion on which way is best.

And a lot of my older videos used a prototype

a prototypical object based way

of doing object oriented programming

with a constructor function

and you'll find those in older coding challenges

and you'll even find a set of videos about

how to do object oriented programming that way

and even one about how to do inheritance that way.

And if you watch that you're a true champion

because this is wildly confusing

and I have no idea if I explain that well.

But I am here in this video

to talk about ES6 classes.

So what is a class?

Oh, sorry, ES6 being the version of JavaScript

that came out in 2015.

It is currently 2019 while I'm recording this.

But it is now pretty widely supported across all browsers.

So, the idea of a class,

and I'm going to use as my example

something called particle,

because I am demonstrating this in the context

of animation and graphics.

So I'm drawing particles in a canvas

those particles move around the canvas

and the class is a template

for the making of an object.

If I create a particle class,

then I can have a variable somewhere else,

maybe I call it p,

and I can say new particle.

An analogy that's often used to describe

the distinction between the class and the object

is the cookie cutter versus the cookie.

So the cookie cutter isn't actually a cookie.

It's a thing that you can make cookies with.

So this is a template, there's no particle object here.

This is just a template to make actual particle objects.

And if I have my template

I can make more than one particle object

each with its own set of properites

all made from the same template.

So the new key word here,

saying new particle means execute something inside the class

called a constructor function.

So I'm kind of I guess by accident reviewing

some of the basics of ES6 classes

and object oriented programming

to get myself into the inheritance topic.

But I'm going to kind of move along

because you can find and see many more

details and examples about this in the other videos.

So this is the basic idea.

So let's go over to the code for a second.

So what I have over here is a canvas

with a little dot moving around.

And this dot is an example of a particle object.

So here's my class.

I have the constructor,

the object gets an x and a y

and the update function changes the x and y randomly

and the show function draws it as a boint.

A boint?

(laughs)

It would be great if there was a function called boint,

by the way.

Anyway.

So let's say now,

let's say this is your life,

this is what's happening to you.

You know what I would like?

I would like to put another one of these particles

I wanted to,

but I want it to look different.

And so I want it to be a square particle.

So the first thing you might do is like, okay,

I'm going to make a Boolean variable like isSquare

and I'm going to set that to a square,

I'm going to add another argument here square.

And then I'm going to say

alright, if this dot is square,

then draw this as a,

not a square a function,

then just use rectangle,

this dot x this dot y,

when will this ever end?

At least I could use the square function,

it's the least I could do.

Could say square,

otherwise make it a point,

and then, ugh, I'm so tired already.

I need a parenthesis here

and then I have to go over here,

and I could change this to like true

because I want it to be a square,

and then I refresh and look, it's a square,

and then I could say false and it's not.

So now I could have two particles,

oh, I could have p1 and p2

and I could have p1 do this

and p2 do this,

oh, I'm so tired.

This is so much work and so much coding.

And I'm going to call update and show on both of those.

And there we go.

Now I have my circle and my square.

Alright, so that's one solution to this.

I have two different mostly the same things

with some sort of core essential difference.

I don't like this solution.

Let me do it another way.

I'm going to make another,

I'm going to just create a new JavaScript file.

I'm going to call it square.js.

I'm going to go here,

I'm going to copy paste the whole thing

paste that in here,

I'm going to get rid of this idea of isSquare,

and I'm going to have a class called SquareP

for square particle.

I'm going to get rid of this variable.

And then I'm going to,

this one's the square so I'm going to draw it as a square.

And then this one is the circle

so I'm going to draw this just as a plain old point.

And I don't need this anymore,

and I don't need this.

So I have basically a particle class

and I have a square class, SquareP class,

they're entirely the same

but one draws as a square

and one draws as a particle.

Now I'm going to go back to Sketch.js

and I'm going to say new SquareP

and I'm going to refresh,

and if I did everything right,

no, SquareP is not defined

because I forgot to reference it

in my index.html so let me do that.

Then I'm going to go back

and there we go!

(bell dings)

Good night!

This video is now over,

but not at all!

In fact, I'm only just getting started.

All of this was exposition.