about object orientated programming in ES6 with classes,

and that is what is polymorphism?

And what does polymorphism mean,

and how is it applied in JavaScript?

So just a review, the core idea

of object orientated programming,

creating a blueprint, a template as a class,

that makes, that encapsulates

a whole bunch of data and functionality together,

that is the idea of encapsulation.

It's a little package of an object,

with data and functionality.

Inheritance is the idea of one side made a class,

and I want a class to inherit

a lot of properties or functions,

but modified with its own custom stuff.

That's the idea of inheritance,

and inheritance is a thing that happens in a tree,

because you can have something inherit something,

which inherits something else.

And actually, at the end of this video,

I'm going to do a little bonus,

and just show one little trick about inheritance

that might be kind of interesting.

Now, what is polymorphism?

So, polymorphism, if we look at the word itself,

poly, meaning many,

and morphism, morph for like form,

means we can treat an element,

an object that has a particular type,

like a Confetti object,

as either a Confetti object or a Particle object,

depending on what's convenient for us.

And yet, somehow, the system, the compiler,

the interpreter, the executor of the code,

is going to know what to do correctly.

And so, if I were in a strongly typed language,

which JavaScript is not.

By strongly typed, I mean you have to declare

the type of the thing before you make a variable.

- One moment, please!

So, during this video,

I refer to Java as a strongly typed language,

and all the places I looked on the internet,

do describe Java as a strongly typed language.

However, the aspect that I was explaining

is really something known as explicit typing,

meaning you have to,

if you're going to declare a variable, a variable p,

I have to say what kind of data I'm putting in there.

Is it an integer, is it a float, is it a particle?

What "strongly typed" means,

is that that type could never change.

It has to remain the same.

And there's really like a lot of stricter rules

around how that works.

So like Python, for example, is also strongly typed,

but you don't have to declare,

it's not explicit,

you don't have to say what kind of type that variable is.

You just can't change it later, you've got to be,

it's got to work all what is compiled.

So there's a lot of nuance to that,

and I'll try to include some reading material

in this video's description, to explain that better.

But what I really meant was explicit typing, okay?

Now, back to the video.

- Normally I would say, like

Confetti, c equals a new Confetti object.

This is the way, in a strongly typed language,

I would declare a variable, c,

I would give it a type, it's Confetti,

and I'd call the Confetti constructor to make that object.

In a strongly typed language,

I could also say, Particle p or Particle C,

or whatever it is,

equals new Confetti.

And this would be allowed,

because Confetti extends Particle.

So, in that case,

I could consider this variable to be of different forms.

I can consider it to be a Particle when it's convenient,

or a Confetti object when it's convenient.

But, the compiler will always know

to execute and use the properties and functions

of the Confetti class.

And this is especially convenient

when you want to put a lot of stuff into an array

in a strongly typed language,

because you don't want to keep track

of which types which things are.

We can basically do the same idea in JavaScript,

it will just look less fantastic,

because JavaScript is so flexible anyway about types.

But this is the core idea.

So, let's actually go and do this.

Over here, let's change --

this is code from my previous video about inheritance --

let's change this to an array.

And I'm going to make an array called Particle.

And I'm going to put a little for loop,

to just add 10 Particles in setup.

Then, just to get started,

I'm going to say Particles, index i is a new Particle,

and I'll just put them all in the center, whatever.

And then, now I can say for let p of particles.

And I can say, and this in a for of loop,

which lets me go through every particle,

I could use a for each loop,

I know a lot of people prefer those.

But, let p update and show.

So, now I should see, if I refresh this,

I should see, here we go,

I've got 10 particles moving around.

Now, what if what I wanted to do was say,

if random one is less than .5,

so I basically want to give a 50% chance

of either putting a Particle object or a Confetti object.

The magic of all of this

is that I don't have to change this code down here.

I just can fill this same array

with a bunch of different objects,

as long as they're kind of linked

through this idea of inheritance,

they all have an update function,

they all have a show function,

polymorphism says this variable, p,

is going to know for each one,

whether it's a Confetti or a Particle object,

and it's going to execute the right version of the function.

So we should now see,

we have a bunch Particles and a bunch of Confettis.

And every time I refresh this,

there's a different random amount.

So, that's polymorphism.

Wow, I made kind of a short video.

So, I promised a little extra tidbit

here at the end of this video.

So one of the things that's really interesting

about inheritance and that inheritance tree,

is that inheritance is not just the thing that's useful

because you designed your own Particle class,

and now you're designing your own Confetti class

that extends Particle.

Maybe somebody else designed something

and you want to inherit everything from that.

For example, there is a thing in p5 called p5.Vector.

I've used it in a lot of coding challenges and videos.

p5.Vector object is a vector object.

It has an x, a y, and a z component,

and has a lot of functionality for vector math.

So what I actually could do here,

is I could say, look at this,

I could say class Particle extends p5.Vector.

So in that case, now I'm just going to say, super x, y,

this is now an object that's going to get x and y

from the parent class.

But, I can now start to use other stuff.

So, for example, my Particle might also have a velocity,

which is, I want to make it random,

so I'm actually going to use the p5.Vector random 2D function,

so it can have a random velocity,

and then I can say, oh this is so crazy,

but this.add, this.velocity.

Because there's an add function

and I want to add the velocity to this object,

because it is a p5.Vector, ah!

And then I could just draw it at this, .x and .y.

Let's see if this works.

Amazingly, this works.

So, the behavior is very different,

because it's not a different random velocity,

it's just a random direction,

but you can see, this is very powerful.

Particle extended p5.Vector,

I suddenly got access to

all of the vector math that's in p5.Vector,

and then Confetti extends Particle,

so it's also a vector.

And let's just look, I think it would be useful

for me to, very briefly, before I go,

just go over to the console and do something like,

let a p equal a new Particle.

Just look at this, look at this.

Take a look at this.

You can see that this is now,

this Particle object has an x, y, and z,

and this is actually how it works underneath the hood.

You can see here that its prototype,

where it inherits everything from,

is from this particular object.

And if I looked at a Confetti object,

this has to do with the prototype stuff,

this is what ES6 classes completely hides from you,

and if I look at this object now,

we can see, look, it has the brightness in r,

it has this velocity, it has an x, y, z,

its prototype, what it inherits from,

is Particle, and that prototype is vector!

So you can actually see,

this is generally a place you kind of don't want to look,

'cause it's like super confusing,

but you can see the inheritance chain, the prototype chain,

or the inheritance tree here.

Confetti extends Particle, which extends vector.

And this s.Vector is like a weird notation,

'cause of the way the p5 library works.

Alright.

So that was a little extra trick.

You can think about that,

maybe that will confuse you, that's okay,

it kind of confused me while I was explaining it.

Hopefully you got a sense of inheritance and polymorphism

as features as aspects of object oriented programming

that you can apply in JavaScript using ES6 JavaScript.

Thanks very much, and I'll see you later.

(upbeat music)