Good morning, everyone.
So…
Lecture 22, we're almost done here just um
Just one more class after this.
So…
Just first administrative stuff.
So we go to our assignment for solutions. TAs are busy grading assignment three. I'm hoping to have grades for assignment
posted before the last class but
no promises about that.
So the last class is Thursday.
All the assignments so oh so
I just do…
Simon three and four will be graded before the final exam.
So I've already requested interviews for those of you if you
So if I've contacted you for an interview, the interview is mandatory.
sign up for them.
during OpenStock.
So it's OpenStack.
John, is there any other administrative things?
Oh, yes.
Perfect.
place the week of, so we're sitting here
So we're here the third.
Last class is on the 5th.
exams on the 12th.
exams will happen, should happen this week.
You know…
Okay.
Anything else?
Yeah, I think that's all logistics stuff. Oh, one more thing.
What are they doing?
Would you all want a question and answer session?
So during the class, I'm planning on doing all the review
In our last class.
But this week.
Oh.
practice for the exam.
I'm not going to give specific practice for the exam because
I mean, the assignments are the practice and you've already now seen a midterm
for the style of questions that I'll be asking.
So it's, you know, and so
So a question about interviews. Most of you won't get interviews and it should only take about 15 minutes.
So I figure you all can take a break for 15 minutes to do that. And again, you don't have to do any preparation.
for an interview.
Oh, super quick.
So no prep needed for that.
What was I thinking? Anything else?
The emails have all been sent out.
For interviews.
If you want to volunteer for an interview, you can sign up.
feel free.
If there's no slots available and you're interested in doing an interview
Just send me a message, preferably on teams and
I will probably open up more slots.
Anything else?
So, uh.
What I wanted to talk about today is actually something
pretty important that I haven't talked about
all semester. It's not something that's going to be on the exam
But I'm going to have a little quiz on it, again, for the lecture quiz but more it's uh
These are things to know.
So one thing you should know about is strict mode.
original javascript
So let me show you what I'm talking about. Assigned to a variable that hasn't been declared.
So…
So you see this x equals five uncaught reference error, x is not defined.
If you try it in a browser.
If you go to the console in a browser and you try
I was curious if I do.
I'll show you this. So if I do…
So.
so so
Here, if I do x equals 5,
it just works. I don't have to declare it.
What I'm saying here is…
So you'll notice this inconsistency based on your JavaScript environment.
If you're just sort of…
typing things in, whether you can do it now might go like
This is pretty bizarre.
You just say x equals five and it's just like, okay, go for it. But here in Denno, it's going
you know say var x equals 5
then that's fine.
So we might say, well, is this really such a big difference? Well, imagine you're in a function.
And you have a typo for a variable. So you had some variable named
you know car
and then you accidentally type bar.
You say bar equals five instead of car equals five. Now, in most languages, if you
mistyped the variable
the compiler runtime will go like, hey, I've never seen that variable. What are you talking about?
Traditional JavaScript will just say, okay, I guess you want to define a new variable.
Strict JavaScript will say, hey.
You haven't declared that variable. I don't know what you're talking about.
So…
it's generally what you want is strict mode.
So this whole thing of putting use strict
at the top of a function or the top of a file to enable strict mode.
is a little bit funny if you think about it, because it's just a
You're just putting a string in there
And it's like, why should that matter? That's just a string. I could always just put a string as a line in a function
Josh will go, okay, you defined a string and you didn't do anything with it. Okay, we'll move on.
But…
But it turns out JavaScript runtimes look for this string.
And if it's there at the beginning of a file or at the beginning of a function, it puts things in the strict mode. But as I said, if you're
Programming a JavaScript module, you're already in strict mode. In Denno.
defaults to strict mode, so it hasn't really been an issue for us
But it's something you should know about, particularly for client-side JavaScript.
Well, although, I mean, if you're using modules, as I think we have, we're already getting strict mode so
I didn't mess up.
But it doesn't affect properties of objects.
Yes. Properties of objects.
Yeah, so now this thing about not assigned to undefined properties of objects
That's a major foot gun in JavaScript.
But it's kind of a deep reason for why it's there. It's due to the nature of
of JavaScript. And I'm going to actually talk
most of the lecture I want to talk about objects.
So there was just a question here. So everything we need to prepare for the exam is in our assignments. We should disregard the lectures.
Um…
I wouldn't, I mean, if the lectures are not helpful for you to understand the assignments, you can ignore the lectures but
The point of my lectures is to give you the background and context
to understand
the code and the assignment.
If my lectures don't help me, you can just understand the code.
the questions, then you're fine.
But yeah, no, I cover more things in the lectures than what is covered in the assignments.
For example, what I'm talking about today, this is not going to be on the final exam.
But it's going to be…
But it's a material. One general material
I will say if you're coming to university.
and you're taking classes.
What's your goal?
Is your goal to get good grades?
is your goal is your goal
to learn things.
Now.
I'm not saying you shouldn't get good grades. Good grades are important, especially if you're
going to grad school. Grad school, they'll care about those things.
And employers, when you graduate, might care about your GPA or something, maybe when you're getting your first job or something.
But really…
grades are really more of a diagnostic to kind of see are you
learning the things we're trying to teach you.
And even then though.
it's a very imperfect one.
It is possible to do well in some classes.
by taking shortcuts.
Which means you don't actually learn the material.
I think you're coming to you.
coming to university to learn things.
that's why you bother spending this time. I mean, yes, you get a credential at the end, but the credential only matters to the degree that you actually learn something.
And oftentimes the most important things to learn are things that aren't so easy to test.
So I thought long and hard about how to design my courses
And I kind of thought, I could design my course
So I made sure my
tests and my evaluations
covered everything I covered in class.
And then I realized that I couldn't really teach what I wanted to teach.
So I instead decided I'm going to make it very fair what i
what I evaluate you on?
uncovering this material. You know what's coming.
It shouldn't be a surprise.
But what I teach.
is what I teach.
And I try to cover things that I think are important for understanding the subject.
So related to that.
we've got strict mode.
which things and then the other big thing is understanding
So objects, prototypes, and classes.
JavaScript is an object-oriented language. It does support inheritance in classes.
We haven't used them in class.
I don't know, funny repetition.
But the way JavaScript does these things is
weird relative to most of the languages you've seen, particularly languages like java
and C++.
Python, I think, might be sort of similar, but Python's got some other weirdness.
So when I say things are a little odd.
Let me show you what I mean.
So Iris wrote this little bit of code here.
And this is a definition of a class.
And so, oh, by the way.
I got pasting into terminals working
This was the thing that was bugging me earlier. I don't know if you noticed it during my lectures, is that I would try to paste into a terminal
And it wouldn't work. It turns out there's a completely different function
for pasting into terminals than it is for pasting into most buffers and Emacs.
But I found it and I assigned it to the right keystrokes and now paste works for me.
Which is useful.
But anyway, so we define a class rectangles now we've got
If I say rectangle.
rectangle is now a class and it actually tells you that it's a class and the name of the class
And we can do things like
make a new rectangle.
So.
So five times.
So now notice what the syntax here.
It says, it doesn't just, you know, before we've always, you know, had this sentence, you know.
The curly braces mean we've got an object.
But here it essentially says
the type well the class
of the object. It's saying that r is a rectangle. It's a class rectangle
And it has these properties, height and width.
and r dot area.
returns the area.
Which is 35.
Can you see these colors? I just realized they're a little
faded some of them.
if it's a problem, I can restart and reverse video.
Okay. Okay, cool.
So we've got an object. It's a class. This looks kind of ordinary.
And we can look at the syntax here of how I declared a rectangle.
So a rectangle is, say class rectangle
And the declaration of this is basically our standard
object declaration, i.e. these are properties
And I could also say
things like, you know, I could also have properties of them
Oh.
So let me, I'll redefine this.
Oh, right.
I said it's object notation and I did it wrong.
And I think that should.
I think that should work.
Let's see if I got the syntax right.
Oh.
I remember how classes work with.
Okay.
Buying a class here.
You can define a constructor.
I thought you could have properties of a class.
Oh, a class can just have a setter getter
Oh, location of this bill. Okay, that's all you can…
You can't do properties.
public static method, get our setter and field. Okay.
Yeah.
Oh, I have to say static.
Okay, that's what I have to do.
Oh, I just…
Oh, no, I can just do that.
Okay, I'm just wrong. Oh, I just don't see that. I just say.
I was like very confused there.
So you go here
Now let's try that.
There we go. And now we say
Oh.
There's no comma.
I'll get the syntax right one of these days.
Okay, there we go.
So now we say
bar r equals
Eight.
Sound good?
So notice now the property here, we only defined, so name was always defined there.
r dare area.
48. And now we can define
a class square
that x i get rid of the comma
Now we have square and now we say we have square
now you notice that you notice
the name of the square
has now been overridden.
of this one as you expect, and we have our fields here and it called the super
constructor with size and so we have a width and height
So this all should be pretty familiar to you
from your object-oriented training.
Thing is…
there's something a little weird with this, though.
Do you all know the phrase syntactic sugar?
Has it come up in any of your classes?
So some of you seem to know what syntactic sugar is, but not many.
Okay, so when we say syntactic sugar, we're just saying it's properties of a programming language
that don't add new functionality. They add new syntax, but don't add new functionality. The functionalities
is accessible using other methods.
So…
Now, if you think about this for a second, you go like, wait.
JavaScript.
can do classes.
Without classes.
What? How can you do that?
Turns out that…
So JavaScript
model.
It's prototype-based inheritance
not class-based inheritance.
You might say, what's the big deal class versus prototype so
the notion here is when you have a class
A class is a different thing
from an object. An object belongs to a class, but a class is not an object.
it's a class.
And you can't do anything with classes on their own.
But that's not how, but JavaScript's not that way.
So when I mean, it's prototypes.
What do we mean by that?
So what it's saying is that you have
If we look at what Square.
We ask for
squared.prototype
its prototype is rectangle.
And if we say rectangle.
its prototype is the empty object.
the rich var…
So I'm getting to the advantages of prototype-based inheritance in a second here.
So, VAR.
x equals x equals
So, I say.
Yeah, so…
Okay, good.
Okay, that's what I expected. Okay.
So…
I'll explain about prototypes in general, but you can get at the prototype
If the prototype's well-defined.
you can get at it with .prototype.
But it doesn't quite work as a property you'd normally expect. It's a little funky.
And you get things like, you know, something is just undefined
and stuff. But if you want to get what the real prototype of something, there is an object in JavaScript that's all called
object.
object has various utility things for dealing with objects
And you can get the prototype
of an object by just calling
get prototype of. You can also set the prototype.
of something to another object by calling set prototype.
And this lets you see what those prototypes are.
Before I explain why you do this, I want to show you what I mean by these
prototypes. I also need to explain
new and this.
So if you want to do inheritance, you can inherit from any object.
So there's a little side question. Does A4 not have a validator? A4 does not have a validator because you have
Because the code for the assignment is a validator.
At this point, you should be able to use that code
I mean, really, the code already sets up everything for everything
assignment for validation except for the right number of questions and you should be able to change the number of questions.
So.
So that's part of doing the assignment is figuring out how to validate it using the code you have.
Anyway.
But you inherit you can do inheritance with any object.
You just set it as the prototype.
So this is really the key thing here. There's a certain kind of
uniformity.
to doing object-based inheritance where you say one object is a prototype of another object.
And you go because you go because
it means that you don't have to worry about deciding what the exact class hierarchy and things. You just make an object. Okay, that one I want something like that, but I want to inherit from it, then add some additional functionality.
And from that way I want to inherit and do some mutual functionality.
it's clean, but you have to be then disciplined in how you define these things
You have to make…
your prototypes have to be
You probably want to keep those genuine prototypes. You don't necessarily want to have much state associated with them.
Because if you do, then…
you're going to have problems.
so
I'll talk a little more about why this is, but really it's about making the language dynamic, making it simple.
The funny thing is object prototype-based inheritance
I believe theoretically is theoretically
more powerful than class-based inheritance. And I think it kind of shows this
Because class-based inheritance got implemented on top of prototypes in JavaScript.
That's how they implemented the whole class notion. It was a very late comer to the language. I mean, only I think, was added like
10 years ago or something like that, really, you know, and you know
Maybe less.
I have to look that up but um
And JavaScript.
25-year-old, you know, 25 years old now or something.
Anyway.
So…
Let me show you a little more things and then we'll talk about like the advantages, disadvantages.
So…
So we have this code here.
let's now let's try defining an oval
but not using class-based inheritance.
So what we're going to just do is…
We'll define a function oval
which takes um which takes
we'll take a…
remember my equation for how to define the area of an oval.
But with the height
major minor axis.
We'll just keep it that way. It doesn't really matter.
Two.
So we define an oval here, a function oval width and height
And so here now we're going like, what?
How am I defining a function here?
with width and height and just doing oval here
What I'm doing is I'm going to define a constructor
function. And so what it will do, it will say um
So I'm defining this now here. This dot width is here, this dot height is this
I'm not.
This is not completely right, but I think this should work.
Let's see if I get this right.
Okay.
This should.
Oh.
That's what I should have done.
Sigma error.
Okay, so…
Please call with new.
I was undefined.
So…
Observe what happened here.
I defined this code here.
that's, you know, please call this with
That's just to make sure. And then I just do that's width, this height, and that's all I do in the function
And then all of a sudden, if I just type O, it looks
a heck of a lot like a heck of a lot
What I got here with my
you know square
and rectangle and stuff.
And so if i do
Oh, I see.
object, get prototype of.
O.
Okay, it doesn't have a prototype, but it just has a type.
But he doesn't have a product. But I should be able to now do…
I'm trying to remember how that works
Anyway, I'm now forgetting my syntax here. But basically, I think I should be able to do this
I just do function circle r?
Yeah, I'm actually messing things up. I should really make a constructor and things
Let's go.
So classes is, you know, this is doing classes
And then when you do prototypes.
prototype chain. Okay, so here you got some good examples. So like you do
have an object here.
We have our object literal and then you can do this.
And then you have
That's what I really should do.
So we'll do.
I forget how there's so so here you get into the problems
with prototype-based inheritance.
is that…
there's all these conventions for making this work.
But…
the basic prototype chain is essentially a flexible building block that lets you kind of do whatever you want with your objects.
Do you want to have your
objects
Okay, what do you want the prototype of this to be so like
I set the…
So we'll define
Well, I could just do this.
Sure does this.
So we have circle
completely wrong.
Sorry, I messed this up here. Let's just go back to do these things so
So we can define a, let's just do this.
So…
Child.
So notice here so notice here
So child is an empty object.
it has no properties of its own.
This is probably the most important thing.
that I'm messing up here. Sorry. So you have parent here
and you have child here.
and child is an empty object.
So I can say tile.
So there's there. But if I say child dot value
I get the value too because it's inheriting from parent and i go
I hate that prototype thing.
There.
Does this sometimes work?
Yeah, no, that doesn't. I've seen something saying like this
Yeah, no, that doesn't work. But you can always get the prototype of an object
by calling this.
Yeah, I think that I can do that.
What I'm forgetting is exactly how to do the constructors. So one nice thing about classes
if you look at them as things is they is they don't just define
the prototype.
So what it is is here you just define whatever properties you want of the class
And you have your methods, you can have your values. If you define things as static.
then they're apply to
all instances.
versus whether they're being local
for this. So I could say
So it's like here for
are, if I say r dot name
equals
Bob.
That's Bob.
I go, R, his name's Bob.
If I instead define
That's really stupid.
So I could do, I'll do this as static.
This is all, again, what you expect from objects.
So I say…
they have r1
R and R2.
So I have these two of them here.
And I go r dot.
joke?
Oh.
Didn't I?
Why didn't it define my new static?
thing. Why'd that go away?
I'm wondering if it's not redefined the
I'm very…
That doesn't make sense.
What I'm going to do is…
Okay.
We made a new one. We're going to do this.
Okay.
Okay, I don't know what's going on with the static stuff. Oh, I think, oh, I think that's private.
Anyway, so.
there's a lot of nuances to objects
I don't program with objects
like ever in JavaScript.
You might notice from how I'm programming this, you might go in like, why don't you program with objects?
Holy cure.
I don't like.
I'm really bad with objects.
I will probably have to
send you some code there just to show you what I'm talking about, the equivalent.
of objects
and classes and how all that works.
Because I saw an example of it and I thought I could reconstruct it from memory and I'm clearly messing up.
But…
The way JavaScript is set up.
it's really not about
objects except as key value stores. It has all this notion of inheritance
of things in there
But you don't really need it.
Yeah, I'll post a proper prototype-based example
After class, after I figure out what I'm doing wrong with my prototypes to make because you can make prototypes like classes
it's all the same mechanism, but you have to do some setup.
And I just did my inheritance chain wrong. But I don't normally think of things
In terms of this.
So I instead use functions.
what do I mean by that?
So let's go here and let's just start out of here. So like if I wanted to like the natural way I would do things so
Oh, I didn't explain this.
So if it's just a bare function has no value
So that's what new in this when you call a function with new
all you're doing is saying
here's a new empty object.
Right. That's how it works. The prototype of the
That's what the role of new in this is.
So let's just let's let's test out my
So let's do
Oh, rectangle.joke, but not our dot joke.
Oh, right. Okay, so that's not inherited.
that's what the static is.
Right. But that's what it means for static things to be.
That doesn't work. Okay, that's good.
But so we have our rectangle
What is it?
So it's a little bit different. Let's just say, let's just make a new object. Let's keep things clean.
So we're going to make, this is an object.
here box.
now and now
we're going to make sure we're going to make
So now we got box and big box i'm going to make
object of.
So object, get prototype of big box is that
Okay.
I guess because they're both okay
Good. So that inheritance is working right.
So what I just did there is I made a chain of box and big box.
So box is an empty object. Big box is an empty object. I set the prototype of big box to be box.
So now if I just type big box
It's an empty object grab box
It's got this phrase here.
inherits from it.
I can now do I can now
box dot size
undefined.
Now…
What if I now do
So that's the thing about prototype-based inheritance. You change the prototype
and the original object and all the inheriting objects do this.
And then if I say big box
But then if I say big box
So now it has two properties and now it has two properties
will override that.
So this is the basics of object-based inheritance, and this is how normally I would do it. And I would avoid
this whole new syntax, which is things, and even the notion of this
Well, this is actually, you know, so where does this come in? So we're going to say
So we'll say box
dot com.
Equals.
function.
No.
There we go.
Fox stuff.
are how to erase big box dot phrase um
So it verts to it.
What is it?
I know there's a way to remove object properties
property you basically call delete.
So…
syntax.
So, and then…
So you've got this you've got this
So I've got big so i've got big box here
I've got box here.
Box has this thing of this thing
you know, this you know this
function is this anonymous function of volume
And so I can say box.volume
And so how does Box get its volume? It gets from this because this function here
is a property of a property
is a property of this object here, it will get it from there. So now I can say
big box volume
He will also say that. I can say big box
dot.
height yeah equals 100.
And now it's gone up.
And so that's really what the this
is for it's so you make an object
you assign a function to it. When you assign a function to a property, it becomes a method.
And when it becomes a method.
then you can then you can
then you can call it with this
you know that's what this will do here.
We have this width, depth, and height.
And notice that I defined this
without those properties existing
for the object.
And in fact, I can do things like
box, I can go delete.
box.
And now I do big box
I get not a number because I had an undefined value input into a multiplication
And so the output I get is not a number. So it doesn't blow up, blow up, but I get something pretty useless.
But I can fix this.
Like I say, big box stock.
tools.
And that now works, but box stop volume
is still broken.
The question here, if I do boxed up volume, does that question still apply? I kind of got a little…
ahead of myself.
But boxes now look like this.
And big box looks like this.
So…
there's a way of defining objects
I'm just trying to remember. So I can do so that this works with new
And so if I say knew this, it will then call
something there but something there
change the field of parent the child also inherited. Assume the reverse doesn't apply. No, it does not.
Yeah, prototypes go at the prototype chain is one way. It's not two ways
So…
So we save.
So big box
So you got to wait here now.
And we got box
box awaits undefined, but big box stock.
is seven.
So like this style of JavaScript
I like because it's all very clean and there's no like real magic to it.
You can define. And if I want to define a function, I just define a function. There's this um
What was it?
I think I would just say um
So make a function the object that I want. So let's say
So if I want to make a new box right now, how do I make a new box?
So I can say
box is not a constructor.
So the normal thing you'd want to do is make a
your box.
All right.
So I think I should go do that.
And then if i
their box.
Oh, what is it?
There we go.
Object concern.
No, that's not what I want.
Yeah, new object
object initialize, but that's what we want.
No, no, that's not what I want.
this is how you make an object.
Okay, I'll i'll
I'll do that. Let's kind of make it
This is where like this annoys me. Oh, so what I can do here is…
Let's define it this way.
box to width dot file return t
See, this is the things that bug me about this bug me
that are very annoying by JavaScript. So you can do things like, say, I defined a function here
It set the prototype here.
to be there. So now I have this object here it inherits
So it gets the prototype
But it's not.
It's the same object as thing, but the name box
has disappeared.
So this is what I mean about making objects here. And if you wanted to, you could do the inheritance this way.
But this isn't the way you're supposed to do it in modern JavaScript. It kind of works, but you don't have these little
the things here of saying what the type is.
And that's what I'm going to, I'll figure out and I'll post something before Thursday. But again, this is all not covered on the exam.
So this is your
No.
So bee's there, but B is not a box so um
So it's all going to be object.
So…
This stuff is in there. Objects are supported.
kind of types are supported for classes and stuff but it's all
depends on the view you take of it, how much it actually works.
But the underlying functionality
is…
is that you can do this inheritance, you can make constructors, you can set the prototype. There's a prototype chain.
the things classes do this in a cleaner fashion
But it's using the same underlying mechanisms. But it's added some niceties into it because if I say.
what is R.
It says it's a rectangle.
Because I defined a class here.
and um
I think if I…
if instead you had a function, if I had new box associated as a constructor
for the object, you would actually put the name of that here.
And that's what I was trying to remember because that will make it all
uniform. You can see how everything fits together.
Sorry, I didn't mean for this to be so confusing, but…
Again, you saw my code.
I didn't use this functionality at all.
in any of my code. And there's a reason why because
you don't really need it a lot of times.
And in fact, when you're using modules
That's another thing.
So what I'm just ending on here just to say that note that my code, even when I abstracted it.
And I set up different modules
I didn't use all this weird prototype stuff with this and other things.
What I instead used
was…
I did, you know, I made another module. I had an export
And then I had an import in there and so like
This is also a class-like mechanism
But it's different from classes
as defined in as defined as in
JavaScript.
is a little confusing.
Yes. Does it work in practice? Yes.
But that's what I find is that there's now all this. JavaScript used to be a very simple language. It's become much more complicated over time.
And if you start looking in depth at how it all works, it gets very confusing as you just saw.
But you don't normally have to use it so much.
Anyway, I will stick around and answer questions and try to clean up the mess.
I made today. Otherwise, Thursday, we will focus on more well-trodden ground and talk about
Assignment for solutions and
just talk about the structure of the final exam.
and topics there.
Thanks a lot.