look at the class keyword in JavaScript
this video contains three segments the
first one is how does class work in
JavaScript this video talks about how a
class works specifically in JavaScript
so I’m going to assume that you know
what a class is in the general sense the
second part of the video deals with the
fact that JavaScript does not have
classes I’m going to demonstrate how the
class keyword is just syntactic sugar on
top of the prototypal inheritance model
the third and final part of this video
is called when in Rome learn JavaScript
in this segment I’m going to try to
convince you if you are new to
JavaScript and you’re coming from
another programming language such as
Java or or C sharp or whatever to learn
JavaScript properly and not try to force
your existing mental model into
JavaScript because that will just cause
you pain that is what we are going to
talk about today I am mpj and you are
watching funfun function before we begin
I would like to stress that this episode
is part of a series the purpose of this
series is to really get into and
understand how object creation in
JavaScript works okay
learn it properly because we’re
programming in this language now we
should really learn its nooks and
crannies if you found this video by
googling JavaScript classes it’s very
tempting to just watch this video and
try to get on with it but please look at
the series from the start instead you
can find it by clicking in the upper
right corner or the link in the episode
description this will make you feel a
lot less confused and by having these
fundamentals down it will make you a
calmer person and a better person and
you will thank me for it I promise if
you’re not a new viewer however you
might be confused as to why and doing an
object creation series because I started
this channel by doing a series on how to
do functional programming in
javascript and I am often vocal against
doing too much object orientation I
don’t think that you should not
necessarily view this series as an
endorsement of object orientation but
instead view it as a way of getting to
know JavaScript intimately because
dismissing something because you know it
and you’re well familiar with it and you
choose not to use it that’s wisdom but
if you don’t know about something you
don’t know it fully and don’t know how
to use it and you avoid it then that is
not wisdom that is just ignorance all
right let’s get into it so classes in in
JavaScript they work very much like you
would expect let’s create a class called
mammal memo that yeah and then we are
going to create a new memo call it with
nothing and just call it with fluffy kin
hello there and let’s echo out what
Plotkin’s is check what it is oh it’s an
empty object if you’re interested the
plug-in that I’m using for inline
evaluation here is called quokka you can
find a link in the episode description
classes in JavaScript can have
constructors as you would expect them to
have say construct or and you can also
assign a properties to object like this
dot let’s call this property sound you
and let’s see I want this to use a an
argument so constructors can have
arguments so let’s say they call this
sound and then we also need to pass it
down here mm-hmm I’m going to call this
proof there so the property sound of
fluffykins is now whoops nothing strange
here you can also do methods so you
perhaps call this talk and it will just
return whatever is inside this dot sound
so if I do fluffykins dot talk nothing
happens I need to return this dot sound
and this does not work either
because I need to assign it to a
variable or quokka won’t evaluate it
work with what work work work I really
should think of better examples than
animals but I like animals they are cute
nice and of course clauses in JavaScript
can do inheritance so let’s do class dot
dog extends barb mammal and along with
the digit eat ah and we’re going to give
it a constructor it will take no
arguments and it’s going to call super
which is basically calling the
constructor of the inherited class so
super here it’s actually going to call
the constructor of of mammal here
because we are inheriting mammal so
we’re going to pass in sound here now
and let’s change fluffykins to be a dog
and remove this and see if this works
did it work why doesn’t it work it’s
open the terminal’ super keyword
unexpected here what is happening ah
construct or there now it works
willfully with me were flu I am the best
at programming I would like to make a
side warning here we’re seeing some
inheritance here be very careful about
using inheritance it’s very problematic
it’s a problematic pattern and you
should prefer composition in almost all
cases you might want to look at my video
composition over inheritance by clicking
in the upper right corner or in the
episode description but that’s a side
note we’re not passing judgment on that
right now I am very very bright
perhaps I should like drop the year and
drop the thing let’s drop the thing
perhaps this is better yeah that’s
better
so far the class keyword in JavaScript
works like we’d expect if we are coming
from
Monda Java or C short background or any
other programming language mostly and
that has classes but there are weird
things that work not like you’d expect
for example there is no way for us to
make this sound property here private
pry probably private so I there’s no way
for me to say something like probably
that sound it’s it’s there’s no such
thing and there’s no trick to do it
either so I can always do let me show
you let y equals fluffy king dot sound
and I can do Y you see I can access it
from outside and I can also change it so
let’s say I can call it fluffy King
equals one no sorry I can that will but
fluffykins dot sound and now it says one
or I could just go meow you see since
private members do not exist in
JavaScript you often see people are
doing underscore as a convention to to
indicate that this is a private private
member and that you should not mess with
it if you’re using the class but you
know I can’t just mess with it it’s very
brittle at this point you might be
asking yourself why doesn’t the class
keyword in JavaScript have support for
private members it seems weird because
the class keyword was added very
recently to JavaScript it was added just
a few years ago why didn’t they add this
it seems like a very basic type of
functionality that’s a great question
and the answer is that javascript does
not have classes its own fake in the
previous episode about the new keyword
we we talked about how JavaScript fake
classes in that episode we looked at how
the new keyword could be applied to a
constructor function and together with
the prototype that kind of faked
something that behaved just like a class
but it wasn’t really a class it was just
kind of sort of looking like a class and
the class keyword in es6 is really just
like that it’s just a bit prettier
syntactic sugar it’s all smoke and
mirrors allow me to demonstrate I’m
going to do this type of dog it’s a
function no it’s a function because
classes do not exist in JavaScript it’s
just a thin layer on top of the old
prototypal inheritance it just looks a
little bit prettier so let’s see if I
can just do hmm dog dot proto
Oh type dot talk there we have our talk
method it’s this one here and if I just
call this immediately we’re going to get
an error no not an Arabic but undefined
because it doesn’t have a desktop sound
property let’s see if we can I’m going
to do something now if you understand it
that will yield you a golden star
because I’m going to be using all of the
things that we’ve been learning in this
series so far
let’s see talk dot bind and we’re going
to bind it to a new this the first
argument to bind is redefining this and
we’re going to call it be an object with
a property sound and we’re going to call
it hmm it’s hard to invent sound let’s
call it roar and then we call that
function and then it goes roar so what
you’re tap in there is that we call bind
with this object here an object with the
property underscore sound and that means
that what bind does is that it creates a
new version of talk where we have bound
this to be this object here to create a
new function and returns it and then we
call it here with this and also I think
I can do this
actually dog dot prototype is prototype
all fluffy can yes true
so you see class is just a very thin
layer on top of the prototypal
inheritance
there is no class-based inheritance in
JavaScript it’s all just smoke and
mirrors so the class keyword has
basically been welded onto JavaScript
the
cause there was a lot of pressure to do
it and the reason there was a lot of
pressure to do it is that there’s a lot
of new programmers coming in to Java
Scott new programmers as a newbies but
new programmers from other backgrounds
c-sharp C++ Java programmers are coming
in that are used to languages that are a
heavily object-oriented and B they have
a classical inheritance model they are
class-based so they they’re very used to
this and they don’t want to learn the
prototypal inheritance model that
JavaScript has and they don’t want to
learn the functional programming model
that JavaScript has they they want
JavaScript to be like the programming
language that they already know and I
don’t want to poke people for that too
much because looking up how to do a
class was one of the first things I did
when I started learning JavaScript in my
mind adding the class keyword to
JavaScript was a little bit like I’m not
getting trouble for this
giving clean needles to meth addicts it
is a distinct improvement over using
dirty needles to do math but if we can
we should try to get people off math
which brings me to the third segment
When in Rome right JavaScript try to
embrace JavaScript and its strengths and
learn to write JavaScript in a way that
its natural to JavaScript do not try to
force the existing models that you have
from whatever language Java or C sharp
into JavaScript and the reason you want
to do that is that if you don’t is that
you you will always have this sense of
unease and uncertainty about what is
happening when you’re looking in the
chrome inspector
and you see these prototype things of
yours with underscores on your classes
you you will just feel what is this all
I don’t you will just feel not at ease
because you don’t understand what it is
that you’re doing because you’re using
this thing that it kind of looks like a
class but it really is trying to hide
some internal implementation from you
but it does a bad job of it so it’s just
you see this weird sense of I don’t have
control and if you don’t understand the
prototypal inheritance model and that
class is just a thin layer on top of it
you will not understand its limitations
you won’t understand why there is no
such thing as private members and you
you will just be angry about that
limitation you but you won’t understand
the context about the thing that you’re
angry about and that will give you a and
yes a sense of not being in control and
the world is against you and this is not
just about learning about the prototypal
inheritance model of JavaScript it’s
also about learning about the functional
nature of JavaScript because that ties
into object raishin in JavaScript a lot
because there’s a lot of weirdness with
bind and this that you won’t really
understand without understanding the
functional nature of JavaScript so if
you want to feel comfortable writing
JavaScript and know really what you’re
doing you should check out this series
from the start if you haven’t already
and you should also check out the my
functional programming in JavaScript
series because that will that ties into
object creation a lot that is it for
today we talked a little bit about how a
class works in JavaScript then we
explored how JavaScript doesn’t have
classes and finally I ranted a little
bit about how when in Rome right
JavaScript if anything was unclear or if
you would like an elaboration please
write a comment down
below and I will try to answer it you
have just watched an episode of fun fun
function I release this every Monday
morning Oh 800 GMT if you don’t want to
wait until next Monday you can check out
this episode too that Google’s machine
learning thingamabob has selected for
your viewing pleasure
I am mpj until next Monday morning stay tuned