Vanilla JavaScript Projects

new Operator & Constructors

Anjana Vakil

Anjana Vakil

Software Engineer & Educator
Vanilla JavaScript Projects

Check out a free preview of the full Vanilla JavaScript Projects course

The "new Operator & Constructors" Lesson is part of the full, Vanilla JavaScript Projects course featured in this preview video. Here's what you'd learn in this lesson:

Anjana introduces classes in JavaScript and compares the syntax to other object-oriented languages. In JavaScript, the class keyword is a syntactic convenience and doesn't fundamentally change the object's behavior under the hood. Class constructors are also introduced in this lesson.


Transcript from the "new Operator & Constructors" Lesson

>> Zooming back out. So all of this exploration into iteration has been also kind of an exploration of the details of the object system, let's say, within JavaScript. And what we've been doing is assigning properties to objects and then passing those objects around. And so again, we're kind of in the domain of object-oriented programming, but the question came up before and comes up a lot is, but where are the classes in JavaScript?

How do I define the blueprint for an object. And that is what our next order of business is to explore classy jazz. And I don't just mean in the Tuxedo Pooh sense, I also mean in the sense of the class definition, which we can use with our friend, the new operator.

Okay, so the new operator basically gives us a new instance of a particular object. And again, type is used in the [LAUGH] loosey-goosey JavaScript sense of the word, which essentially is a special keyword that's looking for a constructor function. Which some languages have an init or other names of stuff.

[LAUGH] And so in JavaScript, we're calling them constructors, which is essentially a term borrowed from the OOP world. And so in a constructor, and you can just define any old function to be a constructor. If you use the this keyword, which personally, fun fact, my least favorite word in JavaScript.

[LAUGH] And that's why we haven't been talking about it too much yet, but here we go, we're thising it up. This keyword refers to this objectish here. Now, what exactly that evaluates to depends a lot on a lot of things, there's all these rules, Kyle Simpson has great info on it, go listen to him.

We're gonna be trying to keep our brains as functioning as they possibly can and just talk about the practicalities of how we can work with it. So when we use this.img=img, we're essentially assigning whatever the value was of image to a property on the thing created when you call this function with the new keyword.

So that if we call a new meme, but we're passing in a regularPooh.jpg, and the text next to him is using functions, we've got a kind of object-y function, this capital M meme. And we use the capital M like with date, and object, and so on and so forth.

Kind of convention wise as a way to say, this is a thing that you can construct. So we can do new meme. And then I can capture that value in a good old variable like Pooh. And I'll get out the values like pooh.image is regularPoohImg, or [COUGH] pooh.text is using functions.

And if I try to access an object that wasn't initialized, like fancy, I don't get it, it's undefined. Like everything else that is the complement of the things I have defined, okay. So, now, relatively recently again, in JavaScript, we have a class keyword which gives us the opportunity to write code that looks more like what we're used to if we are coming from a classical object-oriented language like Java or a language like Python, let's say.

So lots of different languages have this kind of class vibe, little classy vibes for us. Okay, so this is maybe slightly different. As with everything in JavaScript, there's even a few different ways that you can kind of structure your class definitions. But essentially, this gives us a little bit more fanciness to how we can declare custom object kinds, I should really be saying.

So in this case, I've got an analogous to my meme, I have a ClassyMeme. And again, we use the convention of the capitals. We have class, ClassyMeme, curlies, similar to how we would use function. And then we can, if we want to, declare some properties that we expect this object to have.

And we could even assign them default values so that we can, Access things by default. For example, the fanciness of this object is just gonna be assumed to be true cuz it's classy. It's a ClassyMeme, it's not just any old meme, it's Pooh in a tuxedo, all right?

So [LAUGH] we've got a constructor function that is named constructor, that takes in whatever those arguments are that we need for the new instance. And basically does the same thing as our function from before. And we can also define other functions in here that end up as methods on the object.

For example, the classyPooh can ask, I beg your pardon, do you have any Grey Poupon? If anybody remembers that very, very old commercial, okay, [LAUGH] that ran in the US for, I don't know, 30 years ago? [LAUGH] So, now instead of Pooh, we have ooh. And ooh is going to be a new ClassyMeme with fancyPooh and using classes.

And now is ooh fancy? Why, yes, it is. Even though we didn't pass in a Boolean value that got assigned to the fancy property, in our class declaration, we can put this default value at the beginning to make sure that if there isn't a override. For example, ClassyMeme that just, for some reason, fell from grace and now is just not gonna be let into the exclusive clubs into the dive bars or I'm hanging out, we're gonna see each other there.

Anyway, if we have a a override, we can set it, but we can have these default values. And so now, I can call ooh.fancy, and it's true, and I have this method, .begPardon, which doesn't look a whole lot different than if we had it be an additional property on the object.

But essentially, it's just a new syntactic way that we can make these fancy, constructible object.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now