Object Types (Video Version)

This is just a screen grab of our interactive coding talk-through, prepared to make captioning and translation easier. It is better to watch our talk-throughs here:
https://www.khanacademy.org/cs/programming/

Now that you understand
the basics of Javascript,

I want to teach you
about a cool way of using Javascript,

something we call
"object-oriented programming."

But first we need
to understand why it's actually useful.

So I put together a program
that will be better once we make it

more object-oriented.

Now, it's a pretty cool program
to start with.

At the top, I have two variables
that store simple object literals inside.

Now, the object literal is a kind
of object we learned about before,

that we create with two curly braces

and then we put all these property names
and values inside.

So we have two of those object
literal variables, and then down here

we have this function drawWinston
which expects a single argument,

and then it draws the argument,
it draws an image based on the x

and y properties of the object

and then a caption based on the nickname
and age properties of that object.

And now finally at the bottom,
we call drawWinston

on the teen and on the adult,

and that's what makes it show up.

Pretty cool. Now, if we go up here,
and we look at these object literals,

notice something about them is
that they're really similar-looking.

Both of them have the same sets
of properties and both of them can be used

by this same drawWinston function.

In fact, you know, if you think
about this, they're really both describing

a type of Winston, right?

And we can think like maybe there's
this abstract type of Winston in the world

and every Winston has the same set
of properties like a nickname

and an age and an x and a y and here,

what we've done is we've just created
two instances of a Winston

to describe a particular Winston.

So this is a teenage Winston
and this is an adult Winston.

But they're really, they're really
both quite similar and there's a lot

of things that are similar about them.

And if you think about it, that's a lot
the way the world works too,

is that we have these abstract data types
like humans and people

and then we're all just specific
instances of those

with our own little properties.

Now, we can actually use
object-oriented techniques in Javascript

so that these Winston variables
are formal instances of a Winston object,

so that they know that they share
these things in common.

So, to do that, the first thing we need
to do is actually describe

this abstract datatype Winston,
and so we'll do that by making a variable.

You will store the datatype in a variable
so var Winston, and we'll do capital W

because we always start
our object types with a capital,

and we'll set it equal to a function.

And this function is a special function
that we call a "constructor function"

because this is what's going to get called
every time we want

to create a new Winston instance.

So when we want to create a teenage
Winston, we'll call this function

or an adultWinston,
we'll call this function.

So that means that this function
should take whatever arguments it needs

to know about in order
to make a full Winston.

So in this case it needs to know
a nickname, an age, an x and a y.

Now, once we've received those arguments
we need to do something with them,

so we need to actually attach
that information to the Winston object.

So we'll use a new special keyword,
called "this". And "this" will refer

to the current object instance.

So we'll say this.nickname,
so it'll say all right,

the nickname property
of this object is equal to

whatever gets passed
into the constructor function, okay?

And this.age is equal to the age
that gets passed in, this.x is equal

to the x that gets passed in,

and this.y equals the y
that gets passed in.

All right, so now we have
this abstract datatype called Winston,

and it has a constructor function
that we can use to create a new Winston.

So let's try to use it!

We're going to create winstonTeen again,
but this time we're going

to say winstonTeen equals,

and instead of curly braces,
we're gonna say "equals new Winston".

So we're saying "we're trying
to create a new Winston instance,"

and then we're going to pass
in the information that it needs

so "Winsteen", 15, 20, 50, okay?

And then we can delete this old one
because we don't need it anymore.

All right? And now that's
created a new Winsteen.

And now we can say
winstonAdult = new Winston()

and of course his name is
"Mr. Winst-a-lot", sweet name,

and he's 30, and he's at 229 and 50.
All right? And then we can delete

this object literal,
and, tada! Our code still works.

So what we've done here
is that we've said okay there's this,

this kind of abstract type
of data which is this Winston

and we can create new Winston instances
that have these properties

that are unique to them,

and we'll just remember
those properties inside them.

And remembering is really important.
So you know inside here,

we have this.nickname, this.age.

If we accidentally didn't have this age,
notice that now it says "undefined."

That's because down here,
this drawWinston function,

it expects whatever object gets passed in
it expects it to have an age property.

And if we didn't say this.age,

then it doesn't have an age property.
We passed it to the construction function

but then we didn't do anything with it,
we have to actually attach it

to the object using "this" keyword.

So we'll add this back.

Now you might be thinking
like sure, you got your code working

but, you know, we're... all we've done is
accomplished what we had before.

But here's the cool thing.
Now, all of our Winstons go

through the same constructor function.

So if we want to, we can actually
change things, change some things

about the Winston...

all the Winstons, just inside here.
So maybe age, we actually want

to say "years old."

We can just put that here,
and now all of our Winstons say

"15 years old," "30 years old," right?

So they're taking the part
that's unique about them,

but then they also have things
that are shared about them.

And that's a really cool thing
about object-oriented programming

is this idea that there's
these kinds of objects

in the world, and you can actually
create instances of these objects,

and there's some things
that are similar about them

like they all have the same properties.

Then there are things that are different
like oh, this property is actually

a different value
than this other property, right?

But then, you know, we can do
the same behavior with them

like call the same functions

and use them in similar ways.

So that's some of the cool stuff
about object-oriented programming

but as you're going to see,
there's tons more too.

So, stay tuned!